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