Last active
February 5, 2024 10:16
-
-
Save mraible/2eb7381bbd70ece490149f6161af5b57 to your computer and use it in GitHub Desktop.
Add Authentication to Any Web Page in 10 Minutes
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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> | |
| <title>Simple Web Page</title> | |
| <style> | |
| h1 { | |
| margin: 2em 0; | |
| } | |
| </style> | |
| <!-- widget stuff here --> | |
| <script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.16.0/js/okta-sign-in.min.js" type="text/javascript"></script> | |
| <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.16.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/> | |
| <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.16.0/css/okta-theme.css" type="text/css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="text-center">Simple Web Page</h1> | |
| <div id="messageBox" class="jumbotron"> | |
| You are not logged in. Get outta here! Shoo! >:S | |
| </div> | |
| <!-- where the sign-in form will be displayed --> | |
| <div id="okta-login-container"></div> | |
| <button id="logout" class="button" onclick="logout()" style="display: none">Logout</button> | |
| </div> | |
| <script type="text/javascript"> | |
| var oktaSignIn = new OktaSignIn({ | |
| baseUrl: "https://dev-133320.okta.com", | |
| clientId: "0oa1pnqwx0wgyW2n3357", | |
| authParams: { | |
| issuer: "default", | |
| responseType: ['token', 'id_token'], | |
| display: 'page' | |
| } | |
| }); | |
| if (oktaSignIn.token.hasTokensInUrl()) { | |
| oktaSignIn.token.parseTokensFromUrl( | |
| // If we get here, the user just logged in. | |
| function success(res) { | |
| var accessToken = res[0]; | |
| var idToken = res[1]; | |
| oktaSignIn.tokenManager.add('accessToken', accessToken); | |
| oktaSignIn.tokenManager.add('idToken', idToken); | |
| window.location.hash=''; | |
| document.getElementById("messageBox").innerHTML = "Hello, " + idToken.claims.email + "! You just logged in! :)"; | |
| document.getElementById("logout").style.display = 'block'; | |
| }, | |
| function error(err) { | |
| console.error(err); | |
| } | |
| ); | |
| } else { | |
| oktaSignIn.session.get(function (res) { | |
| // If we get here, the user is already signed in. | |
| if (res.status === 'ACTIVE') { | |
| document.getElementById("messageBox").innerHTML = "Hello, " + res.login + "! You are *still* logged in! :)"; | |
| document.getElementById("logout").style.display = 'block'; | |
| return; | |
| } | |
| oktaSignIn.renderEl( | |
| { el: '#okta-login-container' }, | |
| function success(res) {}, | |
| function error(err) { | |
| console.error(err); | |
| } | |
| ); | |
| }); | |
| } | |
| function logout() { | |
| oktaSignIn.signOut(); | |
| location.reload(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> | |
| <title>Simple Web Page</title> | |
| <style> | |
| h1 { | |
| margin: 2em 0; | |
| } | |
| </style> | |
| <!-- widget stuff here --> | |
| <script src="https://global.oktacdn.com/okta-signin-widget/4.3.0/js/okta-sign-in.min.js" type="text/javascript"></script> | |
| <link href="https://global.oktacdn.com/okta-signin-widget/4.3.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="text-center">Simple Web Page</h1> | |
| <div id="messageBox" class="jumbotron"> | |
| You are not logged in. Get outta here! Shoo! >:S | |
| </div> | |
| <!-- where the sign-in form will be displayed --> | |
| <div id="okta-login-container"></div> | |
| <button id="logout" class="button" onclick="logout()" style="display: none">Logout</button> | |
| </div> | |
| <script type="text/javascript"> | |
| var oktaSignIn = new OktaSignIn({ | |
| baseUrl: "https://dev-133320.okta.com", | |
| clientId: "0oa50fk2wyToOtnj0357", | |
| authParams: { | |
| issuer: "https://dev-133320.okta.com/oauth2/default", | |
| responseType: ['token', 'id_token'], | |
| display: 'page' | |
| } | |
| }); | |
| if (oktaSignIn.hasTokensInUrl()) { | |
| oktaSignIn.authClient.token.parseFromUrl().then( | |
| // If we get here, the user just logged in. | |
| function success(res) { | |
| var accessToken = res.tokens.accessToken; | |
| var idToken = res.tokens.idToken; | |
| oktaSignIn.authClient.tokenManager.add('accessToken', accessToken); | |
| oktaSignIn.authClient.tokenManager.add('idToken', idToken); | |
| document.getElementById("messageBox").innerHTML = "Hello, " + idToken.claims.email + "! You just logged in! :)"; | |
| document.getElementById("logout").style.display = 'block'; | |
| }, | |
| function error(err) { | |
| console.error(err); | |
| } | |
| ); | |
| } else { | |
| oktaSignIn.authClient.token.getUserInfo().then(function(user) { | |
| // user has details about the user | |
| document.getElementById("messageBox").innerHTML = "Hello, " + user.email + "! You are *still* logged in! :)"; | |
| document.getElementById("logout").style.display = 'block'; | |
| }, function(error) { | |
| oktaSignIn.renderEl( | |
| { el: '#okta-login-container' }, | |
| function success(res) {}, | |
| function error(err) { | |
| console.error(err); | |
| } | |
| ); | |
| }); | |
| }; | |
| function logout() { | |
| oktaSignIn.authClient.signOut(); | |
| location.reload(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> | |
| <title>Simple Web Page</title> | |
| <style> | |
| h1 { | |
| margin: 2em 0; | |
| } | |
| </style> | |
| <!-- widget stuff here --> | |
| <script src="https://global.oktacdn.com/okta-signin-widget/5.3.1/js/okta-sign-in.min.js" type="text/javascript"></script> | |
| <link href="https://global.oktacdn.com/okta-signin-widget/5.3.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="text-center">Simple Web Page</h1> | |
| <div id="messageBox" class="jumbotron"> | |
| You are not logged in. Get outta here! Shoo! >:S | |
| </div> | |
| <!-- where the sign-in form will be displayed --> | |
| <div id="okta-login-container"></div> | |
| <button id="logout" class="button" onclick="logout()" style="display: none">Logout</button> | |
| </div> | |
| <script type="text/javascript"> | |
| var oktaSignIn = new OktaSignIn({ | |
| baseUrl: "https://dev-133320.okta.com", | |
| clientId: "0oa7mbzj00hKP3G7o357", | |
| redirectUri: window.location.origin, | |
| authParams: { | |
| issuer: "https://dev-133320.okta.com/oauth2/default", | |
| responseType: ['token', 'id_token'], | |
| } | |
| }); | |
| oktaSignIn.authClient.session.exists().then(function(exists) { | |
| if (exists) { | |
| oktaSignIn.authClient.tokenManager.getTokens().then(({ accessToken, idToken }) => { | |
| document.getElementById("messageBox").innerHTML = "Hello, " + idToken.claims.email + "! You just logged in! :)"; | |
| document.getElementById("logout").style.display = 'block'; | |
| oktaSignIn.hide(); | |
| }); | |
| } else { | |
| oktaSignIn.showSignInToGetTokens({ | |
| el: '#okta-login-container' | |
| }).then(function(tokens) { | |
| var accessToken = tokens.accessToken; | |
| var idToken = tokens.idToken; | |
| oktaSignIn.authClient.tokenManager.setTokens(tokens) | |
| document.getElementById("messageBox").innerHTML = "Hello, " + idToken.claims.email + "! You just logged in! :)"; | |
| document.getElementById("logout").style.display = 'block'; | |
| oktaSignIn.hide(); | |
| }).catch(function(error) { | |
| console.error(error) | |
| }); | |
| } | |
| }); | |
| function logout() { | |
| oktaSignIn.authClient.signOut(); | |
| oktaSignIn.show(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
@mraible is there any way to add a logo in the empty box of the login container using this library.
@stagging18 Yes, there's a logo property you can configure. See https://developer.okta.com/live-widget.
I've noticed that this examples don't work anymore on versions newer than 5.1.5
Is there any example also for those versions?
@kontyente What error are you seeing? I can provide an update, but I'm not sure it'll solve your problem if I can't reproduce it beforehand.
@kontyente I added a 5.3.1 version.
@mraible Is the code for v5.3.1 working ? because it keeping loading while trying to log in and nothing happens!
Are there any messages in your browser console?
I am receiving these messages (Firefox)
this is from Chrome
@mraible those are the messages I am receiving
A 404 is expected for /me when you're not logged in. That's our way of saying your session isn't found.
@shassanein I just tried the code for v5.3.1 and it works for me.
I created a SPA app on Okta with http://localhost:8000 as the redirect URI for sign-in and sign-out. I assigned it to Everyone and created a trusted origin (Security > API) for http://localhost:8000.
Then, I copied the code to ~/Desktop/index.html and changed the domain and client ID to match my new app. Then, I ran python3 -m http.server 8000 from my Desktop directory and was able to sign-in.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@tomarv2 Is there anything in your browser's development console that indicates what the error is? Are you sure you have an Okta developer account (and not an IT Trial account for workforce identity)?