When John, Breno, and I started the OpenID Connect work, one of the target was to make it as simple as putting two files on the client file system and calling a few functions from the calling page. With OpenID Connect, we have actually achieved it. You do not believe? Let me show.
Right – we need crypto for public client for various security reasons so we need JWT/JWS/JWA/JWK library, but by using it, it should be pretty simple.
For the demonstration purpose, I have asked Edmund to put all the necessary libraries into one file so we need to include only one javascript file: “openidconnect.js”, and put a callback page, “callback.html”.
Then, what you need to do is:
- Include the openidconnect.js script;
- Set the provider and client configuration info through JSON objects;
- Call the server – login;
- In the callback page, callback.html, you will get ID Token back, so that you can put it into the cookie to handle the session.
That’s it.
The details are as follows:
1) Include the openidconnect.js script
2) To perform authentication at the Identity Provider, set the provider and client configuration information
// set client_id and redirect_uri
var clientInfo = {
client_id : 'MyClientId',
redirect_uri : 'https://rp.example.com/callback.html'
};
OIDC.setClientInfo( clientInfo );
// set Identity Provider configuration information using discovery
var providerInfo = OIDC.discover('https://op.example.com');
// or set via manual configuration
// var providerInfo = {
// issuer: 'https:/op.example.com',
// authorization_endpoint: 'http://op.example.com/auth.html',
// jwks_uri: 'https://op.example.com/jwks'
// };
// set Identity Provider configuration
OIDC.setProviderInfo( providerInfo );
// store configuration for reuse in the callback page
OIDC.storeInfo(providerInfo, clientInfo);
3) Login
// Redirect to login
// login with default scope=openid, response_type=id_token
OIDC.login();
// login with options
OIDC.login( {
scope : 'openid profile',
response_type : 'code token id_token',
max_age : 60,
claims : {
id_token : ['email', 'phone_number'],
userinfo : ['given_name', 'family_name']
}
}
);
4) In callback page, you will get the ID Token and other tokens back.
In the sample callback page, we are essentially doing the following.
// Restore configuration information OIDC.restoreInfo(); // Get ID Token: Returns ID Token if valid, else error. var id_token = OIDC.getValidIdToken(); // Get code var code = OIDC.getCode(); // Get Access Token var token = OIDC.getAccessToken();
In reality, you need to do try and catch to handle errors and so on, but the above is the basic.
Pretty simple, huh?
Please, can you provide the link to download the openidconnect.js file ? Thanks.
I need to put proper license things into it, which has been on my todo list, but have not done yet to this date. Sorry for that.
Great work! Is there any update regarding .js file? When are you going to upload it?
Ok. I know I should work towards it…
You can grab the un-credited file from here…
https://www.sakimura.org/test/openidconnect.js
There will be a certificate error that I have to fix first…
Hi Nat, are there any plans to put the JavaScript file on GitHub together with a license, and possible on Bower as well? I would like to release a Web component for OpenID Connect based sign-in but I need to clarify your license first. Thanks!
Likely to be on bitbucket instead….
I have added bunch of license info in the above link though now.
Gluu has kindly stepped up and took the burden of maintaining it. The github repository is here:
https://github.com/GluuFederation/openid-implicit-client
Thanks Nat – that is impressively simple!
One quick question. In many cases, the Javascript app will need to talk to a web-service of some kind, which is completely separate from the OP (e.g. the OP is Google, but my Javascript app needs to talk to my own custom web service). Is it secure for the Javascript app send the ID token to the web service as a form of authentication? What about the audience field in the JWT in this case? Does OpenID Connect allow for obtaining a JWT with multiple audiences (the Javascript app plus the third party web service)?
For that, I would recommend you to use hybrid flow. The depicted example is using implicit flow, which is just for the in browser client.
Hi Nat, this is a great start on an easy to use js library. I needed something for a demo presentation on using OIDC, and this fits perfectly. Are you planning on posting this to Github? I noticed that in the isValidIdToken() function, you are expecting the audience to be an array.
If the audience is a string, the validation fails. The OIDC specs say it can
either be a string, or an array of multiple audiences.
If you post this to GH, I could submit a pull request for this.
Thank you!
Thanks for this post Nat, I test your library against django-oidc-provider and works like a charm!! Btw, I have a question. How do u get userinfo claims? Need to be manually POSTed with the access_token?.
Greetings!
Yup. Sorry about that, but that should be simple enough.
Sure! just asking, maybe I forgot something. Again, awesome work! Waiting to see this on Github or Bitbucket. Regards
Sure! just asking, maybe I forgot something. Again, awesome work! Waiting to see this on Github or Bitbucket. Regards
Great post, when requesting claims it fail witht his message:
ncaught OidcException: Provider does not support claims request parameter
Sorry but it only supports the basic features. You could contribute your code though 🙂
Many providers only supports basic features and may not support “claims” request parameter.
Very good article. I will be dealing with some of these issues as well..
I’m not sure why but this blog is loading very slow for me.
Is anyone else having this issue or is it a issue on my end?
I’ll check back later and see if the problem still exists.
The site is fed from Tokyo, Japan. It may be the cause. Perhaps I should move it to the US.