forked from auth0/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_lock-sdk.html
176 lines (169 loc) · 6.91 KB
/
_lock-sdk.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<% if (meta.path !== "articles/libraries/lock/v11") { %>
<p>For more information on using Lock v11 <a href="/libraries/lock">see the documentation.</a></p>
<% } %>
<div class="code-picker">
<div class="languages-bar">
<ul>
<li class="active"><a href="#lock-modal" data-toggle="tab">Lock (Modal)</a></li>
<li><a href="#lock-inline" data-toggle="tab">Lock (Inline)</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown">Passwordless</a>
<ul class="dropdown-menu">
<li><a href="#passwordless-sms" data-toggle="tab">Passwordless (SMS)</a></li>
<li><a href="#passwordless-magiclink" data-toggle="tab">Passwordless (Magic Link)</a></li>
<li><a href="#passwordless-emailcode" data-toggle="tab">Passwordless (Email Code)</a></li>
</ul>
</li>
<li><a href="#customui" data-toggle="tab">Custom UI</a></li>
<li><a href="#plainlink" data-toggle="tab">Plain Links</a></li>
</ul>
</div>
<div class="tab-content">
<div id="lock-modal" class="tab-pane active">
<pre class="hljs html"><code><script src="${lock_url}"></script>
<script>
var lock = new Auth0Lock('${account.clientId}', '${account.namespace}', {
auth: {
redirectUrl: '${account.callback}',
responseType: 'code',
params: {
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
}
}
});
</script>
<button onclick="lock.show();">Login</button></code></pre>
</div>
<div id="lock-inline" class="tab-pane">
<pre class="hljs html"><code><div id="root" style="width: 320px; margin: 40px auto; padding: 10px; border-style: dashed; border-width: 1px; box-sizing: border-box;">
embedded area
</div>
<script src="${lock_url}"></script>
<script>
var lock = new Auth0Lock('${account.clientId}', '${account.namespace}', {
container: 'root',
auth: {
redirectUrl: '${account.callback}', // If not specified, defaults to the current page
responseType: 'token id_token',
params: {
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
}
}
});
lock.show();
</script></code></pre>
</div>
<div id="passwordless-sms" class="tab-pane">
<pre class="hljs html"><code><script src="${lock_url}"></script>
<script>
var lock = new Auth0LockPasswordless('${account.clientId}', '${account.namespace}', {
allowedConnections: ['sms'], // Should match the SMS connection name
responseType: 'token id_token',
auth: {
redirectUrl: '${account.callback}', // If not specified, defaults to the current page
params: {
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
}
}
}
);
function open() {
lock.show();
};
</script>
<button onclick="window.open();">SMS</button></code></pre>
</div>
<div id="passwordless-magiclink" class="tab-pane">
<pre class="hljs html"><code><script src="${lock_url}"></script>
<script>
var lock = new Auth0LockPasswordless('${account.clientId}', '${account.namespace}', {
passwordlessMethod: "link", // Sets Lock to use magic link
responseType: 'token id_token',
auth: {
redirectUrl: '${account.callback}', // If not specified, defaults to the current page
params: {
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
}
}
});
function open() {
lock.show();
}
</script>
<button onclick="window.open();">Magic Link</button></code></pre>
</div>
<div id="passwordless-emailcode" class="tab-pane">
<pre class="hljs html"><code><script src="${lock_url}"></script>
<script>
var lock = new Auth0LockPasswordless('${account.clientId}', '${account.namespace}', {
allowedConnections: ['email'], // Should match the Email connection name, it defaults to 'email'
passwordlessMethod: 'code', // If not specified, defaults to 'code'
responseType: 'token id_token',
auth: {
redirectUrl: '${account.callback}', // If not specified, defaults to the current page
params: {
scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
}
}
});
function open() {
lock.show();
}
</script>
<button onclick="window.open();">Email Code</button></code></pre>
</div>
<div id="customui" class="tab-pane">
<pre class="hljs html"><code><button class="signin-google">Sign in with Google (redirect)</button><br>
<button class="signin-google-popup">Sign in with Google (popup)</button><br>
<br><p>--- or ---</p>
<label>Email</label><input type="text" id="email"><br>
<label>Password</label><input type="password" id="password"><br>
<button class="signin-db">Sign in with Email/Password</button>
<script src="${auth0js_url}"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
var webAuth = new auth0.WebAuth({
domain: '${account.namespace}',
clientID: '${account.clientId}',
redirectUri: '${account.callback}'
});
// sign-in with social provider with plain redirect
$('.signin-google').on('click', function() {
webAuth.authorize({
connection: 'google-oauth2' // use connection identifier
});
});
// sign-in with social provider using a popup (window.open)
$('.signin-google-popup').on('click', function() {
webAuth.popup.authorize({
connection: 'google-oauth2'
});
});
$('.signin-db').on('click', function() {
webAuth.login({
realm: 'tests',
username: 'testuser',
password: 'testpass',
});
});
// Parse the authentication result
webAuth.parseHash((err, authResult) => {
if (authResult) {
// Save the tokens from the authResult in local storage or a cookie
localStorage.setItem('access_token', authResult.accessToken);
localStorage.setItem('id_token', authResult.idToken);
} else if (err) {
// Handle errors
console.log(err);
}
});
</script></code></pre>
</div>
<div id="plainlink" class="tab-pane">
<pre class="hljs md"><code>https://${account.namespace}/authorize?response_type=code
&scope=openid%20profile
&client_id=${account.clientId}
&redirect_uri=${account.callback}
&connection=CONNECTION_NAME</code></pre>
</div>
</div>
</div>