Created
October 3, 2022 17:09
-
-
Save nfreear/d168dfccc1006384c420c88b05ad9293 to your computer and use it in GitHub Desktop.
Partial implementation of "IndieAuth" | https://indielogin.com/api
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> <title> My-login test </title> | |
| <style> | |
| body { font: 1.1rem/1.6 sans-serif; margin: auto; max-width: 32rem; } | |
| button, input { font: inherit; padding: .3rem; } | |
| button { display: block; X-padding: .3rem 1rem; width: 7rem; margin: 0 auto; } | |
| input { min-width: 14rem; } | |
| hr { border-top: 3px blue solid; margin: 1rem; } | |
| my-login { border: 1px solid #bbb; display: block; padding: 1rem; } | |
| </style> | |
| <h1> My-login test </h1> | |
| <my-login> | |
| <form action="https://indielogin.com/auth" method="get"> | |
| <label for="url">Web Address:</label> | |
| <input id="url" type="url" name="me" placeholder="yourdomain.com" data-X-pattern="https?://.+\..+" required /> | |
| <p><button type="submit">Sign In</button></p> | |
| <input type="hidden" name="client_id" value="https://example.com/" /> | |
| <input type="hidden" name="redirect_uri" value="https://example.com/redirect" /> | |
| <input type="hidden" name="state" value="jwiusuerujs" /> | |
| </form> | |
| </my-login> | |
| <script type="module"> | |
| const { fetch, location, sessionStorage } = window; | |
| const KEY_STATE = 'my-login.state'; | |
| const KEY_SUBMIT = 'my-login.submit'; | |
| // const KEY_AUTH = 'my-login.auth'; | |
| // const KEY_LOGOUT = 'my-login.logout'; | |
| initializeLoginForm(); | |
| // initializeLogoutForm(); | |
| // processAuthRedirect(); | |
| function initializeLoginForm () { | |
| const MY_LOGIN = document.querySelector('my-login'); | |
| const FORM = MY_LOGIN.querySelector('form'); | |
| const ELEMS = FORM.elements; | |
| const client_id = location.origin + '/'; | |
| const redirect_uri = location.origin + location.pathname; | |
| const DATA = { | |
| time: new Date().toISOString(), | |
| client_id, | |
| redirect_uri, | |
| action: FORM.action, | |
| state: crypto.randomUUID(), // += parseInt(Math.random() * 1000000); | |
| } | |
| ELEMS.client_id.value = DATA.client_id; | |
| ELEMS.redirect_uri.value = DATA.redirect_uri; | |
| ELEMS.state.value = DATA.state; | |
| ELEMS.me.addEventListener('blur', ev => { | |
| const ELEM = ev.target; | |
| const VALUE = ev.target.value; | |
| if (VALUE && !VALUE.match(/^https?:/) && VALUE.match(/.+\..+/)) { | |
| ELEM.value = `https://${VALUE}`; | |
| } | |
| console.debug('my-login - Blur:', ELEM.value, ev); | |
| }); | |
| FORM.addEventListener('submit', ev => { | |
| sessionStorage.setItem(KEY_STATE, DATA.state); | |
| sessionStorage.setItem(KEY_SUBMIT, JSON.stringify(DATA)); | |
| console.debug('my-login - Submit:', DATA, ev, ev.target, ELEMS); | |
| }); | |
| } | |
| </script> | |
| <pre> | |
| NDF, 03-Oct-2022. | |
| * https://indielogin.com/api | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment