Add Authentication to Any Web Page in 10 Minutes
You’ve got a web page, you want to add authentication to. Normally you’d have to build out a backend, user management, etc., but that’s hard. Today I’ll show you how to do it in just 10 minutes.
Chandu Sai
I need to know about how to implement single sign in that any user can login to my application. In this case if i enter client_id and org_url of my okta developers account which i have created in my application account then only i can login to my angular application …no other okta user can’t authenticate into my application
Matt Raible
If you create accounts for other users, they’ll be able to login. You could enable self-registration on your app. That would allow your users to register themselves, then log in.
Kevin
When I attempt to login through the site on localhost:8080 which I built with your tutorial, I get the error message:
“There was an unexpected internal error. Please try again.” and the python server which is running in my terminal I get "code 501, message Unsupported method (‘POST’). Any advice is greatly appreciated! Thanks.
Cristian Chiovari
Just wonder if anyone managed to make this work. Is not clear if it is needed a local Okta server to run this ?
Kevin
I haven’t been able to make it work. Have you had any luck?
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>
Gaurav Bhandari
on this page, on top right, you will see Login and Signup. do the following:
1. Click Login
2. Sign up if not already signed up
3. Once you signed in, you will see something like this in the url: https://dev-xxxxx-admin.okt…
4. From above URL: YOUR_ORG_URL should be https://dev-xxxxx.okta.com/… (Remember, there is NO admin in the URL now)
5. Set your Issuer to: https://dev-xxxxx.okta.com/… (Again, no admin in the URL)
6. Your client ID (I did not set it up and it still works)
Erik Akert
Getting a “Unable to connect to the server. Please check your network connection.” when trying to login with these instructions (and Gaurav below).
Jasbir B
I tried the instructions but just get "Unable to connect to the server. Please check your network connection."
I granted Cross-origin access to the base URL of the website, but this did not make a difference. The online Test failed too.
Randall Degges
Hmm… It sounds like you may have either some networking issues or an extension/vpn that is messing things up. Can you try from a different computer/network?
Randall Degges
You may have copied something wrong, there shouldn’t be any POST requests here :o
Jasbir B
I think it would help to have a working example to download. I noticed I made several transcription errors trying to match up the fragments that are spread through the article. The article itself is really nice, but working code adds a lot!
1 Like
Jasbir B
I tried it from 2 different networks before posting the problem
Randall Degges
Sorry, I’m quite honestly not sure what the problem is. I just tested this out the other day from work and my home and didn’t have any issues 
Jasbir B
How much work would it be to make the source available for download? I mean, a simple example that doesn’t do anything, but is complete.
George Canepa
I learned a lot from this, but still can’t log in. I used your example code, and just set it to my account and ID. I also get the “Unable to connect” error.
Going into “Developer Tools” in Edge Browser (similar errors in Chrome and IE and Firefox) I get
After Loading page: Access to XMLHttpRequest at 'https://dev-792004.okta.com… from origin ‘http://localhost’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
After trying to login: SEC7120: [CORS] The origin ‘http://localhost’ did not find ‘http://localhost’ in the Access-Control-Allow-Origin response header for cross-origin resource at 'https://dev-792004.okta.com….
The page is located at http://localhost and I did set that as one of the allowed “origin” options
Matt Raible
To fix this, you need to add http://localhost as a trusted origin at API > Trusted Origins.
George Canepa
Thanks for looking at this. Turns out I did have the right trusted origin, but I had entered the ORG URL wrong (I did not really understand what they meant by org URL, but it is pretty clear in the documentation)
My mistake was that I had https://dev-792004.okta.com… instead of https://dev-792004.okta.com for the baseURL:
I this posted for others having problems the same problem learning the syntax
My advice is to look at the “Developer Tools” console after a failure, as you get more info on any error
Also, it does appear that this reference code may be out of date, as browser complains about it using features that have been deprecated
Avishay Guttman
Hi
Thanks for the information.
I followed the doc but I get a weird error when trying to sign in: "We found some errors. Please review the form and make corrections."
But I don’t see any errors in the form.
https://uploads.disquscdn.c…
Any Idea what can be the issue?
Thanks