2b:["$","title",null,{"children":"User signin with IndieWeb weblogin | Endpoint Services | Observable"}] 31:[{"id":"ca8a76de87199997679a9cf7731f7a13c101f90dc661ba5bb1a39cedb6a817ea74c588fe3dc1a46a78f147f99ef2e0c5678e050a4f26ac4d81e95a8c9dce93e9","href":"https://static.observableusercontent.com/files/ca8a76de87199997679a9cf7731f7a13c101f90dc661ba5bb1a39cedb6a817ea74c588fe3dc1a46a78f147f99ef2e0c5678e050a4f26ac4d81e95a8c9dce93e9","name":"Weblogin.png","type":"image/png","lastModified":1618909873539.943,"size":125566}] 2e:{"id":"102b8cfbbe9a58b7","slug":"weblogin","title":"User signin with IndieWeb weblogin","thumbnail":"1434b1c71603f983c91b56da89a666b108315a4cf5789da0c41b277bfbfd3b5d","access_level":"unlisted","create_time":"$D2021-04-06T12:46:02.719Z","update_time":"$D2022-02-04T21:25:56.445Z","view_time":null,"first_public_time":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8d94490bed468d92","login":"endpointservices","name":"Endpoint Services","avatar_url":"https://avatars-next.observableusercontent.com/aa238f4bd0be02bb2364438ff6bfe17b74a7a58f5c04aa1a84d29dddc79bc15e","tier":"starter_2024"},"version":377,"publish_version":377,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"55fdeaf6306fb270","slug":"indieauth/2","title":"IndieWeb","owner":{"id":"8d94490bed468d92","login":"endpointservices","name":"Endpoint Services"}},"type":"notebook","body":{"title":"User signin with IndieWeb weblogin","cells":[{"id":339,"value":"bannerImage(await FileAttachment(\"Weblogin.png\").url(), \"User signin with IndieWeb weblogin\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# How to create a user respecting signin with [IndieWeb](https://indieweb.org/why) technologies\n\nAllow users to signin with a URL (even one hosted on from an [observablehq.com](observablehq.com) notebook\n) and obtain an access token. \n\nThis notebook is a living demo for three different user focussed authorization servers (including one hosted on [Observable](https://observablehq.com/@endpointservices/auth)). \n\nReference documentation on setting up an indieauth login can be found on [indielogin.com](https://indielogin.com/api).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`### Select authorization server provider`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof provider = {\n const initial = localStorage.getItem(\"provider\");\n return htl.html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"notes = ({\n \"indieauth.com\": md`---\n#### Note about ${provider}\n\n [Indieauth.com](https://indieauth.com/) is to be deprecated, but it will mint tokens for public clients.\n\n---\n`,\n \"indielogin.com\": md`---\n#### Note about ${provider}\n\n [indielogin.com](https://indielogin.com/) should be self-hosted. The public service requires a client to be registered.\n\n---\n`,\n \"@endpointservices\": md`---\n#### Note about ${provider}\n\n[@endpointservices/auth](https://endpointservice.web.app/notebooks/@endpointservices/auth) will mint tokens for Observable notebooks, and is designed to be easily forked and self-hosted if you wish to add additional public clients. Tokens are compatible with Firebase [custom tokens](https://firebase.google.com/docs/auth/admin/create-custom-tokens) and login URL works with 3rd party profile links directly.\n\n---\n`\n}[provider])","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`## Additional [Scope](https://indieweb.org/scope)\n\nThe scope parameter is a space delimineted list of additional access _scopes_. They represent requests by the service to be granted access to additional privilidged access elsewhere. The Authorization server will highlight these to the user and ask for their consent.\n\nFor simple services that do not need access to 3rd party privilidged resources they are not needed.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"viewof SCOPE = htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`#### Config for ${provider}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"AUTHORIZE_URL = ({\n \"indieauth.com\": \"https://indieauth.com/auth\",\n \"indielogin.com\": \"https://indielogin.com/auth\",\n \"@endpointservices\": \"https://webcode.run/observablehq.com/@endpointservices/auth;authorization_endpoint\"\n}[provider])","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"TOKEN_URL = ({\n \"indieauth.com\": \"https://tokens.indieauth.com/token\",\n \"indielogin.com\": \"https://indielogin.com/token\",\n \"@endpointservices\": \"https://webcode.run/observablehq.com/@endpointservices/auth;token_endpoint\"\n}[provider])","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"CORS_BYPASS = ({\n \"indieauth.com\": true,\n \"indielogin.com\": true,\n \"@endpointservices\": false\n}[provider])","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`## Example 1: Signin with a prompt for the user's homepage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"htl.html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`## Example 2: Signin and and let auth server prompt for their homepage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"htl.html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`### Signin state for ${provider}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"state","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"token = state.access_token","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"decoded_token = JSON.stringify(JSON.parse(atob(token.split('.')[1])), null, 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`### Verify tokens\n\nSee https://indieweb.org/token-endpoint#Verifying_an_Access_Token\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"verified_token = {\n const fetchfn = CORS_BYPASS ? fetchp : fetch;\n return (await fetchfn(TOKEN_URL, {\n headers: {\n Authorization: `Bearer ${token}`\n }\n })).json();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`## Commmon Oauth 2.0 machinery\n\nSignin is normal Oauth 2.0 so something needs to check state parameter after redirect and exchange a code for a token`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"authorize_link","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"import { authorize_link, state } with {\n CLIENT_ID,\n CLIENT_ID as REDIRECT_URI,\n AUTHORIZE_URL,\n TOKEN_URL,\n TOKEN_PARAMS,\n CORS_BYPASS\n} from '@tomlarkworthy/oauth'","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"CLIENT_ID = \"https://observablehq.com/@tomlarkworthy/howto-indieauth\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"TOKEN_PARAMS = args => ({\n client_id: args.CLIENT_ID,\n redirect_uri: args.REDIRECT_URI,\n code: args.code,\n state: args.state\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"{\n localStorage.setItem(\"provider\", provider);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"import { localStorage } from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"import { fetchp } from '@tomlarkworthy/fetchp'","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"import {bannerImage} from '@observablehq/banner@463'","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body" 2a:E{"digest":"NEXT_REDIRECT;replace;/@endpointservices/weblogin;307;"}