-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (128 loc) · 5.65 KB
/
index.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
<!--
Copyright 2019 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fake FedCM RP Demo</title>
<meta name="description" content="Fake FedCM RP Demo">
<link id="favicon" rel="icon" href="https://cdn.glitch.me/94838ffe-241b-4a67-a9e0-290bfe34c351%2Fbank.png?v=1639111444422" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./bundle.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@7.0.0/dist/material-components-web.min.css">
<script src="https://cdn.jsdelivr.net/gh/herrjemand/Base64URL-ArrayBuffer@latest/lib/base64url-arraybuffer.js"></script>
<script src="components-bundle.js" type="module"></script>
<meta name="nonce" content="99640149167">
<meta http-equiv="origin-trial" content="AkMZTqhDcSehuduraIwE5CJhhk7Zh1znAAxWmjKRDVsZqgj6s6mUEG/uFPM6EdJ4zAvK9nDIIV5CtvDXbcV9ggoAAABpeyJvcmlnaW4iOiJodHRwczovL2ZlZGNtLXJwLWRlbW8uZ2xpdGNoLm1lOjQ0MyIsImZlYXR1cmUiOiJGZWRDTSIsImV4cGlyeSI6MTY2NDU4MjM5OSwiaXNTdWJkb21haW4iOnRydWV9">
</head>
<body class="mdc-typography">
<mwc-top-app-bar-fixed>
<span slot="title">Fake FedCM RP Demo</span>
<mwc-icon-button id="code" icon="code" slot="actionItems"></mwc-icon-button>
</mwc-top-app-bar-fixed>
<mwc-linear-progress id="progress"></mwc-linear-progress>
<main class="content">
<h2 class="center">
Welcome to Fake FedCM RP Demo!
</h2>
<p id="unsupported" class="warning hidden">
Your browser does not support FedCM. Try on Chrome for Android with a flag chrome://flags/#fedcm.<br>
If you are on Chrome 105 or later, please try <a href="https://fedcm-rp-test.glitch.me">this</a> instead.
</p>
<div id="profile" class="center"></div>
<div id="login" class="center">
<mwc-button id="idp" raised>Sign-in on IDP</mwc-button>
<p class="instructions">
If you don't see a sign-in dialog, you need to sign-in on the IDP first.
</p>
<p class="instructions">
Use account ID of "<code>multiple-accounts</code>" to try mulitple accounts dialog.
</p>
<p class="instructions">
If you are using Chrome Canry and it's not working as expected, the API is changing daily. Please try <a href="https://fedcm-rp-test.glitch.me">https://fedcm-rp-test.glitch.me</a> instead.
</p>
</div>
</main>
<script type="module">
import { $, toast, loading, _fetch, getCredential } from './client.js';
import { html, render } from 'https://unpkg.com/lit-html@2.2.0/lit-html.js?module';
$('#code').addEventListener('click', e => {
location.href = 'https://glitch.com/edit/#!/fedcm-rp-demo';
});
const IDP_ORIGIN = 'https://fedcm-idp-demo.glitch.me';
const CLIENT_ID = 'https://fedcm-rp-demo.glitch.me';
const signIn = async () => {
try {
const credential = await getCredential();
const nonce = $('meta[name="nonce"]').content;
const { idToken } = await credential.login({ nonce });
console.log(idToken);
alert(origin + ':' + idToken);
const user = await _fetch('/verify', { idToken });
render(html`
<p>You are signed in!</p>
<img src="${user.picture}" class="picture">
<p>${user.name} (${user.username})</p>
<mwc-button @click="${signout(user.user_id)}" raised>Sign-out</mwc-button>
<mwc-button @click="${unregister(user.username)}" raised>Unregister</mwc-button>
`, $('#profile'));
$('#login').classList.add('hidden');
} catch (e) {
console.error(e);
toast(e.message);
}
}
const signout = (account_id) => async () => {
try {
loading.start();
const credential = await getCredential(account_id);
await credential.logout();
toast('You are signed out. Redirecting in 3.0 sec.');
setTimeout(() => {
location.href = '/signout';
}, 3000);
} catch (e) {
loading.stop();
console.error(e);
toast(e.message);
}
};
const unregister = (username) => async () => {
try {
loading.start();
const credential = await getCredential();
await credential.revoke(username);
toast('Your account is revoked. Redirecting in 3.0 sec.');
setTimeout(() => {
location.href = '/signout';
}, 3000);
} catch (e) {
loading.stop();
console.error(e);
toast(e.message);
}
};
$('#idp').addEventListener('click', e => {
location.href = IDP_ORIGIN;
})
if ('FederatedCredential' in window && 'login' in window.FederatedCredential.prototype) {
await signIn();
} else {
$('#unsupported').classList.remove('hidden');
}
</script>
<mwc-snackbar id="snackbar"></mwc-snackbar>
</body>
</html>