Skip to content

Commit 43861c0

Browse files
simeng-lisimeng-li
committed
feat: upate the browser-sample
update the browser-sample
1 parent 4a80ba0 commit 43861c0

File tree

4 files changed

+138
-71
lines changed

4 files changed

+138
-71
lines changed

‎packages/browser-sample/src/consts.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
export const baseUrl = window.location.origin;
22
export const redirectUrl = `${baseUrl}/callback`;
33

4-
export const appId = 'sampleId'; // Register the sample app in Logto dashboard
4+
export const appId = '<your-app-id>'; // Register the sample app in Logto dashboard and replace with your own app id
55
export const endpoint = 'http://localhost:3001'; // Replace with your own Logto endpoint
6+
7+
export const resourceIndicators = ['http://localhost:3001/api/test']; // Replace with your own resource indicators registered in Logto dashboard
8+
export const resourceScopes = ['read', 'write']; // Replace with your own resource scopes registered with the resource indicators in Logto dashboard

‎packages/browser-sample/src/index.js

+27-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
11
import LogtoClient, { UserScope } from '@logto/browser';
22

3-
import { endpoint, appId } from './consts';
3+
import { endpoint, appId, resourceIndicators, resourceScopes } from './consts';
44
import Callback from './pages/Callback';
55
import Home from './pages/Home';
66

77
import './index.scss';
88

9-
const logtoClient = new LogtoClient({
10-
endpoint,
11-
appId,
12-
scopes: [UserScope.Email, UserScope.Phone, UserScope.CustomData, UserScope.Identities],
13-
});
14-
const app = document.querySelector('#app');
9+
(() => {
10+
const logtoClient = new LogtoClient({
11+
endpoint,
12+
appId,
13+
resources: resourceIndicators,
14+
scopes: [
15+
UserScope.Email,
16+
UserScope.Phone,
17+
UserScope.CustomData,
18+
UserScope.Identities,
19+
UserScope.Organizations,
20+
...resourceScopes,
21+
],
22+
});
1523

16-
// Could replace this with a formal router solution
17-
const isCallback = window.location.pathname.startsWith('/callback');
18-
const render = isCallback ? Callback : Home;
24+
const main = () => {
25+
const app = document.querySelector('#app');
1926

20-
render(app, logtoClient);
27+
// Could replace this with a formal router solution
28+
const isCallback = window.location.pathname.startsWith('/callback');
29+
30+
const render = isCallback ? Callback : Home;
31+
32+
render(app, logtoClient);
33+
};
34+
35+
document.addEventListener('DOMContentLoaded', main);
36+
})();

‎packages/browser-sample/src/pages/Callback.js

+10-23
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable @silverhand/fp/no-mutation */
22
import { baseUrl } from '../consts';
33

4-
const Callback = async (app, logtoClient) => {
4+
const Callback = (app, logtoClient) => {
55
if (!logtoClient) {
66
throw new Error('no logto client found');
77
}
@@ -17,30 +17,17 @@ const Callback = async (app, logtoClient) => {
1717
fragment.append(container);
1818
app.append(fragment);
1919

20-
await logtoClient.handleSignInCallback(window.location.href);
20+
// Handle the sign-in callback
21+
(async () => {
22+
await logtoClient.handleSignInCallback(window.location.href);
2123

22-
if (logtoClient.isAuthenticated) {
23-
h3.innerHTML = 'Signed in!';
24+
if (!logtoClient.isAuthenticated) {
25+
h3.innerHTML = 'Sign in failed.';
26+
return;
27+
}
2428

25-
const h4 = document.createElement('h4');
26-
container.append(h4);
27-
28-
// eslint-disable-next-line @silverhand/fp/no-let
29-
let countDown = 3;
30-
h4.innerHTML = `Redirecting back to home page in ${countDown} seconds...`;
31-
32-
const interval = setInterval(() => {
33-
countDown -= 1;
34-
h4.innerHTML = `Redirecting back to home page in ${countDown} seconds...`;
35-
36-
if (countDown === 0) {
37-
clearInterval(interval);
38-
window.location.assign(baseUrl);
39-
}
40-
}, 1000);
41-
} else {
42-
h3.innerHTML = 'Sign in failed.';
43-
}
29+
window.location.assign(baseUrl);
30+
})();
4431
};
4532

4633
export default Callback;

‎packages/browser-sample/src/pages/Home.js

+97-36
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,5 @@
11
/* eslint-disable @silverhand/fp/no-mutation */
2-
import { baseUrl, redirectUrl } from '../consts';
3-
4-
const Home = async (app, logtoClient) => {
5-
if (!logtoClient) {
6-
throw new Error('no logto client found');
7-
}
8-
9-
// eslint-disable-next-line @silverhand/fp/no-let
10-
let isAuthenticated = false;
11-
const onClickSignIn = () => logtoClient.signIn(redirectUrl);
12-
const onClickSignOut = () => logtoClient.signOut(baseUrl);
13-
14-
(async () => {
15-
isAuthenticated = await logtoClient.isAuthenticated();
16-
renderButton(container, { isAuthenticated, onClickSignIn, onClickSignOut });
17-
18-
if (isAuthenticated) {
19-
const userInfo = await logtoClient.fetchUserInfo();
20-
renderTable(container, { userInfo });
21-
}
22-
})();
23-
24-
const fragment = document.createDocumentFragment();
25-
26-
const container = document.createElement('div');
27-
container.classList.add('container');
28-
29-
const h3 = document.createElement('h3');
30-
h3.innerHTML = 'Logto Browser Sample';
31-
32-
container.append(h3);
33-
renderButton(container, { isAuthenticated, onClickSignIn, onClickSignOut });
34-
35-
fragment.append(container);
36-
app.append(fragment);
37-
};
2+
import { baseUrl, redirectUrl, resourceIndicators } from '../consts';
383

394
const renderButton = (container, states) => {
405
const { isAuthenticated, onClickSignIn, onClickSignOut } = states;
@@ -67,6 +32,7 @@ const renderTable = (container, states) => {
6732
table.append(thead);
6833

6934
const tbody = document.createElement('tbody');
35+
7036
for (const [key, value] of Object.entries(userInfo)) {
7137
const tr = document.createElement('tr');
7238
const tdName = document.createElement('td');
@@ -81,5 +47,100 @@ const renderTable = (container, states) => {
8147
container.append(table);
8248
};
8349

50+
const renderTokenTable = (container, logtoClient, userInfo) => {
51+
const table = document.createElement('table');
52+
53+
const thead = document.createElement('thead');
54+
const tr = document.createElement('tr');
55+
const thName = document.createElement('th');
56+
const thValue = document.createElement('th');
57+
const thAction = document.createElement('th');
58+
59+
thName.innerHTML = 'TokenType';
60+
thValue.innerHTML = 'Value';
61+
thAction.innerHTML = 'GetToken';
62+
63+
tr.append(thName, thValue, thAction);
64+
thead.append(tr);
65+
table.append(thead);
66+
67+
const tbody = document.createElement('tbody');
68+
69+
const renderTokenRow = (name, value, action) => {
70+
const tr = document.createElement('tr');
71+
const tdName = document.createElement('td');
72+
const tdValue = document.createElement('td');
73+
const tdAction = document.createElement('td');
74+
75+
tdName.innerHTML = name;
76+
tdValue.innerHTML = value;
77+
78+
const getTokenButton = document.createElement('button');
79+
getTokenButton.innerHTML = 'Get Token';
80+
tdAction.append(getTokenButton);
81+
82+
getTokenButton.addEventListener('click', async () => {
83+
const claims = await action();
84+
tdValue.innerHTML = JSON.stringify(claims);
85+
});
86+
87+
tr.append(tdName, tdValue, tdAction);
88+
tbody.append(tr);
89+
};
90+
91+
// Get resource access token
92+
for (const resource of resourceIndicators) {
93+
renderTokenRow(resource, '', () => logtoClient.getAccessTokenClaims(resource));
94+
}
95+
96+
// Get Organization access token
97+
const { organizations } = userInfo;
98+
if (organizations) {
99+
for (const organization of organizations) {
100+
renderTokenRow(organization, '', () => logtoClient.getOrganizationTokenClaims(organization));
101+
}
102+
}
103+
104+
table.append(tbody);
105+
container.append(table);
106+
};
107+
108+
const render = async (container, logtoClient) => {
109+
const onClickSignIn = () => logtoClient.signIn(redirectUrl);
110+
const onClickSignOut = () => logtoClient.signOut(baseUrl);
111+
112+
const isAuthenticated = await logtoClient.isAuthenticated();
113+
114+
renderButton(container, { isAuthenticated, onClickSignIn, onClickSignOut });
115+
116+
if (isAuthenticated) {
117+
const userInfo = await logtoClient.fetchUserInfo();
118+
renderTable(container, { userInfo });
119+
renderTokenTable(container, logtoClient, userInfo);
120+
}
121+
};
122+
123+
const Home = (app, logtoClient) => {
124+
if (!logtoClient) {
125+
throw new Error('no logto client found');
126+
}
127+
128+
const fragment = document.createDocumentFragment();
129+
130+
const container = document.createElement('div');
131+
container.classList.add('container');
132+
133+
const h3 = document.createElement('h3');
134+
h3.innerHTML = 'Logto Browser Sample';
135+
container.append(h3);
136+
137+
fragment.append(container);
138+
app.append(fragment);
139+
140+
(async () => {
141+
await render(container, logtoClient);
142+
})();
143+
};
144+
84145
export default Home;
85146
/* eslint-enable @silverhand/fp/no-mutation */

0 commit comments

Comments
 (0)