Skip to content

Commit 1be0ef5

Browse files
author
Nathan Totten
committed
Lock SDK include
1 parent 751ab1d commit 1be0ef5

File tree

1 file changed

+154
-0
lines changed

1 file changed

+154
-0
lines changed

‎articles/_includes/_lock-sdk.html

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
2+
<p>For more information on using Lock <a href="/libraries/lock">see the documentation.</a></p>
3+
<div class="code-picker">
4+
<div class="languages-bar">
5+
<ul>
6+
<li class="active"><a href="#lock-modal" data-toggle="tab">Lock (Modal)</a></li>
7+
<li><a href="#lock-inline" data-toggle="tab">Lock (Inline)</a></li>
8+
<li class="dropdown"><a href="#" data-toggle="dropdown">Passwordless</a>
9+
<ul class="dropdown-menu">
10+
<li><a href="#passwordless-sms" data-toggle="tab">Passwordless (SMS)</a></li>
11+
<li><a href="#passwordless-magiclink" data-toggle="tab">Passwordless (Magic Link)</a></li>
12+
<li><a href="#passwordless-emailcode" data-toggle="tab">Passwordless (Email Code)</a></li>
13+
</ul>
14+
</li>
15+
<li><a href="#customui" data-toggle="tab">Custom UI</a></li>
16+
<li><a href="#plainlink" data-toggle="tab">Plain Links</a></li>
17+
</ul>
18+
</div>
19+
<div class="tab-content">
20+
<div id="lock-modal" class="tab-pane active">
21+
<pre class="hljs html"><code>&lt;script src=&quot;https://cdn.auth0.com/js/lock/10.2/lock.min.js&quot;&gt;&lt;/script&gt;
22+
&lt;script&gt;
23+
var lock = new Auth0Lock('${account.clientId}', '${account.namespace}', {
24+
auth: {
25+
redirectUrl: '${account.callback}',
26+
responseType: 'code',
27+
params: {
28+
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
29+
}
30+
}
31+
});
32+
&lt;/script&gt;
33+
&lt;button onclick=&quot;lock.show();&quot;&gt;Login&lt;/button&gt;</code></pre>
34+
</div>
35+
<div id="lock-inline" class="tab-pane">
36+
<pre class="hljs html"><code>&lt;div id=&quot;root&quot; style=&quot;width: 320px; margin: 40px auto; padding: 10px; border-style: dashed; border-width: 1px; box-sizing: border-box;&quot;&gt;
37+
embedded area
38+
&lt;/div&gt;
39+
&lt;script src=&quot;https://cdn.auth0.com/js/lock/10.2/lock.min.js&quot;&gt;&lt;/script&gt;
40+
&lt;script&gt;
41+
var lock = new Auth0Lock('${account.clientId}', '${account.namespace}', {
42+
container: 'root',
43+
auth: {
44+
redirectUrl: '${account.callback}',
45+
responseType: 'code',
46+
params: {
47+
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
48+
}
49+
}
50+
});
51+
lock.show();
52+
&lt;/script&gt;</code></pre>
53+
</div>
54+
<div id="passwordless-sms" class="tab-pane">
55+
<pre class="hljs html"><code>&lt;script src=&quot;https://cdn.auth0.com/js/lock-passwordless-2.2.min.js&quot;&gt;&lt;/script&gt;
56+
&lt;script&gt;
57+
var lock = new Auth0LockPasswordless('${account.clientId}', '${account.namespace}');
58+
function open() {
59+
lock.sms({
60+
callbackURL: '${account.callback}',
61+
authParams: {
62+
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
63+
}
64+
});
65+
}
66+
&lt;/script&gt;
67+
&lt;button onclick=&quot;window.open();&quot;&gt;SMS&lt;/button&gt;</code></pre>
68+
</div>
69+
<div id="passwordless-magiclink" class="tab-pane">
70+
<pre class="hljs html"><code>&lt;script src=&quot;https://cdn.auth0.com/js/lock-passwordless-2.2.min.js&quot;&gt;&lt;/script&gt;
71+
&lt;script&gt;
72+
var lock = new Auth0LockPasswordless('${account.clientId}', '${account.namespace}');
73+
function open() {
74+
lock.magiclink({
75+
callbackURL: '${account.callback}',
76+
authParams: {
77+
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
78+
}
79+
});
80+
}
81+
&lt;/script&gt;
82+
&lt;button onclick=&quot;window.open();&quot;&gt;Magic Link&lt;/button&gt;</code></pre>
83+
</div>
84+
<div id="passwordless-emailcode" class="tab-pane">
85+
<pre class="hljs html"><code>&lt;script src=&quot;https://cdn.auth0.com/js/lock-passwordless-2.2.min.js&quot;&gt;&lt;/script&gt;
86+
&lt;script&gt;
87+
var lock = new Auth0LockPasswordless('${account.clientId}', '${account.namespace}');
88+
function open() {
89+
lock.emailcode({
90+
callbackURL: '${account.callback}',
91+
authParams: {
92+
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
93+
}
94+
});
95+
}
96+
&lt;/script&gt;
97+
&lt;button onclick=&quot;window.open();&quot;&gt;Email Code&lt;/button&gt;</code></pre>
98+
</div>
99+
<div id="customui" class="tab-pane">
100+
<pre class="hljs html"><code>&lt;button class=&quot;signin-google&quot;&gt;Sign in with Google (redirect)&lt;/button&gt;&lt;br&gt;
101+
&lt;button class=&quot;signin-google-popup&quot;&gt;Sign in with Google (popup)&lt;/button&gt;&lt;br&gt;
102+
&lt;br&gt;&lt;p&gt;--- or ---&lt;/p&gt;
103+
&lt;label&gt;Email&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;email&quot;&gt;&lt;br&gt;
104+
&lt;label&gt;Password&lt;/label&gt;&lt;input type=&quot;password&quot; id=&quot;password&quot;&gt;&lt;br&gt;
105+
&lt;button class=&quot;signin-db&quot;&gt;Sign in with Email/Password&lt;/button&gt;
106+
107+
&lt;script src=&quot;https://cdn.auth0.com/w2/auth0-7.1.min.js&quot;&gt;&lt;/script&gt;
108+
&lt;script src=&quot;http://code.jquery.com/jquery.js&quot;&gt;&lt;/script&gt;
109+
&lt;script&gt;
110+
var auth0 = new Auth0({
111+
domain: '${account.namespace}',
112+
clientID: '${account.clientId}',
113+
callbackURL: '${account.callback}'
114+
});
115+
// sign-in with social provider with plain redirect
116+
$('.signin-google').on('click', function() {
117+
auth0.signin({connection: 'google-oauth2'}); // use connection identifier
118+
});
119+
// sign-in with social provider using a popup (window.open)
120+
$('.signin-google-popup').on('click', function() {
121+
auth0.signin({popup: true, connection: 'google-oauth2'},
122+
function(err, profile, id_token, access_token, state) {
123+
/*
124+
store the profile and id_token in a cookie or local storage
125+
$.cookie('profile', profile);
126+
$.cookie('id_token', id_token);
127+
*/
128+
});
129+
});
130+
$('.signin-db').on('click', function() {
131+
auth0.signin({
132+
connection: 'foo',
133+
username: 'bar',
134+
password: 'foobar'
135+
},
136+
function (err, profile, id_token, access_token, state) {
137+
/*
138+
store the profile and id_token in a cookie or local storage
139+
$.cookie('profile', profile);
140+
$.cookie('id_token', id_token);
141+
*/
142+
});
143+
});
144+
&lt;/script&gt;</code></pre>
145+
</div>
146+
<div id="plainlink" class="tab-pane">
147+
<pre class="hljs md"><code>https://${account.namespace}/authorize?response_type=code
148+
&nbsp;&nbsp;&amp;scope=openid%20profile
149+
&nbsp;&nbsp;&amp;client_id=${account.clientId}
150+
&nbsp;&nbsp;&amp;redirect_uri=${account.callback}
151+
&nbsp;&nbsp;&amp;connection=CONNECTION_NAME</code></pre>
152+
</div>
153+
</div>
154+
</div>

0 commit comments

Comments
 (0)