Tbh I don’t know the first thing about javascript but I’m working on getting the developer cert since I got consultant and I’m a completionist and I’m struggling with the sign on widget portion of the hands on practice test.
Right now the issuer and client id are not real but i doubt those are the problem. I left the redirect URI unchanged. (this is because my test timed out and I wanted to start what I had over at a basic level).
My code is below and when I check chrome developer tools I get the following error. (index):26 Uncaught ReferenceError: OktaSignIn is not defined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome to Okta Cert</title>
<!-- Okta Sign-In Widget: Core js and css -->
<script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/7.23.1/js/okta-sign-in.min.js" type="text/javascript"></script>
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/7.23.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet">
<!-- Okta Sign-In Widget: 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/7.23.1/css/okta-theme.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="title">Welcome to Okta Cert</div>
<hr>
<div class="title">Please enter your credentials below to continue to your Okta org.</div>
<div id="okta-login-container"></div>
<div class="footer">
Copyright 2009-2022 Okta Cert. All rights reserved.
</div>
<script type="text/javascript">
var signIn = new OktaSignIn(
{
issuer: 'https://okta-org-jj234.okta.com/oauth2/default',
clientId: '23423dsvfdsfsd',
redirectUri: 'https://flowery-meadow-diagram.glitch.me',
}
);
oktasignIn.showSignIn({
// Assumes there is an empty element on the page with an id of 'osw-container'
el: 'okta-login-container'
}).then(function(res) {
// Most flows will not require any redirection. In these cases, tokens will be returned directly.
// res.tokens is an object
oktaSignIn.authClient.handleLoginRedirect(res.tokens);
}).catch(function(error) {
// This function is invoked with errors the widget cannot recover from:
// Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
});
</script>
<!-- Default page style -->
<style>
.title {
padding: 40px;
font: normal 34px/1 Verdana, Geneva, sans-serif;
color: black;
text-align: center;
letter-spacing: 7px;
}
.footer {
font: normal 14px/1 Verdana, Geneva, sans-serif;
padding: 10px;
color: black;
position: fixed;
bottom: 0;
width: 100%;
background-color: #F0F0F0;
}
</style>
<!-- Default page style -->
</body>
</html>