This tutorial shows the process of integrating Keycloak with an Angular 4 web application. This is part 1 of a multi-part tutorial series.
Background – Keycloak
Every enterprise solution requires a mechanism of security/access management in some form or another. One attractive solution developed and maintained by Red Hat is Keycloak. Keycloak is an open source Identity and Access Management solution which aims to secure applications and services with little to no code.
Some Keycloak Features include:
- Single-Sign On (SSO)
- SSO can be defined as a property of access control of multiple related but independent software systems. In a basic SSO web service, an agent module on the application server (such as Keycloak) retrieves the specific authentication credentials for an individual user from a dedicated SSO policy server, whilst authenticating the user against a repository or database. An example of a repository directory can be a Lightweight Directory Access Protocol (LDAP) repository.
- Kerberos Bridge
- Kerberos is a network authentication protocol that was designed and developed by MIT (Massachusetts Institute of Technology). The software was designed to provide strong authentication for client/server applications by making use of secret-key cryptography.
- Identity Brokering and Social Login
- Modern applications sometimes provide us with the means to authenticate by making use of our social network login credentials. With Keycloak this feature is super easy to enable. All you need to do is to log into the Keycloak administrator console, and enable which social login system you want to support. Social login systems such as GitHub, Facebook, Google, and Twitter are supported. No code changes are required when you want to make use of this feature.
- User Federation
- Keycloak has built-in support to connect to existing LDAP or Active Directory servers. You can also implement your own provider if you have users in other datastores, such as a relational database.
- Often this is referred to as Identity Federation, which basically means that you are linking a user’s authentication data and attributes across multiple distinct identity management systems.
If you’re interested in reading up on more awesome features of Keycloak, simply check the closing thoughts section for this part of the blog series.
Background – Angular JS
Angular JS is a JavaScript based framework used for developing web, mobile web, native mobile, and native desktop applications.
There is a fundamental difference between Angular 1 and Angular 2+. It’s important to note that Angular 2 is written entirely in TypeScript (which is developed and maintained by Microsoft).
TypeScript is a superset of JavaScript which comes with numerous advantages over plain JavaScript. As TypeScript is a superset of JavaScript it means that all JavaScript code is also valid TypeScript code. In fact, the TypeScript compiler (which coincidentally is also written in TypeScript) will compile all valid TypeScript code back to JavaScript that can be executed on any JavaScript engine in any host, such as a modern web browser. So basically Angular 2 was a “complete” rewrite of Angular 1, whilst keeping the best parts of it, as well as introducing a host of new features. Angular 4 is yet another iteration of the Angular framework.
You might ask “Well what happened to Angular 3?”. The simple answer to that question is that some components of Angular 2 were already in release version 3. So in order to provide a more cohesive and structured environment going forward, the Angular developers decided to go with Angular version 4. All the components were updated to base version 4, and can now work on version increments as the framework grows. As with Angular 2 the developers took the best parts of Angular 2 and extended them into the new version, as well as providing us with new features. Angular 4, however, isn’t a complete rewrite of the framework, and it’s backwards compatible with Angular 2. That doesn’t mean you shouldn’t first investigate breaking changes before migrating to Angular 4.
Why Use Angular?
Some of the advantages of Angular version 2+ include:
- The framework provides developers with the tools to develop and architect enterprise-scale JavaScript applications. The framework also provides cross platform compatibility.
- TypeScript allows for an easier understanding of injection by making use of decorators. It also provides for an object-oriented development approach in the front-end environment.
- TypeScript is a strongly typed programming language, which allows us to specify a specific type value for almost everything.
- Speed and performance – This includes code generation, universal back-end support, and code splitting.
- Productivity – This includes making use of templates, the Angular CLI, and intelligent coding in IDEs.
- Testing – You can write unit tests as well as end-to-end scenario tests.
If you’re interested in learning more about the Angular framework and its features simply check the closing thoughts section for this part of the blog series.
Background – Angular – Keycloak blog series
This blog series will comprise several parts, as it is quite lengthy. It will be an ongoing blog series with various parts added in future blog posts. A short road-map of what’s planned can be found in the list below.
- Part one in the series serves as a short introduction to Keycloak and Angular JS. We’ll download and install the Keycloak framework for use in part two.
- In part two we’ll focus on setting up and configuring the Keycloak environment.
- In part three we’ll focus on setting up and configuring the Angular environment.
- In part four we’ll continue working on the Angular project by installing Bootstrap v4 and integrating Keycloak into the project.
- In parts five and six we’ll start off with the basics (such as simply displaying the current logged in user’s username in a welcome message on the web browser, then we’ll move into more complex implementations (such as making use of the KeycloakHttp class to intercept all HTTP API calls.
Downloading and Installing Keycloak
Navigate to the Keycloak website and click on the downloads option in the menu – this will take you to the downloads page where you’ll find sections describing different types of Keycloak distributions for you to download.
For this blog series I’m going to download the Server
distribution. At the time of writing this blog the server distribution is the very first option under the Server
section. Download the ZIP binary to a directory of your choice and simply extract the folder inside. For more information on which binary to download see the diagram below.
Once you’ve successfully extracted the Keycloak distribution, we need to start the Keycloak service in order to create a new realm and configure it so that we can interact with it via our Angular application.
Keycloak supports cross-platform implementation; on different operating systems you may need to execute the service in a different way. The file that we are looking for can be found in the bin
directory, its name is standalone.bat
(if you’re using a Windows OS) and standalone.sh
(if you’re using a MacOS or any *nix based OS).
Execute the standalone
file; you should now see a Terminal or Command Prompt window popup which will serve as the Keycloak server console from now on. Verify that the Keycloak server has started by checking the output in the Terminal or Command Prompt window. Keycloak’s default listening port is on port 8080. An example of a successful Keycloak startup can be found in the code block below.
INFO [org.wildfly.extension.undertow] (ServerService Thread Pool -- 65) WFLYUT0021: Registered web context: /auth INFO [org.jboss.as.server] (ServerService Thread Pool -- 61) WFLYSRV0010: Deployed "keycloak-server.war" (runtime-name : "keycloak-server.war") INFO [org.jboss.as] (Controller Boot Thread) WFLYSRV0060: Http management interface listening on http://127.0.0.1:9990/management INFO [org.jboss.as] (Controller Boot Thread) WFLYSRV0051: Admin console listening on http://127.0.0.1:9990 INFO [org.jboss.as] (Controller Boot Thread) WFLYSRV0025: WildFly Full 10.0.0.Final (WildFly Core 2.0.10.Final) started in 9701ms - Started 441 of 802 services (529 services are lazy, passive or on-demand)
Once the Keycloak service has started we need to navigate to the Administrator console in order to log in and to create a new custom realm which suits our purposes. As can be seen in the code block above the registered web context is /auth
which means that we need to navigate to http://localhost:8080/auth to access the Keycloak Administrator console.
If you’ve never interacted with a specific version of the Keycloak server distribution before, you’ll need to supply an administrator username and password (this is only for the very first time), after which you’ll make use of the username and password to log into your administrator console every time.
Click on the Administrator Console
option on the Keycloak Web Portal’s homepage. Log into the administrator console by providing your credentials. If you can log in successfully and get a page which resembles something like Manage Realms, you’re all set.
Closing thoughts for Part One
In this part of the blog series we’ve covered quite a lot in terms of background knowledge on both Keycloak and Angular JS. We’ve also made a good start on setting up the Keycloak environment. In part two we’ll continue where we left off by creating a new realm, clients, users, roles and more.
If you want more information on Keycloak or Angular you can visit either of these two links to read up, practice and improve your skill-set.
- Angular JS: https://angular.io/docs
- Keycloak: http://www.keycloak.org/index.html
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.
Related Reading
If you enjoyed this post, you may also be interested in: