Haven’t read part 1 yet? Read it here now!
Background – Angular – Keycloak blog series Part 2
Welcome to part two of the blog series called Integrating Keycloak with an Angular 4 web application. Before we continue where we left off in part one, let’s do a quick recap of part one as well as what we’ll cover in this part of the series.
In part one, we explored some background information regarding Keycloak and Angular. We then continued to download, install (extract), and start the Keycloak server; after which we logged in to the Administrator Console by making use of the administrator username and password combination for the Keycloak server. This leads us to part two of the series, where we’ll focus on setting up and configuring the Keycloak environment. Without further ado, let’s get started.
Creating a new realm on Keycloak
Assuming that you have your Keycloak server running and that you’re logged in to the Administration Console (see part one for more information), you should have an option to add a new realm by simply hovering your mouse over the Select realm or Master item on the top left edge of the screen. Click on the Add realm button. An example can be seen in the figure below.
Enter a new realm name and make sure that the Enabled toggle switch shows the value ON, then click on the Create button to create the new realm. Your realm name can be different than mine. Don’t use a name with spaces between letters, it’s bad practice and will result in potential errors at a later stage.
Once the realm has been created you can see all the available sections on the left-hand side of your screen in the administration sidebar. These options are broken up into two main groups, namely Configure and Manage. Both groups provide enough descriptive hints in their name to let you know what options fall under which.
Creating Clients on Keycloak
Click on the Clients item in the administration sidebar; doing this will show you a list of the already created clients for the specific realm. Bear in mind that when you create a new realm, Keycloak will automatically create default clients for that realm.
Click on the Create button to the far right of your screen. Keycloak will then present us with the client creation page. Enter a client ID and click on save (you can edit this in the next page). Once you click save you’ll be presented with the client edit page. We are only concerned with the Settings tab at the very top of this page for now.
I won’t go into detail on every option available on this page but rather focus on the ones that we’ll use. You can read through the Server Administration Guide for more information on the rest of the options available. Some of the values have already been populated automatically by the Keycloak application server. In the list below is a short description on each of the items that I’ll be using. My values will be displayed in BOLD for each item.
Enabled– a client has to be enabled in order for it to obtain access tokens or initiate a login. Make sure this option is turned on. (ON)Client Protocol– this is automatically generated because we specified the Client Protocol on the previous page; this also provides you with the same options as the previous page. (openid-connect)Access Type– you can choose which access type the client will make use of from a drop-down list. (public)- Confidential – this means that clients require a secret key to initiate the login protocol.
- Public – this means that clients don’t require a secret key to initiate the login protocol.
- Bearer-only – this means that clients are web services that never initiate a login.
Standard Flow Enabled– this option should be turned on by default. It enables standard OpenID Connect redirect base authentication with an authentication code. In essence this enables support for ‘Authorization Code Flow’ for this client. (ON)Direct Access Grants Enabled– this option should be enabled by default. It enables support for Direct Access Grants, which means that the client has access to the username/password combination of the user and can exchange it directly with the Keycloak application server in order to obtain an access token. (ON)Root URL– this is the root URL which is appended to other relative URLs. ( http://localhost:4200 )Valid Redirect URIs– this entails entering a valid URI pattern that a browser can redirect to after a successful login or logout. Wildcards are allowed here. (/*)Web Origins– Allowed CORS (Cross-Origin Resource Sharing) origins. To permit all origins of Valid Redirect URIs add a star to permit all origins. (*)
Click on the save button at the bottom of the page to save the changes you’ve made to the client.
Creating a User on Keycloak for a Client
If you want to make use of the Keycloak application server for the authentication of users, you need to add users to the Keycloak environment for the specific realm.
Adding users has the same workflow as clients. So click on the Users option under the Manage section. You will see a page which I’d like to call the users overview page. From here you can list all the users for this realm and perform various options such as adding new users.
Click on the Add user button at the far right of the page. You will be redirected to the Add user page. You can specify various options for each user. In the list below is a short description on each of the items that I’ll be using, my values will be displayed in BOLD for each item.
Username– this will be the username for the user, it is a required field which means that you must enter a value here. (walther_smulders)Email– this is the user’s email address. ( walther.smulders@35.55 )First Name– this is the user’s first name. (Walther)Last Name– this is the user’s last name (Surname). (Smulders)User Enabled– this option is turned on by default. It has to be enabled for a user to be able to log in. (ON)
Once you click on the Save button your new user will have been created and you’ll see that the ID field has a value now (which is a hash-based value that the Keycloak server automatically assigns to this user). The Created at field will also have a value (this should be a timestamp value of when the user was created). Now we need to give our newly created user a default password to use when they log in for the first time. Upon creating the new user successfully, you should now have even more options to manage the specific user, as can be seen in the figure below.
You will have to navigate to the Credentials tab. You’ll be presented with a page which consists of two sections. The Manage Password section is where you can manage the user’s password, and the Credential Reset section is where you can reset a user’s credentials.
In the Manage Password section, specify the user’s default password and confirm it. There is a third field (Temporary). This field is enabled by default. Once enabled the user will have to set their own password when they log in for the first time. When disabled, it is the permanent password of the user until they, or you (as the administrative user), change it at a later stage.
Once you’ve entered the user’s password, a red button will appear. In order to save the user’s password, click on the Reset Password button, a modal dialog will come up, asking you if you are sure you want to change the user’s password. Click on the Change password button to confirm the changes.
Closing thoughts for Part Two
In this part of the blog series we’ve covered quite a lot in terms of setting up and configuring the Keycloak environment. In the next part we’ll continue where we left off by making sure the Angular environment is set up correctly. We’ll also create the Angular project and do some configurations.
If you want more information on Keycloak or Angular you can visit the links below to read up, practice and improve your skill-set.
- Angular : 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:
