A Pen by Homer Simpson on CodePen.
Created
March 10, 2023 04:38
-
-
Save HomerJSimpson/9723c7ad8dfc03e17b4beac130825ab4 to your computer and use it in GitHub Desktop.
Look Ma no idp
This file contains 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
| <html> | |
| <body class="flex-container"> | |
| <script src="https://accounts.google.com/gsi/client" async defer></script> | |
| <div id="buttonDiv" class="flex-item"></div> | |
| <pre id="stuff" class="flex-item"></pre> | |
| </body> | |
| </html> |
This file contains 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
| import * as jwt_decode from "https://cdn.skypack.dev/[email protected]"; | |
| function handleCredentialResponse(response) { | |
| console.log("Encoded JWT ID token: " + response.credential); | |
| const $stuff = document.getElementById("stuff"); | |
| const jwt = jwt_decode.default(response.credential); | |
| document.getElementById("buttonDiv").style.visibility = "hidden"; | |
| $stuff.innerText = JSON.stringify(jwt, null, "\t"); | |
| $stuff.innerText += `\n${new Date(jwt.exp * 1000)}`; | |
| } | |
| window.onload = function () { | |
| google.accounts.id.initialize({ | |
| client_id: | |
| "Webapp CLient ID", | |
| callback: handleCredentialResponse | |
| }); | |
| google.accounts.id.renderButton( | |
| document.getElementById("buttonDiv"), | |
| { theme: "outline", size: "large" } // customization attributes | |
| ); | |
| google.accounts.id.prompt(); // also display the One Tap dialog | |
| }; |
This file contains 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
| .flex-container { | |
| display: flex; | |
| flex-direction: column; | |
| flex-wrap: nowrap; | |
| justify-content: flex-start; | |
| align-content: stretch; | |
| align-items: flex-start; | |
| } | |
| .flex-item:nth-child(2) { | |
| order: 0; | |
| flex: 0 1 auto; | |
| align-self: flex-end; | |
| } | |
| .flex-item:nth-child(3) { | |
| order: 0; | |
| flex: 0 1 auto; | |
| align-self: auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment