Gluu Blog

Follow us:
Back to Blog

OpenID Connect Implicit Client

Rafael Ferreira Toledo February 12, 2017

By Rafael Ferreira Toledo

Javascript_badge.svg

Back in 2014, Nat Sakimura wrote a blog post showcasing the ease of OpenID Connect authentication. He used a JavaScript library written by Edmund Jay. It’s a really nice little library, but it needed some updating. So we decided to move it to Github.

This post summarizes how to configure an OpenID Connect client on the Gluu Server, and how to run the tests provided with the sample html pages published in the project. You’ll need to install a Gluu Server. You’ll also need a web server to install the sample.

Step 1: Install HTML and JavaScript files

Install the .html and .js files from Github in a public folder on a web sever.

Step 2: Add client to Gluu Server

The implicit library doesn’t currently support dynamic client registration, although we will add this capability soon. So you will have to add the client manually to the Gluu Server via the oxTrust Admin UI. We used the following values in the client registration form:

Parameter

Value

Client Name Implicit Test Client
Application Type Web
Pre-Authorization Enabled
Subject Type public
Scopes email, openid and profile
Response Types id_token, token
Grant Types implicit
Redirect Login URIs https://localhost/login-callback.html

Remember to set a Redirect Login URI to the address of the web page you intend to deploy.

Step 3: Configure web page

Now that your client is registered on the Gluu Server, the next step is to enter some information on the demo page implicit-test.html. The following lines of code are responsible for setting up the client and provider information.

var clientInfo = {
client_id : @!87B2.799A.2DD5.2A83!0001!0C26.B6FD!0008!EDAA.E9FD,
redirect_uri : ‘https://localhost/login-callback.html’
};
OIDC.setClientInfo( clientInfo );
 
var providerInfo = OIDC.discover(‘https://idp.example.com/’);
OIDC.setProviderInfo( providerInfo );

The client_id is shown as soon as the manual client registration is done on the Gluu Server. The redirect_uri is the callback html page, and should match the one given during the client registration. And the URL given to the OIDC.discover() must be the Identity Provide’s URL. In this case, it should be the URL of your Gluu Server. For this example we used ‘https://idp.example.com/’ as our Gluu Server URL.

Step 4: Test

Once you have done the previous steps, it’s ready to test! The implict-test.html presents an “Authenticate” button that will redirect to OpenID Provider (Gluu Server) and then to the login-callback.html. The callback page shows the information from the id_token as well as the data from the UserInfo endpoint. If there is a problem, the login-callback.html will print “undefined”, for example if it couldn’t receive any data from the OpenID Provider. The following pictures show the implicit-test homepage and its results for my test.

implicit-testlogin-callback1

login-callback2

 

 

Be sure to subscibe to
our RSS Feed

Rafael Ferreira Toledo