Angular & Keycloak

Why Angular?

When we had to choose which framework to use for our frontend app, in the narrow circle was well-known trio Angular-React-Vue. After we made some research on which framework is the best one, we found out that there is no right answer to that question, there is just the best one for us. I feel free to say that some tiny things influenced our decision to use Angular. Some team members already had previous experience with Angular. Also, we prefer more strictly typed languages, ie typescript, over pure javascript. Also, we like the organization of the Angular application by component, which was quite enough to make a unanimous decision. We assume that you have the same opinion as we and that you have some basic knowledge and experience with Angular. (We use Angular 8).

If you are a newbie to this whole Angular story, we have to mention that they have really good documentation and you can find everything you need to get started on their official site.

Angular & Material Design

Before we get to Keycloak, just a few words about Angular-Material tandem. One of the decisions we had to make was also what kind of design to use for our GUI. At first, we wanted to experiment and make some mixture of Bootstrap and Material Design, but we figured out that this would probably make an atomic bomb 💣. So, since we could choose just one solution, the Material took a convincing victory. ” De gustibus non est disputandum” they said, but we like minimalism, simplicity, and elegance, and we just wanted to try it out. Here is the official documentation for Angular Material in case you want to go into it in more detail.

To install Angular Material just perform the command inside your projects terminal:

ng add @angular/material

The ng add will install Angular Material, The Component Dev Kit (CDK), and Angular Animations. You should also enable Angular’s animation system by importing BrowserAnimationModule into your app.module file.

Also, to get everything working properly it’s required to install HammerJS by executing the command:

npm install --save hammerjs

Now import HammerJS by adding this line in the main.ts file:

import 'hammerjs';

Angular Material has four available prebuilt themes (deeppurple-amber, indigo-pink, pink-bluegray and purple-green), which you can use by importing following line into your styles.css file :

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

As you can see, we chose deeppurple-amber. You should keep in mind that good practice is to put all material components into one module, separate from your main app module, but don’t forget to include it into the app module. There is a bunch of components in our material module, and it looks like this:

Here is an example of our inquiry page:

Keycloak Service

We hope you set up a Keycloak server properly, so we can move on. If not, before you continue reading, here you have an explanation of how to set it up step by step.

Well, we’ve read a lot of tutorials and went through many difficulties until it all actually worked, but as it always happens when we finally come to a solution, we realize that this is not some great science. We created the service and connected it to the Keycloak server.

But what is actually a service? It is typically a class with a narrow, well-defined purpose. It should do something specific. The main purpose of our service is to communicate between our application and the Keycloak server.

It is good practice to have a separate folder: services under the app folder in your project, so you can keep them all in one place. In your VS Code Terminal (or whatever you prefer to use), navigate to folder services, execute the command :

ng generate service keycloak

It would create two files for you. The one with a .ts extension is important for us. Here you can see how our service looks like:

Also, you shouldn’t forget to install angular-jwt by executing the command :

npm install @auth0/angular-jwt

and include JwtHelperService into your keycloak.service file. Special attention should be paid on this config part :

const config = {
'url': 'http://localhost:8080/auth',
'realm': 'dumbonet',
'clientId': 'dumbonet-gui'
};

We set the realm and clientId as we named them in Keycloak setup. You can name them any way you want, but you need to stay consistent with naming when you get to the service.

What we actually have here?

Probably, it may seem confusing to you to work with tokens, but we just did few things: took the token from Keycloak for a specific user, decoded it, and took username and role from the decoded token, so we know which pages we can display for that user.

Now, you should check if your Keycloak server is running, and through terminal start your angular app by executing the command:

ng serve

If everything is ok, the Angular Live Development Server is listening on localhost:4200, and you should open your browser on http://localhost:4200. Afterward, you will be redirected to http://localhost:8080/auth as you set in your keycloak service, and finally, you will see login form for your application :

OK we did it, the connection between our Angular app and Keycloak is established.

Do you remember our users Mirko and Slavko from the Keycloak tutorial? They are able to login here with their credentials. The next step is redirecting different users to different pages, but it is a topic for itself.

We hope you enjoyed and went through all steps successfully. In our next article, you will learn how to set up and build a blockchain network with Hyperledger Fabric. Stay tuned and happy coding 🤓.