Skip to content

Commit 06fe0da

Browse files
author
Sergey Malinin
committed
Fix Login code
1 parent ceed6dd commit 06fe0da

File tree

2 files changed

+339
-0
lines changed

2 files changed

+339
-0
lines changed

Auth/login2.html

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Select your Identity Provider</title>
7+
<script src="solid-client-authn.bundle1.js"></script>
8+
<script src="login1.js"></script>
9+
10+
<style>
11+
body, button, input {
12+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
13+
font-size: 11pt;
14+
}
15+
16+
p {
17+
text-align: center;
18+
}
19+
20+
button {
21+
border: 1px solid grey;
22+
border-radius: 2px;
23+
padding: 4px;
24+
margin-left: 4px;
25+
cursor: pointer;
26+
}
27+
28+
:focus {
29+
outline: none;
30+
}
31+
32+
#app-container {
33+
max-width: 600px;
34+
margin: auto;
35+
}
36+
37+
.idp-list {
38+
display: flex;
39+
flex-wrap: wrap;
40+
justify-content: space-between;
41+
}
42+
43+
.idp {
44+
flex: 1 100%;
45+
margin: .5em;
46+
47+
border: none;
48+
border-radius: 2px;
49+
padding: .5em;
50+
background-color: rgb(61, 109, 211);
51+
color: #fff;
52+
53+
display: flex;
54+
justify-content: space-between;
55+
align-items: center;
56+
transition: background-color 0.4s, box-shadow 0.4s;
57+
}
58+
59+
.idp:hover,
60+
.idp:focus {
61+
background-color: rgb(55, 97, 188);
62+
box-shadow: 1px 1px rgb(46, 80, 151);
63+
}
64+
65+
.idp:active {
66+
cursor: pointer;
67+
box-shadow: inset 1px 1px rgb(46, 80, 152);
68+
}
69+
70+
.idp .icon {
71+
display: flex;
72+
height: 42px;
73+
border-radius: 2px;
74+
margin-left: .5em;
75+
}
76+
77+
.custom-idp {
78+
display: flex;
79+
flex-wrap: nowrap;
80+
justify-content: space-between;
81+
margin: .5em;
82+
}
83+
84+
.custom-idp input {
85+
flex-grow: 2;
86+
}
87+
88+
.hidden {
89+
display: none!important;
90+
}
91+
92+
@media all and (min-width: 500px) {
93+
.idp {
94+
flex: 1 200px;
95+
}
96+
}
97+
</style>
98+
</head>
99+
<body>
100+
<div id="buttons" class="app-container">
101+
<div>
102+
<h4><p>Choose where you log in</p></h4>
103+
<form class="custom-idp hidden" id="custom-idp-form">
104+
<input type="url" id="custom-idp" placeholder="https://my-identity.provider">
105+
<button type="button" id="login-custom">Log In</button>
106+
<button type="reset" id="cancel-custom">Cancel</button>
107+
</form>
108+
<div class="idp-list">
109+
<button type="button" id="enable-custom" class="idp">
110+
<span class="label">Login with custom provider ...</span>
111+
</button>
112+
<button type="button" id="login_community" class="idp">
113+
<span class="label">Solid Community</span>
114+
</button>
115+
<button type="button" id="login_inrupt" class="idp">
116+
<span class="label">Inrupt Pod Spaces</span>
117+
</button>
118+
<button type="button" id="login_opl_oidc" class="idp">
119+
<span class="label">OpenLink WebID-OIDC</span>
120+
</button>
121+
<button type="button" id="login_opl_v5" class="idp">
122+
<span class="label">OpenLink Solid Server ver:5.x</span>
123+
</button>
124+
<button type="button" id="login_opl_v5_6" class="idp">
125+
<span class="label">OpenLink Solid Server ver:5.6</span>
126+
</button>
127+
<button type="button" id="login_opl_comm" class="idp">
128+
<span class="label">OpenLink Solid Community</span>
129+
</button>
130+
<button type="button" id="login_opl_ds" class="idp">
131+
<span class="label">OpenLink Data Spaces (QA server)</span>
132+
</button>
133+
<button type="button" id="login_opl_uriburner" class="idp">
134+
<span class="label">OpenLink URIBurner Service</span>
135+
</button>
136+
<button type="button" id="login_opl_myopl" class="idp">
137+
<span class="label">OpenLink Identity Provider</span>
138+
</button>
139+
<button type="button" id="login_opl_id" class="idp">
140+
<span class="label">ID MyOpenLink.NET</span>
141+
</button>
142+
</div>
143+
</div>
144+
<div id="logged" class="container hidden">
145+
<h4><p>Logged In as:</p></h4>
146+
<p id="webid"></p>
147+
<button type="button" id="logout" class="idp hidden" style="color:black; background:lightgray;">
148+
<span class="label">Logout</span>
149+
</button>
150+
</div>
151+
</div>
152+
153+
</body>
154+
</html>

Auth/login2.js

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
const authClient = solidClientAuthentication.default;
2+
3+
var url = new URL(window.location.href)
4+
const url_hash = url.hash;
5+
6+
7+
const IdP = url.searchParams.get('idp') || '';
8+
const autoLogin = url.searchParams.get('autologin');
9+
var sLogin = url.searchParams.get('slogin');
10+
const sApp = url.searchParams.get('app');
11+
12+
const callback = url.origin+url.pathname + (sApp ? '?app='+sApp : '');
13+
14+
const authCode =
15+
url.searchParams.get("code") ||
16+
// FIXME: Temporarily handle both auth code and implicit flow.
17+
// Should be either removed or refactored.
18+
url.searchParams.get("access_token");
19+
20+
21+
if (sLogin === '1') {
22+
localStorage.setItem('slogin','1');
23+
} else {
24+
sLogin = localStorage.getItem('slogin');
25+
if (!authCode)
26+
sLogin=0;
27+
}
28+
29+
30+
document.addEventListener('DOMContentLoaded', async () =>
31+
{
32+
if (authCode) {
33+
var authData = {url: location.href}
34+
35+
for(var i=0; i < localStorage.length; i++) {
36+
var key = localStorage.key(i);
37+
if (key.startsWith('issuerConfig:') || key.startsWith('solidClientAuthenticationUser:') || key.startsWith('oidc.'))
38+
authData[key] = localStorage.getItem(key);
39+
}
40+
41+
if (sLogin === '1')
42+
window.postMessage('oidc-code1:'+btoa(JSON.stringify(authData)), location.origin);
43+
else
44+
window.postMessage('oidc-code:'+btoa(JSON.stringify(authData)), location.origin);
45+
await sleep(3*1000);
46+
}
47+
48+
initButtons((sLogin==='1'), IdP)
49+
50+
if (authCode)
51+
return;
52+
53+
if (window.location.hash === '#relogin') {
54+
await authClient.logout();
55+
}
56+
/***
57+
// Check if user is already logged in
58+
const session = await authClient.currentSession()
59+
if (session && session.hasCredentials()) {
60+
if (sLogin === '1')
61+
window.postMessage('oidc-webid-slogin:', location.origin);
62+
else
63+
window.postMessage('oidc-webid:', location.origin);
64+
65+
localStorage.removeItem('slogin');
66+
sLogin = null;
67+
show('logged')
68+
show('logout')
69+
setField("webid", session.idClaims.sub)
70+
}
71+
***/
72+
if (sLogin === '1' || autoLogin === '1') {
73+
login(IdP);
74+
}
75+
})
76+
77+
78+
async function login (idp)
79+
{
80+
try {
81+
authClient.login({
82+
oidcIssuer: idp,
83+
redirectUrl: callback,
84+
tokenType: "Bearer", //"DPoP", //"Bearer",
85+
clientName: "OSDS"
86+
});
87+
88+
} catch (error) {
89+
console.log('Error logging in:')
90+
console.error(error)
91+
console.log('Make sure this page is served via HTTPS, otherwise browser will block it')
92+
}
93+
}
94+
95+
function logout () {
96+
console.log('Logging out...')
97+
authClient.logout()
98+
hide('logged')
99+
hide('logout')
100+
}
101+
102+
/**
103+
* App/UI logic. This would normally done in React, Ember, Vue, etc.
104+
*/
105+
function initButtons (slogin, idp) {
106+
initButton('login_community', () => login('https://solidcommunity.net'))
107+
initButton('login_inrupt', () => login('https://broker.pod.inrupt.com'))
108+
initButton('login_opl_oidc', () => login('https://solid.openlinksw.com:8444'))
109+
initButton('login_opl_v5', () => login('https://solid.openlinksw.com:8445'))
110+
initButton('login_opl_v5_6', () => login('https://solid.openlinksw.com:8443'))
111+
initButton('login_opl_comm', () => login('https://solid.openlinksw.com:8446'))
112+
initButton('login_opl_ds', () => login('https://ods-qa.openlinksw.com'))
113+
initButton('login_opl_uriburner', () => login('https://linkeddata.uriburner.com'))
114+
initButton('login_opl_myopl', () => login('https://my.openlinksw.com'))
115+
initButton('login_opl_id', () => login('https://id.myopenlink.net'))
116+
117+
initButton('login-custom', () => {
118+
var idp = document.getElementById('custom-idp').value
119+
if (idp.endsWith("/"))
120+
idp = idp.substring(0, idp.length - 1)
121+
login(idp)
122+
})
123+
124+
if (slogin || idp) {
125+
document.getElementById('custom-idp-form').classList.toggle('hidden')
126+
document.getElementById('login_community').classList.toggle('hidden')
127+
document.getElementById('login_inrupt').classList.toggle('hidden')
128+
document.getElementById('login_opl_oidc').classList.toggle('hidden')
129+
document.getElementById('login_opl_v5').classList.toggle('hidden')
130+
document.getElementById('login_opl_v5_6').classList.toggle('hidden')
131+
document.getElementById('login_opl_comm').classList.toggle('hidden')
132+
document.getElementById('login_opl_ds').classList.toggle('hidden')
133+
document.getElementById('login_opl_uriburner').classList.toggle('hidden')
134+
document.getElementById('login_opl_myopl').classList.toggle('hidden')
135+
document.getElementById('login_opl_id').classList.toggle('hidden')
136+
137+
document.getElementById('enable-custom').classList.toggle('hidden')
138+
document.getElementById('cancel-custom').classList.toggle('hidden')
139+
140+
document.getElementById('custom-idp').value = idp;
141+
} else {
142+
initButton('cancel-custom', () => {
143+
hide('custom-idp-form')
144+
})
145+
initButton('enable-custom', () => {
146+
var f = document.getElementById('custom-idp-form')
147+
f.classList.toggle('hidden')
148+
})
149+
}
150+
151+
initButton('logout', () => logout())
152+
}
153+
154+
155+
function initButton(id, action) {
156+
document.getElementById(id).addEventListener('click', action)
157+
}
158+
159+
160+
/**
161+
* App-specific util functions, ignore.
162+
*/
163+
function setField (id, value) {
164+
var field = document.getElementById(id)
165+
if (field) {
166+
field.innerHTML = value
167+
}
168+
}
169+
function setFieldText (id, value) {
170+
var field = document.getElementById(id)
171+
if (field) {
172+
field.innerText = value
173+
}
174+
}
175+
function hide (id) {
176+
document.getElementById(id).classList.add('hidden')
177+
}
178+
function show (id) {
179+
document.getElementById(id).classList.remove('hidden')
180+
}
181+
182+
function sleep(ms) {
183+
return new Promise(resolve => setTimeout(resolve, ms));
184+
}
185+

0 commit comments

Comments
 (0)