31:T40a,homepagePlan = [ ...(!isValidIdentity ? [`Create a homepage`] : []), ...(providers.length == 0 ? [`Pick a method for authenticating`]: []), ...(!isIdentityURL ? [`Ensure homepage is served over https://`]: []), ...((wantsIndieauth || wantsPassword) && !hasAuthorizationEndpointOnHomepage ? [`Add \`\` to your homepage.`]: []), ...(wantsGithub && !hasGithubOnHomepage ? [`Add \`My Github profile\` to your homepage.`]: []), //...(wantsGithub && !hasHomepageOnGithub ? [`Set your homepage on \`${displayGithubProfile}\` to ${displayHomepage}`]: []), ...(wantsObservable && !hasObservableOnHomepage ? [`Add \`My Observable profile\` to your homepage.`]: []), ...(wantsObservable && !hasHomepageOnObservable ? [`Add \`${displayHomepage}\` to the website list on ${displayObservableProfile}`]: []) ]32:[{"id":"65499dc57229c6ddfbb51e0851e4ea63cc79181703254c691d5bed087573cc1cae5693160a05a1f66f20bd97798cf968061105c2c3c573aa3d8be48f82fdc5b7","href":"https://static.observableusercontent.com/files/65499dc57229c6ddfbb51e0851e4ea63cc79181703254c691d5bed087573cc1cae5693160a05a1f66f20bd97798cf968061105c2c3c573aa3d8be48f82fdc5b7","name":"done.gif","type":"image/gif","lastModified":1620669470271.498,"size":868213},{"id":"9f72c3bebf2f334526603bd03c758dee24a67466e1dbc9bf2da3f83c83f08b603c1567a34886ac308c88e2faba6fdaf292bf39dc35e384943070ddf9c627eb45","href":"https://static.observableusercontent.com/files/9f72c3bebf2f334526603bd03c758dee24a67466e1dbc9bf2da3f83c83f08b603c1567a34886ac308c88e2faba6fdaf292bf39dc35e384943070ddf9c627eb45","name":"IdentityWizard.png","type":"image/png","lastModified":1620892264336.553,"size":148473}] 2f:{"title":"IndieWeb Login Wizard","cells":[{"id":0,"value":"md`# IndieWeb Login Wizard\n\n![](${await FileAttachment(\"IdentityWizard.png\").url()})\n\nWith IndieWeb you can decide how a 3rd party website can identify you, simply by adding some metadata to your homepage.\n\nYour homepage URL becomes your Identity URL for weblogin forms, and your homepage describes your relation to other websites on the internet, including which 3rd party Oauth providers (like Github) are valid authenticators.\n\nEndpoint Services uses IndieWeb login to manage resources like file [storage](https://observablehq.com/@endpointservices/storage). If you don't have a homepage we can create an itentity using just Observable notebookes.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`### Authentication\n\nWhile you might use your homepage as a identifier, you can still use a familiar identity provider to perform the actual identity check.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof providers = Checkbox(new Map([\n ['Github', 'github'],\n ['password', 'password'],\n ['Google', 'google'],\n ['Twitter', 'twitter'],\n ['IndieAuth (bring your own)', 'indieauth']\n]), {\n label: \"I would like to login using \"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"{\n const messages = [];\n providers.forEach(provider => {\n const support = providerSupport[provider];\n if (support.error) messages.push(\"⚠️ \" + provider + \" \" + support.error);\n else messages.push(\"✅ \" + provider + \" is possible\");\n });\n if (providers.length == 0) return md`⚠️ You need to select at least one authentication method otherwise you can't login!`\n return html`${messages.join(\"

\")}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`### ${wantsGithub? md`Github identity delegation`: `~~Github~~`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"viewof githubProfile = Text({\n width: 500,\n label: \"My Github profile is\",\n disabled: !wantsGithub\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"!wantsGithub ? md`N/A` : !isValidGithub ? md`⚠️ Not a valid Github profile (is lower case?)` : md`✅ is a valid Github profile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"wantsPassword ? \n md`### Password\n\n\nYou can encypt a password and host on Observable for a quick solution. This is IndieAuth where we use a password challange hosted in an Observable notebook as the *authorization_endpoint*.\n\n\n`: md`### ~~Password~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"{\n if (!wantsPassword) return md`N/A`\n return viewof pass\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"md`Now paste the following block in a notebook and publish to create an *authorization_endpoint*.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"!isValidIdentity ? md`⚠️ Setup identity URL first in the section below` : pass ? Textarea({\n rows: 10,\n value: `authorization_endpoint = password_authorization_endpoint(${JSON.stringify({\n me: 'IDENTITY_URL',\n secret: encryptedSecret\n }, null, 2)});`,\n disabled: true\n}) : \"waiting for a password first...\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"md`You will need to import its dependancy too\n\n~~~js\n import {password_authorization_endpoint} from '@endpointservices/identity'\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"md`That code will generate a link. Double check it works by clicking it (expect a password webform). Copy the generated link to be used as the *href* in a *rel='authorization_endpoint'* link on your Identity webpage.\n\nFill in the *authorization_endpoint* URL form after you have generated in the IndieAuth section next.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"md`### ${(wantsIndieauth || wantsPassword) ? md`Indie Auth (Bring your own)`: `~~IndieAuth~~`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"viewof authorization_endpoint = Text({\n width: 500,\n label: \"My authorization endpoint URL is\",\n disabled: !(wantsIndieauth || wantsPassword)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"!(wantsIndieauth || wantsPassword) ? md`N/A` : !isValidAuthorizationEndpoint ? md`⚠️ Not a valid authorization_endpoint URL` : md`✅ is a valid *authorization_endpoint*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`\n### Observable profile\nIf you would like to use your login to manage resources, then it needs to be linked to your Observable profile(s). It looks like:-\n\n~~~\n https://observablehq.com/@\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"viewof wantsObservable = Toggle({\n value: true,\n label: \"I would like to manage resources associated with my Observable profile\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof observableProfile = Text({\n width: 500,\n label: \"My observable profile is\",\n disabled: !wantsObservable\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"!wantsObservable ? md`N/A` : !isValidObservable ? md`⚠️ Not a valid Observablehq profile` : md`✅ is a valid Observablehq profile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`\n### Identity URL\nIndieWeb login works best if you use a personal homepage. If you don't have one that's ok too.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"md`Your Identity URL is ${identityURL}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"!isValidIdentity ? md`⚠️ No identity URL selected` : md`✅ valid Identity URL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof homepage = Text({\n width: 500,\n label: \"I have a personal homepage at:\"\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"viewof useObservableProfileAsIdentity = Toggle({\n label: \"I want something quick! I will use my observable profile as my Identity URL\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"!hasHomepage ? md`N/A` : !isIdentityHttps ? md`⚠️ Homepage URL must support https` : md`✅ *https://*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"!hasHomepage ? md`N/A` : !isIdentityURL ? md`⚠️ Homepage URL must be a URL` : md`✅ homepage is a URL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"!hasHomepage ? md`N/A` : !isIdentityNormalized ? md`⚠️ Homepage URL must be normalized` : md`✅ homepage is normalized`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`## Required Steps to get a working IdentityURL using Relmeauth/Indieauth\n\nIdeally you would use a homepage on a domain you own. This is the first option. However, there is a quicker way by using your Observable profile URL as your idenity URL which is the 2nd option.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`### Using a homepage to login\n\n${homepagePlan.map(step => \" 1. \" + step).join(\"\\n\")}\n\n${homepagePlan.length == 0 ? `You are done, congrats!\n\n![](${await FileAttachment(\"done.gif\").url()})`: ''}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"md`### Using a Observablehq profile to login\n\n${observablePlan.map(step => \" 1. \" + step).join(\"\\n\")}\n\n${observablePlan.length == 0 ? `You are done, congrats!\n\n![](${await FileAttachment(\"done.gif\").url()})`: ''}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"md`## Test it works`","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"weblogin","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"observablePlan = [\n ...(providers.length == 0 ? [`Pick a method for authenticating`]: []),\n \n ...((wantsIndieauth || wantsPassword) && !isValidAuthorizationEndpoint ? [`Key in a valid *authorization_endpoint*`]: []),\n \n ...((wantsIndieauth || wantsPassword) && !hasAuthorizationEndpointOnHomepage ? [`Add ${displayAuthorizationEndpoint} to your list of webpages on ${observableProfile}.`]: []),\n \n \n ...(wantsGithub && !hasGithubOnHomepage ? [`Add ${displayGithubProfile} to your list of webpages on ${observableProfile}.`]: []),\n //...(wantsGithub && !hasHomepageOnGithub ? [`Set your homepage on \\`${displayGithubProfile}\\` to ${identityURL}`]: []),\n \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md`##### Github`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"wantsGithub = providers.includes('github')","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"displayGithubProfile = githubProfile || \"GITHUB_PROFILE_URL\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"isValidGithub = wantsGithub && /^https:\\/\\/github.com\\/([a-z]*)$/.exec(githubProfile) !== null","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"githubProfileLinks = isValidGithub ? rel_links(githubProfile) : []","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"hasGithubOnHomepage = homepageLinks.map(p => p.href).includes(githubProfile)","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"hasHomepageOnGithub = githubProfileLinks.map(p => p.href).includes(homepage)","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"md`##### Indieauth`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"wantsIndieauth = providers.includes('indieauth')","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"displayAuthorizationEndpoint = (isValidAuthorizationEndpoint && authorization_endpoint) || \"AUTHORIZATION_ENDPOINT_URL\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"isValidAuthorizationEndpoint = {\n if (!(wantsIndieauth || wantsPassword)) return false;\n try {\n new URL(authorization_endpoint);\n return true;\n } catch (err) {\n return false;\n }\n\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"hasAuthorizationEndpointOnHomepage = homepageLinks.filter(p => p.rel === 'authorization_endpoint').map(p => p.href).includes(authorization_endpoint)","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`##### Password`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"wantsPassword = providers.includes('password')","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"import {viewof pass, encryptedSecret} from '@endpointservices/notebook-secret'","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`##### Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"hasObservable = observableProfile.length > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"displayObservableProfile = (isValidObservable && observableProfile) || \"OBSERVABLE_PROFILE_URL\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"isValidObservable = hasObservable && /^https:\\/\\/observablehq.com\\/@([^/]*)$/.exec(observableProfile) !== null","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"observableProfileLinks = isValidObservable ? rel_links(observableProfile) : []","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"hasObservableOnHomepage = homepageLinks.map(p => p.href).includes(observableProfile)","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"hasHomepageOnObservable = observableProfileLinks.map(p => p.href).includes(homepage)","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"md`##### Homepage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"hasHomepage = homepage.length > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"displayHomepage = homepage || `HOMEPAGE_URL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"homepageLinks = isValidIdentity ? rel_links(identityURL) : []","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"identityURL = useObservableProfileAsIdentity ? observableProfile : homepage || 'IDENTITY_URL'","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"isIdentityHttps = identityURL.startsWith(\"https://\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"isIdentityURL = {\n try {\n new URL(identityURL)\n return true\n } catch (e) {\n return false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"isIdentityNormalized = isIdentityURL ? new URL(identityURL).toString() === identityURL : false","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"isValidIdentity = isIdentityNormalized && isIdentityHttps","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"md`## Config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"providerSupport = ({\n \"github\": { \n \n }, \n \"facebook\": { \n error: \"not supported\"\n }, \n \"google\": { \n error: \"not supported\" \n }, \n \"twitter\": { \n error: \"not supported\"\n },\n \"email\": { \n error: \"possible but not implemented yet\"\n }, \n \"password\": { \n \n },\n \"indieauth\": { \n \n }, \n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {Text, Textarea, Checkbox, Toggle} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"import {rel_links} from '@endpointservices/auth'","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"import {password_authorization_endpoint, weblogin} from '@endpointservices/identity'","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}