Skip to content

Instantly share code, notes, and snippets.

@mraible

mraible/10m-2.16.0.html

Last active February 5, 2024 10:16
Show Gist options
  • Save mraible/2eb7381bbd70ece490149f6161af5b57 to your computer and use it in GitHub Desktop.
Save mraible/2eb7381bbd70ece490149f6161af5b57 to your computer and use it in GitHub Desktop.
Download ZIP
Add Authentication to Any Web Page in 10 Minutes
Raw
10m-2.16.0.html
<!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>
Raw
10m-4.3.0.html
<!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>
Raw
10m-5.3.1.html
<!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>
@ronvanderzwan
Copy link

Hi mRaible,

Thanks for the clear code example, I am having an issue with the redirecturi on logout().
I have set the proper redirect in the dashboard but I get a 400 bad request with the following error: Error Code: illegal_post_logout_redirect_uri. Is this the uri in the dashboard or do you have to specify a uri in the code for the logout function? thanks for your help. Ron

@mraible
Copy link
Author

mraible commented Aug 7, 2020

You need to specify the URI in the Logout redirect URIs of your Okta app. It should be http://localhost:8080 if you're running it locally.

@ronvanderzwan
Copy link

I am using Okta in a website; when you say Okta app, do you mean in my HTML code ? In Okta Applications/generalsettings/ the uri's are properly specified.

@mraible
Copy link
Author

mraible commented Aug 7, 2020

When you're looking at the 400 error page, grab the full URL from the address bar and paste it into a text editor. Look at the redirect_uri parameter in that URL. The value specified needs to be in your redirect URIs.

@ronvanderzwan
Copy link

Okay got it, thanks for your help.

@tomarv2
Copy link

tomarv2 commented Aug 20, 2020

Great works, everything worked except as soon as I refresh the page I get logged out. Am I missing something. I read some place something to do with cookie. Any pointers?

@mraible
Copy link
Author

mraible commented Aug 20, 2020

@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)?

@stagging18
Copy link

@mraible is there any way to add a logo in the empty box of the login container using this library.

@mraible
Copy link
Author

mraible commented Sep 11, 2020

@stagging18 Yes, there's a logo property you can configure. See https://developer.okta.com/live-widget.

@kontyente
Copy link

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?

@mraible
Copy link
Author

mraible commented Jan 29, 2021

@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.

@mraible
Copy link
Author

mraible commented Feb 9, 2021

@kontyente I added a 5.3.1 version.

@shassanein
Copy link

@mraible Is the code for v5.3.1 working ? because it keeping loading while trying to log in and nothing happens!

@mraible
Copy link
Author

mraible commented Feb 25, 2022 via email •
edited
Loading

@shassanein
Copy link

shassanein commented Feb 25, 2022 •
edited
Loading

I am receiving these messages (Firefox)

Okta Sign-in

image

@shassanein
Copy link

this is from Chrome
image

@shassanein
Copy link

@mraible those are the messages I am receiving

@mraible
Copy link
Author

mraible commented Mar 4, 2022

A 404 is expected for /me when you're not logged in. That's our way of saying your session isn't found.

@mraible
Copy link
Author

mraible commented Mar 4, 2022

@shassanein I just tried the code for v5.3.1 and it works for me.

Screen Shot 2022-03-04 at 09 16 08

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