Skip to content

Commit 61f8f3a

Browse files
rconwayrconway
committed
[simple oidc client] Fixes for userInfo handling
1 parent 515dc30 commit 61f8f3a

File tree

2 files changed

+117
-98
lines changed

2 files changed

+117
-98
lines changed

‎oidc-pkce-client/simple/app.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
const clientId = 'openeo-public';
2+
const redirectUri = window.location.origin;
3+
console.log("Using Redirect URI: " + redirectUri)
4+
const scope = 'openid profile email';
5+
const oidcConfigUrl = 'https://auth.test.eoepca.org/realms/eoepca/.well-known/openid-configuration';
6+
let authEndpoint, tokenEndpoint, userInfoEndpoint;
7+
8+
async function fetchOidcConfig() {
9+
const response = await fetch(oidcConfigUrl);
10+
const oidcConfig = await response.json();
11+
authEndpoint = oidcConfig.authorization_endpoint;
12+
tokenEndpoint = oidcConfig.token_endpoint;
13+
userInfoEndpoint = oidcConfig.userinfo_endpoint;
14+
}
15+
16+
function generateRandomString(length) {
17+
const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
18+
let randomString = '';
19+
for (let i = 0; i < length; i++) {
20+
const randomIndex = Math.floor(Math.random() * charset.length);
21+
randomString += charset.charAt(randomIndex);
22+
}
23+
return randomString;
24+
}
25+
26+
function base64UrlEncode(str) {
27+
return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
28+
}
29+
30+
function sha256(plain) {
31+
const shaObj = new jsSHA('SHA-256', 'TEXT');
32+
shaObj.update(plain);
33+
const hash = shaObj.getHash('BYTES');
34+
return hash;
35+
}
36+
37+
async function login() {
38+
const codeVerifier = generateRandomString(128);
39+
sessionStorage.setItem('codeVerifier', codeVerifier);
40+
41+
const codeChallenge = base64UrlEncode(sha256(codeVerifier));
42+
const state = generateRandomString(16);
43+
44+
await fetchOidcConfig();
45+
46+
const authUrl = `${authEndpoint}?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&code_challenge=${codeChallenge}&code_challenge_method=S256&state=${state}`;
47+
window.location = authUrl;
48+
}
49+
50+
async function handleCallback(redirectTo) {
51+
const urlParams = new URLSearchParams(window.location.search);
52+
const code = urlParams.get('code');
53+
const state = urlParams.get('state');
54+
const codeVerifier = sessionStorage.getItem('codeVerifier');
55+
56+
if (code) {
57+
await fetchOidcConfig();
58+
59+
const tokenResponse = await fetch(tokenEndpoint, {
60+
method: 'POST',
61+
headers: {
62+
'Content-Type': 'application/x-www-form-urlencoded'
63+
},
64+
body: new URLSearchParams({
65+
grant_type: 'authorization_code',
66+
code: code,
67+
client_id: clientId,
68+
redirect_uri: redirectUri,
69+
code_verifier: codeVerifier
70+
})
71+
});
72+
const tokenData = await tokenResponse.json();
73+
sessionStorage.setItem('accessToken', tokenData.access_token);
74+
await fetchUserInfo(tokenData.access_token);
75+
}
76+
77+
window.location = redirectTo;
78+
}
79+
80+
async function fetchUserInfo(accessToken) {
81+
const userInfoResponse = await fetch(userInfoEndpoint, {
82+
headers: {
83+
'Authorization': `Bearer ${accessToken}`
84+
}
85+
});
86+
const userInfo = await userInfoResponse.json();
87+
localStorage.setItem('userInfo', JSON.stringify(userInfo));
88+
}
89+
90+
async function home() {
91+
const urlParams = new URLSearchParams(window.location.search);
92+
const code = urlParams.get('code');
93+
94+
if (code) {
95+
await handleCallback(window.location.origin);
96+
}
97+
98+
const userInfo = JSON.parse(localStorage.getItem('userInfo'));
99+
if (userInfo) {
100+
document.getElementById('userInfo').innerText = `Hello, ${userInfo.name}`;
101+
} else {
102+
console.log("Userinfo is not set");
103+
document.getElementById('userInfo').innerText = '';
104+
}
105+
}
106+
107+
function logout() {
108+
sessionStorage.removeItem('accessToken');
109+
localStorage.removeItem('userInfo');
110+
document.getElementById('userInfo').innerText = '';
111+
}
112+
113+
document.getElementById('loginButton').addEventListener('click', login);
114+
document.getElementById('logoutButton').addEventListener('click', logout);
115+
116+
window.onload = home;

‎oidc-pkce-client/simple/index.html‎

Lines changed: 1 addition & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -13,104 +13,7 @@
1313
<button id="logoutButton">Logout</button>
1414
<div id="userInfo"></div>
1515

16-
<script>
17-
const clientId = 'openeo-public';
18-
const redirectUri = window.location.origin;
19-
console.log("Using Redirect URI: " + redirectUri)
20-
const scope = 'openid profile email';
21-
const oidcConfigUrl = 'https://auth.test.eoepca.org/realms/eoepca/.well-known/openid-configuration';
22-
let authEndpoint, tokenEndpoint, userInfoEndpoint;
23-
24-
async function fetchOidcConfig() {
25-
const response = await fetch(oidcConfigUrl);
26-
const oidcConfig = await response.json();
27-
authEndpoint = oidcConfig.authorization_endpoint;
28-
tokenEndpoint = oidcConfig.token_endpoint;
29-
userInfoEndpoint = oidcConfig.userinfo_endpoint;
30-
}
31-
32-
function generateRandomString(length) {
33-
const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
34-
let randomString = '';
35-
for (let i = 0; i < length; i++) {
36-
const randomIndex = Math.floor(Math.random() * charset.length);
37-
randomString += charset.charAt(randomIndex);
38-
}
39-
return randomString;
40-
}
41-
42-
function base64UrlEncode(str) {
43-
return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
44-
}
45-
46-
function sha256(plain) {
47-
const shaObj = new jsSHA('SHA-256', 'TEXT');
48-
shaObj.update(plain);
49-
const hash = shaObj.getHash('BYTES');
50-
return hash;
51-
}
52-
53-
async function login() {
54-
const codeVerifier = generateRandomString(128);
55-
sessionStorage.setItem('codeVerifier', codeVerifier);
56-
57-
const codeChallenge = base64UrlEncode(sha256(codeVerifier));
58-
const state = generateRandomString(16);
59-
60-
await fetchOidcConfig();
61-
62-
const authUrl = `${authEndpoint}?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&code_challenge=${codeChallenge}&code_challenge_method=S256&state=${state}`;
63-
window.location = authUrl;
64-
}
65-
66-
async function handleCallback() {
67-
const urlParams = new URLSearchParams(window.location.search);
68-
const code = urlParams.get('code');
69-
const state = urlParams.get('state');
70-
const codeVerifier = sessionStorage.getItem('codeVerifier');
71-
72-
if (code) {
73-
await fetchOidcConfig();
74-
75-
const tokenResponse = await fetch(tokenEndpoint, {
76-
method: 'POST',
77-
headers: {
78-
'Content-Type': 'application/x-www-form-urlencoded'
79-
},
80-
body: new URLSearchParams({
81-
grant_type: 'authorization_code',
82-
code: code,
83-
client_id: clientId,
84-
redirect_uri: redirectUri,
85-
code_verifier: codeVerifier
86-
})
87-
});
88-
const tokenData = await tokenResponse.json();
89-
sessionStorage.setItem('accessToken', tokenData.access_token);
90-
fetchUserInfo(tokenData.access_token);
91-
}
92-
}
93-
94-
async function fetchUserInfo(accessToken) {
95-
const userInfoResponse = await fetch(userInfoEndpoint, {
96-
headers: {
97-
'Authorization': `Bearer ${accessToken}`
98-
}
99-
});
100-
const userInfo = await userInfoResponse.json();
101-
document.getElementById('userInfo').innerText = `Hello, ${userInfo.name}`;
102-
}
103-
104-
function logout() {
105-
sessionStorage.removeItem('accessToken');
106-
document.getElementById('userInfo').innerText = '';
107-
}
108-
109-
document.getElementById('loginButton').addEventListener('click', login);
110-
document.getElementById('logoutButton').addEventListener('click', logout);
111-
112-
window.onload = handleCallback;
113-
</script>
16+
<script src="app.js"></script>
11417
</body>
11518

11619
</html>

0 commit comments

Comments
 (0)