ident

18.3 KB

1. // testapp/project.hl — THE SMALLEST APP THAT USES "login with ident" (ident piece 2,
2. // ticket #25). It proves the login button flow end to end (ident README "How apps use ident"):
3. // 1. register this app in ident (/apps): name + the origin this app runs on
4. // (TESTAPP_URL). Paste the API key and the secret into this app's setup form.
5. // 2. `/` links the browser to <ident>/login?key=<api key>&return=<this app>/callback
6. // 3. ident signs the browser in, the user chooses an identity, ident redirects to
7. // /callback?ident_code=<one-time code>
8. // 4. /callback (server side, hl:fetch) POSTs { key, secret, code } to
9. // <ident>/api/exchange and gets the app-specific identity id — nothing else.
10. // This app keeps its OWN users keyed by that id (CONCEPT.md "In the app").
11. // Piece 3 (#26): THE IDENTITY SELECTOR on the same page. `/` includes <ident>/selector.js
12. // and <ident-selector key="<api key>">; choosing an identity fires `ident-login` with a
13. // one-time code, the page POSTs it to /selector-login, this server exchanges it exactly as
14. // /callback does, and the page switches to "logged in" WITHOUT A RELOAD and sets the
15. // selector's `logged-in`. "Log out" (POST /logout) resets the selector.
16. // Both logins give the browser this app's OWN session cookie (`testapp<port>sid`, cookies
17. // ignore ports); `/` renders `logged-in` on the selector when that session is logged in —
18. // the host tells the selector, the selector keeps no state of its own.
19. // A REAL APP NEVER SHOWS THE IDENTITY ID (CONCEPT.md); this test page does, to prove the flow.
20. //
21. // Run: cd testapp && ../bin/hybriel project.hl
22. // TESTAPP_PORT (8354), TESTAPP_URL (origin the browser reaches this app at,
23. // default http://127.0.0.1:<port>), IDENT_URL (http://127.0.0.1:8351),
24. // TESTAPP_STORE (./storage/testapp.json: key, secret, users, sessions).
25. import WebFramework from 'hl:web'
26. import { Response } from 'hl:http1'
27. import { fetch } from 'hl:fetch'
28. import { env } from 'hl:proc'
29. import { readFile, writeFile, exists } from 'hl:fs'
30. import { randomBytes } from 'hl:crypto'
31. import Styles from './styles.hl'
32. import About from './components/about.hl'
34. appTitle = "ident test app"
35. styles = Styles
37. port = env('TESTAPP_PORT') != null ? toNumber(env('TESTAPP_PORT')) : 8354
38. selfUrl = env('TESTAPP_URL') != null ? env('TESTAPP_URL') : 'http://127.0.0.1:' + port
39. identUrl = env('IDENT_URL') != null ? env('IDENT_URL') : 'http://127.0.0.1:8351'
40. storeFile = env('TESTAPP_STORE') != null ? env('TESTAPP_STORE') : './storage/testapp.json'
42. load = () => {
43. if (!exists(storeFile)) { return { key = '' secret = '' users = {} count = 0 sessions = {} } }
44. let d = JSON.parse(readFile(storeFile))
45. if (d.sessions == null) { d.sessions = {} } // a piece-2 store
46. return d
47. }
49. // THIS APP'S OWN SESSION: cookie -> identity id (server side only)
50. cookieName = 'testapp' + port + 'sid'
51. sidOf = (req) => {
52. let h = req.headers['cookie']
53. if (h == null) { return null }
54. for (part of h.split(';')) {
55. let t = part.trim()
56. if (t.startsWith(cookieName + '=')) { return t.slice(cookieName.length + 1, t.length) }
57. }
58. return null
59. }
60. userOf = (data, req) => {
61. let sid = sidOf(req)
62. if (sid == null || sid == '') { return null }
63. let identity = data.sessions[sid]
64. if (identity == null) { return null }
65. return data.users[identity]
66. }
67. // the app's user for an exchanged identity id (made on its first login) + a new session
68. logIn = (data, identity) => {
69. let known = data.users[identity]
70. let state = 'welcome back'
71. if (known == null) {
72. data.count = data.count + 1
73. known = { n = data.count }
74. data.users[identity] = known
75. state = 'new user'
76. }
77. let sid = randomBytes(16)
78. data.sessions[sid] = identity
79. save(data)
80. return { state = state n = known.n cookie = cookieName + '=' + sid + '; Path=/; HttpOnly; SameSite=Lax' }
81. }
82. // POST <ident>/api/exchange { key, secret, code } -> { status, j }
83. exchangeCode = (data, code) => {
84. let r = fetch(identUrl + '/api/exchange', { method = 'POST' json = { key = data.key secret = data.secret code = code } timeoutMs = 5000 })
85. let j = r.json()
86. return { status = r.status j = j text = j == null ? r.text() : '' }
87. }
88. save = (data) => { writeFile(storeFile, JSON.stringify(data)) }
90. escape = (s) => { return ('' + s).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;') }
91. // a query value, percent-encoded (encodeURIComponent is a global, hybriel#14)
92. encode = (s) => { return encodeURIComponent('' + s) }
94. page = (status, body) => {
95. let html = '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>ident test app</title><style>body{margin:0;padding:1rem;font:16px/1.5 system-ui,sans-serif;color:rgb(195, 200, 205);background:rgb(25, 30, 35)}main{max-width:34rem;margin:0 auto;display:grid;gap:1rem}a{color:#ce9178}h1{margin:0;font-size:1.3rem;color:rgb(245, 250, 255)}p{margin:0}code{overflow-wrap:anywhere;word-break:break-all;color:rgb(245, 250, 255)}form{display:grid;gap:.6rem;padding:1rem;border:1px solid rgb(70, 75, 80);border-radius:.5rem}label{display:grid;gap:.2rem;font-size:.9rem}input{font:inherit;padding:.5rem;color:rgb(245, 250, 255);background:rgb(15, 20, 25);border:1px solid rgb(70, 75, 80);border-radius:.4rem;width:100%;box-sizing:border-box}button,a.button{justify-self:start;display:inline-block;font:inherit;font-weight:600;padding:.6rem 1.1rem;color:rgb(15, 20, 25);background:#ce9178;border:1px solid #ce9178;border-radius:.4rem;cursor:pointer;text-decoration:none}.error{color:#f44747}.ok{color:#4ec9b0}.muted{color:rgb(145, 150, 155);font-size:.9rem}h2{margin:0;font-size:1.05rem;color:rgb(245, 250, 255)}section{display:grid;gap:.6rem;padding:1rem;border:1px solid rgb(70, 75, 80);border-radius:.5rem}button.quiet{color:rgb(195, 200, 205);background:transparent;border-color:rgb(70, 75, 80)}[hidden]{display:none!important}</style></head><body><main><h1>ident test app <span class="muted">' + escape(selfUrl) + '</span></h1>' + body + '<p><a id="home" href="/">start page</a></p></main></body></html>'
96. return new Response(html, { status = status headers = { 'Content-Type' = 'text/html; charset=utf-8' 'Cache-Control' = 'no-store' } })
97. }
98. redirect = (url) => { return new Response('', { status = 302 headers = { 'Location' = url 'Cache-Control' = 'no-store' } }) }
100. setupForm = (data) => {
101. return '<form id="setup" method="post" action="/setup"><p class="muted">Register this app in ident (Apps → Register an app, origin <code>' + escape(selfUrl) + '</code>) and paste its API key and secret here.</p><label>API key<input id="key" name="key" autocomplete="off" value="' + escape(data.key) + '"></label><label>Secret<input id="secret" name="secret" autocomplete="new-password" type="password"></label><button id="savesetup" type="submit">Save</button></form>'
102. }
104. // THE HOST PAGE'S SCRIPT: the selector's code -> this server (/selector-login) -> logged
105. // in without a reload; logout resets the selector. (An hl string has no escapes: the
106. // JavaScript below uses double quotes only.)
107. hostScript = '<script>(() => {' +
108. 'const sel = document.getElementById("selector");' +
109. 'const state = document.getElementById("loginstate");' +
110. 'const out = document.getElementById("selresult");' +
111. 'const logout = document.getElementById("logout");' +
112. 'sel.addEventListener("ident-login", async (e) => {' +
113. 'out.className = "muted"; out.textContent = "exchanging the code …";' +
114. 'const r = await fetch("/selector-login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code: e.detail.code }) });' +
115. 'const j = await r.json().catch(() => ({}));' +
116. 'if (!r.ok) { out.className = "error"; out.textContent = "exchange failed (" + r.status + "): " + (j.error || ""); return; }' +
117. 'state.className = "ok"; state.textContent = "Logged in: this app’s user #" + j.n + " (" + j.state + ")";' +
118. 'out.className = "muted"; out.innerHTML = "";' +
119. 'out.append("via the selector, without a reload: ", Object.assign(document.createElement("strong"), { id: "userstate", textContent: j.state }), ", identity id ", Object.assign(document.createElement("code"), { id: "identity", textContent: j.identity }));' +
120. 'logout.hidden = false;' +
121. 'sel.loggedIn = true;' +
122. '});' +
123. 'logout.addEventListener("click", async () => {' +
124. 'await fetch("/logout", { method: "POST" });' +
125. 'state.className = ""; state.textContent = "Not logged in.";' +
126. 'out.textContent = ""; logout.hidden = true;' +
127. 'sel.reset();' +
128. '});' +
129. '})();</script>'
131. home = (route, req) => {
132. let data = load()
133. if (data.key == '') { return page(200, '<p id="state">Not set up yet.</p>' + setupForm(data)) }
134. let href = identUrl + '/login?key=' + data.key + '&return=' + encode(selfUrl + '/callback')
135. let user = userOf(data, req)
136. let account = user != null ? '<p id="loginstate" class="ok">Logged in: this app’s user #' + user.n + '</p>' : '<p id="loginstate">Not logged in.</p>'
137. let logoutButton = '<button id="logout" type="button" class="quiet"' + (user != null ? '' : ' hidden') + '>Log out</button>'
138. let selector = '<ident-selector id="selector" key="' + escape(data.key) + '"' + (user != null ? ' logged-in' : '') + '></ident-selector>'
139. return page(200, '<p id="state">Set up with API key <code id="setupkey">' + escape(data.key) + '</code>. Users so far: <span id="usercount">' + data.count + '</span>.</p>' +
140. '<section id="account">' + account + logoutButton + '</section>' +
141. '<section id="selectorbox"><h2>Log in with the identity selector</h2>' + selector + '<p id="selresult"></p></section>' +
142. '<p><a id="toinvites" href="/invites">Invites</a></p><section id="buttonbox"><h2>… or with the login button</h2><p><a id="login" class="button" href="' + escape(href) + '">Log in with ident</a></p></section>' +
143. setupForm(data) +
144. '<script src="' + escape(identUrl) + '/selector.js"></script>' + hostScript)
145. }
147. // the key and the secret: plain ASCII (pk_/sk_ + hex), so the form body needs no decoding
148. okToken = (v, prefix, n) => {
149. if (v == null || v.length != prefix.length + n || v.slice(0, prefix.length) != prefix) { return false }
150. let i = prefix.length
151. while (i < v.length) {
152. if (!'0123456789abcdef'.includes(v[i])) { return false }
153. i = i + 1
154. }
155. return true
156. }
157. setup = (route, req) => {
158. if (req.method != 'POST') { return redirect('/') }
159. let f = {}
160. for (pair of ('' + req.body).split('&')) {
161. let eq = pair.indexOf('=')
162. if (eq > 0) { f[pair.slice(0, eq)] = pair.slice(eq + 1, pair.length).trim() }
163. }
164. if (!okToken(f.key, 'pk_', 32) || !okToken(f.secret, 'sk_', 48)) { return page(400, '<p id="result" class="error">That is not an ident API key (pk_…) and secret (sk_…).</p>') }
165. let data = load()
166. data.key = f.key
167. data.secret = f.secret
168. save(data)
169. return redirect('/')
170. }
172. callback = (route, req) => {
173. let q = req.query != null ? req.query : {}
174. let code = q.ident_code
175. if (code == null || code == '') { return page(400, '<p id="result" class="error">no ident_code on the callback</p>') }
176. let data = load()
177. let x = exchangeCode(data, code)
178. let j = x.j
179. if (x.status != 200 || j == null || j.identity == null) {
180. return page(400, '<p id="result" class="error">exchange failed (<span id="status">' + x.status + '</span>): <span id="error">' + escape(j != null ? j.error : x.text) + '</span></p>')
181. }
182. // THIS APP'S OWN USER, connected to the identity id (server side)
183. let u = logIn(data, j.identity)
184. // an invite came along: ask ident which identity accepted it (it must be the one just exchanged)
185. let inv = ''
186. if (q.invite != null && q.invite != '') {
187. let g = identPost('/api/invites/get', data, { id = q.invite })
188. if (g.status == 200) {
189. inv = '<p id="invite">Invite <strong id="invitestate">' + escape(g.j.invite.state) + '</strong> for <span id="inviteproject">' + escape(g.j.invite.project) + '</span> as <span id="inviterole">' + escape(g.j.invite.role) + '</span>; accepted by <span id="invitewho">' + (g.j.invite.identities.includes(j.identity) ? 'this identity' : 'someone else') + '</span>.</p>'
190. } else { inv = '<p id="invite" class="error">invite lookup failed (' + g.status + ')</p>' }
191. }
192. let res = page(200, inv + '<p id="result" class="ok">Logged in: <strong id="userstate">' + u.state + '</strong>, this app’s user #<span id="usernumber">' + u.n + '</span>.</p><p class="muted">ident answered only <code id="answer">' + escape(JSON.stringify(j)) + '</code> — the identity id for THIS app (a real app never shows it).</p><p>identity id: <code id="identity">' + escape(j.identity) + '</code></p>')
193. res.headers['Set-Cookie'] = u.cookie
194. return res
195. }
197. json = (status, value) => { return new Response(JSON.stringify(value), { status = status headers = { 'Content-Type' = 'application/json; charset=utf-8' 'Cache-Control' = 'no-store' } }) }
199. // POST /selector-login {"code":"<hex>"} — the selector's one-time code, from this app's own
200. // page: exchanged server side like /callback; answers { state, n, identity } + the cookie
201. selectorLogin = (route, req) => {
202. if (req.method != 'POST') { return json(405, { error = 'POST only' }) }
203. let b = ('' + req.body).trim()
204. let pre = '{"code":"'
205. if (!b.startsWith(pre) || !b.endsWith('"}')) { return json(400, { error = 'the body must be {"code":"…"}' }) }
206. let code = b.slice(pre.length, b.length - 2)
207. if (!okToken(code, '', code.length) || code == '') { return json(400, { error = 'the code must be hex' }) }
208. let data = load()
209. let x = exchangeCode(data, code)
210. let j = x.j
211. if (x.status != 200 || j == null || j.identity == null) { return json(400, { error = 'exchange failed (' + x.status + '): ' + (j != null ? j.error : x.text) }) }
212. let u = logIn(data, j.identity)
213. let res = json(200, { state = u.state n = u.n identity = j.identity })
214. res.headers['Set-Cookie'] = u.cookie
215. return res
216. }
218. // POST /logout — ends this app's session (ident's own session is untouched)
219. logout = (route, req) => {
220. if (req.method != 'POST') { return json(405, { error = 'POST only' }) }
221. let data = load()
222. let sid = sidOf(req)
223. if (sid != null && data.sessions[sid] != null) {
224. let rest = {}
225. for (k of data.sessions.keys()) { if (k != sid) { rest[k] = data.sessions[k] } }
226. data.sessions = rest
227. save(data)
228. }
229. let res = json(200, { loggedOut = true })
230. res.headers['Set-Cookie'] = cookieName + '=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0'
231. return res
232. }
234. // ---- INVITES (ident#22): this app invites people through ident ---------------------------
235. // GET /invites lists this app's invites (ident: POST /api/invites/list) and has a form that
236. // creates one (POST /api/invites; with an address ident mails the link, through its own
237. // mailer). "Share" is a mailto: link (no script). The link's person lands on /callback with
238. // `ident_code` AND `invite`; /callback then asks ident which identity accepted the invite.
239. identPost = (path, data, payload) => {
240. let body = { key = data.key secret = data.secret }
241. for (k of payload.keys()) { body[k] = payload[k] }
242. let r = fetch(identUrl + path, { method = 'POST' json = body timeoutMs = 5000 })
243. let j = r.json()
244. return { status = r.status j = j text = j == null ? r.text() : '' }
245. }
246. formOf = (req) => {
247. let f = {}
248. for (pair of ('' + req.body).split('&')) {
249. let eq = pair.indexOf('=')
250. if (eq > 0) { f[pair.slice(0, eq)] = pair.slice(eq + 1, pair.length).trim().replaceAll('%40', '@').replaceAll('%2B', '+') }
251. }
252. return f
253. }
254. invitesPage = (data, top) => {
255. let x = identPost('/api/invites/list', data, {})
256. let rows = ''
257. if (x.status == 200) {
258. for (v of x.j.invites) {
259. rows = rows + '<li class="invite"><strong>' + escape(v.project) + '</strong> as ' + escape(v.role) + ' — <span class="state">' + escape(v.state) + '</span>, used ' + v.used + ' of ' + v.uses + (v.identities.length > 0 ? ', identity <code class="who">' + escape(v.identities.join(' ')) + '</code>' : '') + (v.state == 'open' ? '<form method="post" action="/invites/revoke"><input type="hidden" name="id" value="' + escape(v.id) + '"><button class="revoke quiet" type="submit">Revoke</button></form>' : '') + '</li>'
260. }
261. } else { rows = '<li class="error">list failed (' + x.status + '): ' + escape(x.j != null ? x.j.error : x.text) + '</li>' }
262. return page(200, top + '<section><h2>Invite someone</h2><form id="inviteform" method="post" action="/invites/create"><label>Project<input id="iproject" name="project" value="demo"></label><label>Role<input id="irole" name="role" value="member"></label><label>Email (optional — ident mails the link)<input id="iemail" name="email" type="email"></label><label>Uses<input id="iuses" name="uses" value="1"></label><label>Days<input id="idays" name="days" value="7"></label><button id="create" type="submit">Create invite</button></form></section><section><h2>Invites</h2><ul id="invites">' + rows + '</ul></section>')
263. }
264. invites = (route, req) => {
265. let data = load()
266. if (data.key == '') { return redirect('/') }
267. return invitesPage(data, '')
268. }
269. invitesCreate = (route, req) => {
270. if (req.method != 'POST') { return redirect('/invites') }
271. let data = load()
272. let f = formOf(req)
273. let payload = { project = f.project role = f.role 'return' = selfUrl + '/callback' }
274. if (f.email != null && f.email != '') { payload.email = f.email }
275. if (f.uses != null && f.uses != '') { payload.uses = toNumber(f.uses) }
276. if (f.days != null && f.days != '') { payload.days = toNumber(f.days) }
277. let x = identPost('/api/invites', data, payload)
278. if (x.status != 200) { return invitesPage(data, '<p id="result" class="error">create failed (' + x.status + '): ' + escape(x.j != null ? x.j.error : x.text) + '</p>') }
279. let share = 'mailto:?subject=' + encode('Invitation to ' + x.j.project) + '&body=' + encode(x.j.url)
280. return invitesPage(data, '<section id="created"><p class="ok">Invite made' + (x.j.mailed ? ' and mailed by ident' : '') + '.</p><input id="link" readonly value="' + escape(x.j.url) + '"><p><a id="share" class="button" href="' + escape(share) + '">Share by mail</a></p></section>')
281. }
282. invitesRevoke = (route, req) => {
283. if (req.method != 'POST') { return redirect('/invites') }
284. let data = load()
285. let f = formOf(req)
286. identPost('/api/invites/revoke', data, { id = f.id })
287. return redirect('/invites')
288. }
290. routes = [
291. { pattern = "/favicon.ico" direct = "" }
292. { pattern = "/invites" function = invites }
293. { pattern = "/invites/create" function = invitesCreate }
294. { pattern = "/invites/revoke" function = invitesRevoke }
295. { pattern = "/setup" function = setup }
296. { pattern = "/callback" function = callback }
297. { pattern = "/selector-login" function = selectorLogin }
298. { pattern = "/logout" function = logout }
299. { pattern = "/about" component = About }
300. { pattern = "/" function = home }
301. ]
303. sessionDir = false
304. server = new WebFramework(routes = routes, styles = styles, port = port)