Integrating Keycloak with an Angular 4 Web Application – Part 4

If you haven’t read the previous parts of this series:

Background – Angular – Keycloak blog series Part 4

Welcome to part 4 of the blog series called Integrating Keycloak with an Angular 4 web application. Before we continue where we left off in part 3, let’s do a quick recap of part 3 as well as what we’ll cover in this part of the series.

In part 3, we discussed some background information on Node JS, Java JDK and the Java JRE. We covered installing Node JS, installing Angular CLI, and generating a new Angular project by making use of the Angular CLI. Let’s get to it.

Installing the Bootstrap Dependency

We’ll make use of the Bootstrap framework to take care of some critical aspects of the CSS (Cascade Style Sheets) and HTML (Hypertext Markup Language) components of the Angular web application. You don’t have to make use of this if you don’t want to, however, this will enlighten you on how to include third party libraries in your Angular project as well as how to include them in the WebPack builder configuration file.

According to the Bootstrap website: Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web. In terms of HTML, CSS and JS frameworks, Bootstrap and Foundation lead the pack and provide very similar options as frameworks.

To install Bootstrap as a dependency we’ll make use of a Command Prompt or Terminal window to install the library via the npm command. Type in the following command and execute it

npm install bootstrap@next --save

Once the installation is completed you should see a new package in your node_modules folder called bootstrap. The next step is to add the JavaScript and CSS files as references in the .angular-cli.json file. This will enable the WebPack compiler to include the framework when it compiles the project.

Open up the .angular-cli.json file and navigate to the styles object array. There should be one entry already added called styles.css. This is the base styles file for the Angular project and was generated along with all the other components when we created the project via the ng new command. Add the Bootstrap CSS reference as can be seen in the code block below.

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.css",
   "styles.css"
]

Navigate to the scripts object array (which should be empty) and add the Bootstrap JavaScript reference as can be seen in the code block below.

"scripts": [
   "../node_modules/bootstrap/dist/js/bootstrap.js"
]

If you execute the command ng serve now, you’ll already see the difference, but we’ll talk about the ng serve command in more detail later on.

 

See if you can do the same with jQuery and Popper.js (Bootstrap uses jQuery and popper.js as dependencies) – *You need to add jQuery and Popper.js before bootstrap.js*

 

Installing the Keycloak Adapter

There are mainly two ways to integrate the Keycloak JavaScript adapter into the system.

  • Pre-bundled with the Keycloak server distribution
    • The adapter and can be retrieved directly from the server’s endpoint at http://localhost:8080/auth/js/keycloak.js
    • According to the official Keycloak documentation this is a best practice method, as the JavaScript adapter version will always match the server’s version.
  • Include the JavaScript adapter as a dependency in the web application
    • This is by no means a wrong way of integrating the adapter into the web application, all it means is that when you upgrade the Keycloak server, you’ll also have to update the adapter version locally in your web application project in order for the versions to match up.

I’ll be making use of the second method (Include the adapter as a dependency) as I won’t upgrade the server for some time.

To install the Keycloak JavaScript adapter as a dependency we’ll make use of a Command Prompt or Terminal window to install the adapter via the npm command. Type in the following command and execute it.

npm install keycloak-js@latest --save

Once the installation is completed you should see a new package in your node_modules folder called keycloak-js. As with the Bootstrap framework the next step is to add the JavaScript adapter as a reference in the .angular-cli.json file.

Open up the .angular-cli.json file and navigate to the scripts object array. Add the Keycloak JavaScript adapter reference as can be seen in the code block below.

"scripts": [
   "../node_modules/bootstrap/dist/js/bootstrap.js",
   "../node_modules/keycloak-js/dist/keycloak.js"
]

Keycloak Service and HTTP Code

We won’t actually start coding in this part of the tutorial, we’ll reserve that for the next part. What I’d like to do now is to create the necessary files for Keycloak that we will be using in the next part.

Navigate into the source directory of the Angular application (src). There should be one package called app. This package is the default generated package for the application when you make use of the ng new command to generate a new Angular CLI project. Create a new package inside the app package called keycloak. This is where we’ll store all our Keycloak related code files.

Within the keycloak package create two new TypeScript files namely:

  • keycloak.http.ts
    • This will serve as our HTTP interceptor class use in a future part of this blog series.
  • keycloak.service.ts
    • This will serve as an Angular service based on Keycloak related configurations, such as initializing the link between the Keycloak server and our web application.

An example can be seen in the figure below.

Building the application (Dev Server)

To make sure that our web application compiles and that everything is in place we can simply make use of the ng serve command. This is an Angular CLI command; the command builds the application and starts a web server. This is a common command used for development purposes. When a file change is detected the application will automatically rebuild the changes and update the codebase on the integrated web server. If you have the web browser open on the web application’s page it should automatically refresh itself with the latest changes visible.

Closing thoughts for Part 4

In this part we’ve installed a couple of dependencies for future use. These include the Bootstrap v4 framework, as well as the Keycloak JavaScript adapter. We’ve also created a placeholder section in our project for Keycloak specific files that will be used in the next part. In the next part we’ll focus on implementing functionality for the KeycloakService as well as the KeycloakHTTP classes.

If you want more information on Keycloak, Angular JS, Bootstrap or Node JS you can visit the links below to read up, practice and improve your skillset.

If you have any ideas or requests for implementing any Angular 2+ features (in the context of this blog series), feel free to share it with us in the comment section below.

Installing jQuery, PopperJs as a dependency

Execute the following command in the console or terminal window.

  • npm install jquery@latest --save
  • npm install popper.js@latest --save

Amend your .angular-cli.json file’s scripts section to reflect the code block below.

"scripts": [
   "../node_modules/popper.js/dist/umd/popper.js",
   "../node_modules/jquery/dist/jquery.js",
   "../node_modules/bootstrap/dist/js/bootstrap.js",
   "../node_modules/keycloak-js/dist/keycloak.js"
]

Related Reading

If you enjoyed this post, you may also be interested in:

7 comments to “Integrating Keycloak with an Angular 4 Web Application – Part 4”

You can leave a reply or Trackback this post.
  1. Hello, I have read all your tutorial, and I am anxious to see the next part, I have been trying to integrate keycloak and Angular 4 for days, and I have a lot of problems.
    I do not want to go back to using angular 2, like most of the tutorials that are on the Internet, since a lot of my application I already did in angular 4.
    I hope to see the next part, already with the code. !!
    Very good tutorial !!.

    • Walther Smulders says: -#2

      Hi Fernando,
      Thank you for following the blog series thus far. Part 5 and 6 will be published shortly. In Part 5 I will provide a link with the complete source code. (Part 5 source code will include all updates until the end of Part 5, same with Part 6)

      • Hey, Walther
        Very good work on the tutorials, probably the best one I’ve seen on this topic (recommended to everyone I know). That’s why I’m interested when will you post the next one? I’m doing a project on the same problem, so would like to know how you tackled this since there aren’t many stable wrappers for Angular 2/4 for the keycloak.js adapter. And, since I’m a newbie, these types of tutorials come very handy to get a sense of whats going on and how to proceed with my implementation.
        Also do you have any other series of tutorials or blog posts concerning Angular (appart from here), cause if you do, I would like to read them.
        Looking forward to your reply, and can’t wait for the next one.
        Cheers 🙂

  2. Hi Walther,

    Thanks for the articles, looking forward to the next one.

    Can you tell me if the final sample work with IE9 please? We have corporate customers that use this browser and do not have the option of using any others.

    Thanks,

    Marc

  3. Great Tutorial! Thank you very much!

    Too bad it stops when it is getting interesting… I am having huge problems in implementing the keycloak.js (initializing and updating the token, etc)

  4. When is this tutorial session scheduled to be completed??

  5. have u compled the tutorial ? Ive an idea to implement keycloak service in AngularJs but not in Angular cli.

Write a Reply or Comment

Your email address will not be published.