Last active
June 7, 2017 22:28
-
-
Save mdeggies/f6b842cffbeef308493fe724557919ba to your computer and use it in GitHub Desktop.
Okta Sign-In Widget Example
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
| <!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