Add Authentication to Any Web Page in 10 Minutes

Person145

I was able to get something going for this that produced a positive result…only been at it for a few hours (And never actually configured anything web related before) So forgive if this has 0 relevance for this topic, but came across this page and thought I’d share. I made it so the widget is the index page of my html site and after it authenticates with my Okta login via the widget it then redirects the login right through to another internal ASP page…Have yet to figure out how to avoid the ability of navigating directly to the second page but figure this is a step in the right direction getting it to this point.

I did set the Login redirect URI & Initiate login URI & had ensured the trusted Origins & CORS Redirect were all set for where I wanted the redirection to go.



<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>Secure Access Portal</title>
<style>
h1 {
margin: 2em 0;
}
</style>

<script src=“https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.9.0/js/okta-sign-in.min.js” type=“text/javascript”></script>
<link href=“https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.9.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.9.0/css/okta-theme.css” type=“text/css” rel=“stylesheet”/>
</head>
<body>
<div class=“container”>
<h1 class=“text-center”>Access-Portal</h1>

</div>
<div id=“widget-container”></div>
<script>
var signIn = new OktaSignIn({baseUrl: ‘https://dev-12345.okta.com’});
signIn.renderEl({
el: ‘#widget-container
}, function success(res) {
if (res.status === ‘SUCCESS’) {
res.session.setCookieAndRedirect(‘https://my.asp.website.address.com’);
} else {
// The user can be in another authentication state that requires further action.
// For more information about these states, see:
// GitHub - okta/okta-signin-widget: Okta SignIn widget that renders the new login/auth/recovery flows
}
});
</script>
</body>
</html>