-
Notifications
You must be signed in to change notification settings - Fork 1
/
oauth.html
117 lines (112 loc) · 3.47 KB
/
oauth.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
<!DOCTYPE html>
<html>
<head>
<title>Lionel dev demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
/>
<style>
article {
--block-spacing-vertical: 2rem;
display: flex;
justify-items: center;
flex-direction: column;
max-width: 24rem;
margin-inline: auto;
}
img {
max-width: 13rem;
margin: 0 auto 2rem;
}
.view.signed-in,
.view.not-signed-in {
display: none;
}
</style>
<script src="./dev-config.js"></script>
<script src="./dist/index.umd.js"></script>
</head>
<body>
<main class="container">
<article class="view not-signed-in">
<hgroup>
<h1>Sign in</h1>
<h2>Using Lionel OAuth Client</h2>
</hgroup>
<img src="./docs/public/lionel-logo.svg" alt="Lionel logo" />
<button type="submit" class="contrast" onclick="oauthClient.signIn()">
Login
</button>
<a href onclick="signInSilently(event)">Sign in silently</a>
</article>
<article class="view signed-in">
<hgroup>
<h1>You are signed in</h1>
<h2>Using Lionel OAuth Client</h2>
</hgroup>
<img src="./docs/public/lionel-logo.svg" alt="Lionel logo" />
<label for="access-token">Access token:</label>
<textarea id="access-token" readonly></textarea>
<br />
<br />
<label for="access-token-expires">Tokens expire in:</label>
<textarea id="access-token-expires" readonly></textarea>
<a href onclick="signOut(event)">Remove token from storage</a>
</article>
</main>
<script>
setSignedIn(false)
var oauthClient = lioneloauthclient.createOauthClient({
...window.config,
redirectUri: 'http://localhost:3001/oauth-callback.html',
scopes: ['api'],
debug: true
})
oauthClient.subscribe('tokenLoaded', function (accessToken) {
setSignedIn(true)
document.getElementById('access-token').value = accessToken
document.getElementById('access-token-expires').value =
oidcClient.getAccessTokenExpires() +
'\n' +
'(' +
new Date(oidcClient.getAccessTokenExpires() * 1000).toISOString() +
')'
})
oauthClient.subscribe('tokenUnloaded', function () {
setSignedIn(false)
})
function setSignedIn(signedIn) {
const viewNodes = document.querySelectorAll('.view')
Array.prototype.slice.call(viewNodes, 0).forEach(function (viewEl) {
if (viewEl.className.includes('not-signed-in')) {
viewEl.style.display = signedIn ? 'none' : 'flex'
} else if (viewEl.className.includes('signed-in')) {
viewEl.style.display = signedIn ? 'flex' : 'none'
}
})
}
function signInSilently(e) {
e.preventDefault()
oauthClient
.signInSilently()
.then(response => {
if (!response.tokenResponse.accessToken) {
alert('Not signed in')
return
}
location.reload()
})
.catch(error => {
alert(error)
})
}
function signOut(e) {
e.preventDefault()
oauthClient.removeAccessToken()
location.reload()
}
</script>
</body>
</html>