Skip to content

Instantly share code, notes, and snippets.

@mdeggies

mdeggies/login.html

Last active June 7, 2017 22:28
Show Gist options
  • Save mdeggies/f6b842cffbeef308493fe724557919ba to your computer and use it in GitHub Desktop.
Save mdeggies/f6b842cffbeef308493fe724557919ba to your computer and use it in GitHub Desktop.
Download ZIP
Okta Sign-In Widget Example
Raw
login.html
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example Okta Sign-In Widget</title>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/1.7.0/js/okta-sign-in.min.js" type="text/javascript"></script>
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/1.7.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet">
<!-- Optional, customizable css theme options. Link your own customized copy of this file or override styles in-line -->
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/1.7.0/css/okta-theme.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Render the login widget here -->
<div id="okta-login-container"></div>
<!-- Script to init the widget -->
<script>
var oktaSignIn = new OktaSignIn({
baseUrl: 'https://dev-<ID>.oktapreview.com',
// OpenID Connect options
clientId: '<OIDC CLIENT ID>',
redirectUri: 'http://localhost:<PORT>',
authParams: {
responseType: ['id_token', 'token']
}
});/
oktaSignIn.renderEl({
el: '#okta-login-container'
},
function (res) {
console.log('Status:',res.status);
if (res.status === 'SUCCESS') {
console.log('User: ',res.user);
console.log('Response contains access token and ID token: ',res);
// Pass the access token to your routes to give the user access to different pages,
// or pass the ID token to get information about the current user
}
},
function (err) {
console.log('Error: ',err);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment