Keycloak tutorial series — Part 2 OIDC and SSO with Keycloak

6 min readFeb 27, 2022

After a few months break, this is part 2 of the Keycloak tutorial series, this guide will focus on OIDC and SSO with Keycloak. You may refer to the following links for previous completed tutorials:

Source Code can be found from:

https://github.com/zhangran1/keycloak-tutorial-series

What You Will build

This tutorial will cover how to configure ODIC and SSO for SpringBoot and a simple JavaScript application with Keycloak. After you successfully configure the applications, you will be perform Single Sign On between the two applications.

Below diagram illustrates the relationship between each component.

System information

OS: Ubuntu 20.04

JDK: 11.0.11

Maven: 3.6.3

Docker: 20.10.2

Docker-compose: 1.29.2

Keycloak: 15.0.2 (Launch via docker)

Spring Boot: 2.0.3.RELEASE

Prepare Realm/Client ID in Keycloak

It is recommended to create another Realm in Keycloak for your task instead of use Master Realm. Launch Keycloak’s admin console at http://localhost:8080/auth and login using default credentials.

1. The first step is that we will create a new Realm named keycloak-tutorial.

After you created a new Realm, you will see the following landing page.

2. We will create first client id for SpringBood application. To create a new Client ID, click Clients on the left menu.

Click Create and fill in the following information when you add the new client and click Save.

Client ID : app-springboot
Client Protocal: openid-connect
Root URL: http://localhost:8090

Keycloak will auto populate the data with default values.

To generate client secret, change Access Type to confidential and click Save button. A new tab Credentials will appear next to Settings tab. Click the Credentials tab and you can access the Secret.

3. Next we will create a client id for JavaScript App. The only difference between this step and the previous step is that we do not change Access Type and will keep it as Public.

Under Clients click Create

Ffill in the following information when you add the new client and click Save. I am using Intellij to launch the JavaScript application, it will be launched at port 63342. So the Root URL field url comes with port 63342.

Client ID : app-frontend-js
Client Protocal: openid-connect
Root URL: http://localhost:63342

Keycloak will auto populate the data with default values.

Now we have created Client Ids for SpringBoot applicaiton and JavaScript Application, the next step is to update them.

Configure SpringBoot Application

The sample application was modified based on the app-springboot from Keycloak’s keycloak-quickstarts guide.

Sample application can be found from here in my Github repository.

Update the values under application.properties file according to your own configurations, you may need to get the Client Id and Client Secret you generated in previous step. Kindly assign in Client Id to keycloak.resource and Client Secret to keycloak.credentials.secret

server.connection-timeout=5000
spring.freemarker.cache=false
server.port = 8090
keycloak.realm=keycloak-tutorial
keycloak.auth-server-url=http://localhost:8080/auth
keycloak.ssl-required=external
keycloak.resource=app-springboot
keycloak.credentials.secret=1c79fd4b-1d01–43d6-a6a4–255b8ecab0c6
keycloak.public-client=false

Launch the SpringBoot Application to test the configuration, visit http://localhost:8090 and you may see the following output.

Click Secure Page and you will be redirect to Keycloak Login Page. At this moment we do not have any users, we will create a user later step.

Configure JavaScript Application

In this example, I modified the demo application based on the original source code was from an unknown author, apologise that I lost the reference to the author of the code. The source code from my repository can be found from here in GitHub.

JavaScript app is easier to configure, update the following fields to configure the keycloak url, realm, clientId and scope

let keycloakUrl = “http://localhost:8080/auth"
window.keycloak = new Keycloak({
url: keycloakUrl,
realm: ‘keycloak-tutorial’,
clientId: ‘app-frontend-js’,
scope: ‘openid email phone’
});

Launch the index.html in browser. I use Intellj to launch the index.html, it will be ran at port 63342. If the configuration is correct, you will be redirect to Keycloak for user’s credentials.

Create User in Keycloak Admin Console

Now let’s go back to Keycloak’s admin console.

visit Users section and click View all users. At this moment, there is no users created under keycloak-tutorial realm.

2. Click Add user and fill in the following information and click Save

Username: demouser
Email: demouser@example.com
First Name: Keycloak
Last Name: Tutorial
User Enable: On

3. After you save the user, you will see a new user is created.

4. Click on the Credentials assign Password, in this example, the password is password. Disable Temporary field and click Set Password

Assign Role to the user

As the SpringBoot Application requires the user to have USER role, we need to create a role and assign the user with the role.

In Keycloak’s admin console click Roles

2. Click Add Role and input USER under the Role Name and click Save.

3. A new Realm Role will be created.

4. Click Users and select the demouser created earlier on.

5. Cancel Update Password under Require User Actions and click Role Mappings

6. You will see the USER role is shown as Available Roles under Realm Roles.

7. Click USER under Available Roles and click Add selected. The USER will be appear under Assigned Roles

Next we will test the Single Sign On.

Test Single Sign On

Refresh the page which shows in Configure JavaScript Application step and key in the Username and password configured in the previous steps and click Sign In

2. If we login successfully, you will see user profile.

3. Refresh the login page redirected by SpringBoot Application and you will see the following page.

4. Click Logout from the page and refresh the JavaScript Application, you will see the user had been logged out from JavaScript Application as well, it will request the user to log in.