Making a Javascript OpenID Connect Client in 4 steps

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:

  1. Include the openidconnect.js script;
  2. Set the provider and client configuration info through JSON objects;
  3. Call the server – login;
  4. 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 : ''
OIDC.setClientInfo( clientInfo );

// set Identity Provider configuration information using discovery
var providerInfo ='');

// or set via manual configuration
// var providerInfo = {
//                      issuer: 'https:/',
//                      authorization_endpoint: '',
//                      jwks_uri: ''
//                    };

// 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

// 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

// 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?


Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.