Secure Spring Boot + Angular 9 Application using KeyCloak(1/3)

Learn how to authenticate Angular Web Application and secure Spring Boot REST APIs using Open Source Identity and Access Management Solution KeyCloak by Red Hat

This tutorial assumes that you’ve prior knowledge of OAuth2.0 and OIDC protocol. If this is not yet the case, I strongly recommend watching this awesome video by Nate Barbettini from Okta.

Overview

KeyCloak is an open-source identity and access management solution by Red Hat which makes it easy to secure modern applications and services with little to no code. Keycloak provides out-of-the-box authentication and authorization services as well as advanced features like User Federation, Identity Brokering, and Social Login.

The primary focus of this tutorial is to secure Spring Boot REST APIs with Keycloak Spring Boot Adaptor and authenticate and access secured REST APIs using Angular 9 application. We will focus on the configuration part of the KeyCloak instance in Part 1 of this tutorial.

We will create and secure endpoints of the heroes application which is an example application on angular.io.

KeyCloak Instance Configuration

To configure KeyCloak, we need to have the running instance of it. There are many ways to deploy KeyCloak. In this tutorial, we will only concentrate on standalone deployment with KeyCloak distribution files which are primarily used for development purposes.

1. Make sure you have Java 11 installed to run the latest version of KeyCloak.
2. Download the latest version of KeyCloak Server from https://www.keycloak.org/downloads.html.
3. Extract downloaded KeyCloak zip/tar.gz files and navigate to the bin folder.
4. Run standalone.bat file.
5. Access KeyCloak using http://localhost:8080 with your favorite web browser.

6. Create an initial admin user by providing the username and password of your choice.

7. Now click on the Administration console and login using created admin credentials. Our initial configuration is done.

To secure our REST APIs, we need to set up the KeyCloak as an Authorization server. Each time we hit the REST endpoint, KeyCloak will check whether the user is authorized to access the API or not.

Create Realm

A Realm manages a set of users, credentials, roles, and groups. A user belongs to and logs into a realm. We can create the multiple Realms in KeyCloak, each Realm is isolated from one another and can only manage and authenticate the users that they control.

1. Go to http://localhost:8080/auth/admin/ and log in to the KeyCloak Admin Console using the admin credentials.
2. We can see the Master Realm is already created. We should never make any changes to the Master Realm.
3. From the Master drop-down menu, click Add Realm.
4. Type heroes or any other name you prefer in the name field and click Create.

Provide a name for the Realm and click on Create

When the realm is created, the main admin console page opens. Notice the current realm is now set to heroes. Switch between managing the master realm and the realm you just created by clicking entries in the Select realm drop-down menu.

Make sure heroes is selected for the below configurations. Avoid using the master realm. You don’t have to create the realm every time. It’s a one time process.

Create a Client

Clients are entities that can request Keycloak to authenticate or authorize a user. Most often, clients are applications and services that want to use Keycloak to secure themselves and provide a single sign-on solution. Clients can also be entities that just want to request identity information or an access token so that they can securely invoke other services on the network that are secured by Keycloak.

In our case, the spring boot API REST Service will be the client because it is requesting authorization information from the KeyCloak server.

We will be creating two clients in the KeyCloak, one to authenticate the user and another to authorize the user. Note the difference between authentication and authorization, Authentication means confirming your own identity, while authorization means granting access to the system.

Client spa-heroes-backend will be our backend application used for authorization, while spa-heroes will be our frontend Angular application. We will first create spa-heroes-backend client.

1. Click on the Clients menu from the left panel. Now we are going to create a new client for our application.
2. To create a new client, click Create. You will be prompted for a Client ID, a Client Protocol, and a Root URL. Here, the client ID will be spa-heroes-backend, the client protocol should be set to openid-connectand leave the root URL blank.
3. After saving, the client configuration page will be displayed where you can assign a name and description to the client if desired.

Set Enabled to ON, and Access Type to bearer-only because our backend API REST Service will only verify bearer token, it will never initiate the login.

Now, go to the Roles tab to create the spa-heroes-backend role definitions. Imagine the Application that you are building will have different types of users with different user permissions. E.g. users and administrators.

1. Some APIs would only be accessible to users.
2. Some APIs would only be accessible to admin.
3. Some APIs would be accessible to both users and admin.

So, let’s create two roles, user and admin to satisfy our use case. Go to the Roles tab and select on Add Role. Create two roles, heroes-userand heroes-admin respectively for our application.

spa-heroes-backend client roles

add ‘heroes-user’ role and save

add ‘heroes-admin’ role and save

Now we have two roles for our spa-heroes-backend application, heroes-userand heroes-admin.

‘spa-heroes-backend’ roles after adding ‘heroes-user’ and ‘heroes-admin’ roles

We’ve created client-level roles. Let’s create app-user and app-admin Realm level roles and add a corresponding spa-heroes-backend roles(heroes-user and heroes-admin) to them.

1. Click on the Roles option from the left panel.
2. Select Add Role and add a new role app-user .

add ‘app-user’ role and save.

3. After save, enable Composite Roles, Click on client roles and type spa-heroes-backend . Select heroes-user from the available roles and click on add selected.

Assign ‘heroes-user’ client Role to ‘app-user’ Realm Role

This configuration will assign spa-heroes-backend heroes-user client role to the app-user realm role. If you have multiple clients with multiple roles, pick and choose the required roles from each client to create realm roles based on the need.

Follow the same steps to create the app-admin user but assign heroes-admin client role instead of heroes-user role.

Assign ‘heroes-admin’ Client Role to ‘app-admin’ Realm Role

We are done with the Role-based configuration in the KeyCloak. Next, we will assign these Realm roles to the user.

Create Users

Users are entities that can log into your system. They can have attributes associated with themselves like email, username, address, phone number, and birthday. They can be assigned group membership and have specific roles assigned to them.

We’ll map the user to the role, which is called as user role mapping. A user role mapping defines a mapping between a role and a user. A user can be associated with zero or more roles. This role mapping information can be encapsulated into tokens and assertions so that applications can decide access permissions on various resources they manage.

Let’s create the following users and grant them app-user and app-admin roles for testing purposes.

• user1 with app-userrealm role
• user2 with app-adminrealm role
• user3 with app-user& app-adminrealm roles

1. From the menu, select Users → Add User.
2. Fill the required information, as shown in the image. Make sure to ON the Email Verified field.

Click on ‘save’ after filling the information.

3. Now go to credentials, set password for user1, and hit the save button. Make sure you set Temporary to OFF. For simplicity, lets set a password to ‘user’ for all users.

Click on set password

4. After setting the password, Go To Role Mappings tab to assign realm roles to the user. For user1, select app-user Realm Role from Available Roles and click on Add Selected. Hence, app-user role is assigned to the user1.

select ‘app-user’ Realm Role from the Available Roles and Select Add Selected

5. Repeat the same process for user2 and user3. For user2, select app-admin and for user3, make sure you select both app-user and app-admin.

Create user2, set password and assign ‘app-admin’ Realm Role to it

Create user3, set password and assign ‘app-user’ and ‘app-admin’ Realm Roles to it

Whoa! We are finally done with the configuration of the KeyCloak. It is a bit of a hassle for the first time but once you get used to the KeyCloak, you will find it pretty easy.

To sum it all, in part one of the tutorial, we have created Client Roles heroes-user and heroes-admin , created Realme Level roles app-user and app-admin, added Client Roles to the Realm Roles so that if app-user role is assigned to some user, it’ll automatically inherit heroes-user role and will get access to the application.

In Part 2 of this tutorial, we will create a secured spring boot REST API and connect it to the KeyCloak so that only authorized users are allowed.