Last active
May 28, 2020 18:56
-
-
Save ocap-kirk/7b31a28eb35b4ce74a07b8200ddc174e to your computer and use it in GitHub Desktop.
Okta Sign-in Widget PKCE 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> | |
| <head> | |
| <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> | |
| <script src="https://global.oktacdn.com/okta-signin-widget/3.2.1/js/okta-sign-in.min.js" type="text/javascript"></script> | |
| <link href="https://global.oktacdn.com/okta-signin-widget/3.2.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet" /> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- Render the login widget here --> | |
| <div id="okta-login-container"></div> | |
| <div id="yourInfo"> | |
| </div> | |
| <!-- Script to init the widget --> | |
| <script type="text/javascript"> | |
| var clientID = "0oao10dkk2LhdSsdj0h7"; | |
| var redirectUrl = "https://oktawidgetpkce.glitch.me/"; | |
| var issuer = "https://partnerpoc.oktapreview.com/oauth2/default"; | |
| var signIn = new OktaSignIn({ | |
| baseUrl: 'https://partnerpoc.oktapreview.com', | |
| authParams: { | |
| pkce: true, | |
| issuer: issuer, | |
| grantType: 'authorization_code', | |
| display: 'page', | |
| responseType: 'code', | |
| }, | |
| el: '#okta-login-container' | |
| }); | |
| signIn.authClient.token.parseFromUrl() | |
| .then(function(tokenOrTokens) { | |
| // manage token or tokens | |
| // Add the token to tokenManager to automatically renew the token when needed | |
| tokenOrTokens.forEach(token => { | |
| if (token.idToken) { | |
| signIn.authClient.tokenManager.add('id_token', token); | |
| $("#yourInfo").append("<div><h2>ID Token</h2>"); | |
| $("#yourInfo").append("<p>" + token.idToken + "</p>"); | |
| $("#yourInfo").append("</div>"); | |
| } | |
| if (token.accessToken) { | |
| signIn.authClient.tokenManager.add('access_token', token); | |
| $("#yourInfo").append("<div><h2>Access Token</h2>"); | |
| $("#yourInfo").append("<p>" + token.accessToken + "</p>"); | |
| $("#yourInfo").append("</div>"); | |
| } | |
| }); | |
| console.log("Your Tokens have been stored!"); | |
| //show div | |
| }) | |
| .catch(function(err) { | |
| console.log(err); | |
| signIn.authClient.tokenManager.get('id_token') | |
| .then(function(token) { | |
| if (token) { | |
| // Token is valid | |
| $("#yourInfo").append("<div><h2>ID Token</h2>"); | |
| $("#yourInfo").append("<p>" + token.idToken + "</p>"); | |
| $("#yourInfo").append("</div>"); | |
| signIn.authClient.tokenManager.get('access_token') | |
| .then(function(token2) { | |
| // Token is valid | |
| $("#yourInfo").append("<div><h2>Access Token</h2>"); | |
| $("#yourInfo").append("<p>" + token2.accessToken + "</p>"); | |
| $("#yourInfo").append("</div>"); | |
| }); | |
| console.log(token); | |
| } else { | |
| // Token has expired | |
| if (signIn.authClient.tx.exists()) { | |
| //session esists, renew token | |
| console.log('A session exists!'); | |
| } else { | |
| console.log('A session does not exist.'); | |
| }; | |
| signIn.renderEl({ | |
| clientId: clientID, | |
| redirectUri: redirectUrl, | |
| }, | |
| function() {}, | |
| function(err) { console.err(err) }); | |
| } | |
| }) | |
| .catch(function(err) { | |
| // OAuth Error | |
| signIn.renderEl({ | |
| clientId: clientID, | |
| redirectUri: redirectUrl, | |
| }, | |
| function() {}, | |
| function(err) { console.err(err) }); | |
| console.error(err); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Hi, I have no idea how - but your example really works,
I've spent many hours trying to run OKTA widget with PKCE by using examples from OKTA documentations, but no luck (I think all of them are incorrect).
But this is work!
This is AMAZING. Seconding what @vmusiychuk said 👍
@tkirk-okta I've reviewed the React examples for using this widget, but for some reason, I'm not able to get them to work. Any tips on using this flow in a functional React component? Thank you!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Live example: https://oktawidgetpkce.glitch.me/
Username: clark.kent
Password: mars