How to integrate Keycloak with Angular 10?

hey guys and welcome to this brand new episode on angular today we are going to see how to integrate key clock with the angular application for those who are not familiar with the key clock key clock is an open source identity and access management solution with the help of key clock you can manage your users their roles their groups and the permissions under one roof in fact key clock provides you a plugable architecture wherein you can integrate social logins you can have a federated identity access management and you can even customize the themes that comes with the key clock all of this using one single software well enough of a key clock let's go back to our main topic so i created a sample project in the visual studio code let me just open the app model.ts so this is a very simple angular application inside that i'm using router and the router definition is done using the routes array you can see that there are three primary paths the first part is the default one wherein we are redirecting to a welcome module and then there is a profile path wherein we are redirected into a profile model looks pretty simple all right let me just go back to the chrome browser so that we can see how our application looks like let me just type the url of our application it is localized colon 4200 you can see that it is displaying a home page from the welcome module if i'll just click on show profile it will take us to a profile page on this profile page we have a message and along with that there is a button called as logout if i just click on this logout button nothing will happen because we are yet to integrate key clock within our angular application to integrate key clock with the angular application we need to make use of the adapter just head over to a site called npmjs.com and you will find a package called as key clock hyphen angular this is actually a wrapper around the base adapter provided by the key clock site if you just scroll down you will find the installation instruction so the very first command is npm space install space key clock hyphen angular this is a wrapper and the base adapter is key clock hyphen js once you install this the set of required dependencies will get configured within your project let me just quickly show you the package.json in our application i will just scroll down and i will locate the package.json file you will see that both the dependencies are already configured we are having eight point zero point one as a version for the key clock iphone angular and for key clock js we have eleven point zero point one i have also installed key clock on my local machine and it is started using the default set of configuration so let's go ahead and integrate our key clock angular module within our application so just go back to the npm.js site and if i just scroll down you will see that there is a setup section and inside that there are some set of instructions that we're supposed to follow the very first thing that we're supposed to do is to create this function in our application so i'm just going to copy this particular code i'm just going to copy this function definition i will just go back to the visual studio code and i'm going to create a folder inside app name this folder as utility because this particular folder is going to contain various functions or the classes which are required in order to integrate the key clock i'm going to name this particular file as app indian.ts let me just paste the code that we just copied and i will just format it we'll see that there are a bunch of errors which are getting reported don't worry about it we are going to fix it in a while so the first thing that we are going to do is to export this function then we are supposed to fix the dependency which is required for this function so i am going to import it from the key clock angular model so we have to import key clock service from k clock angular that looks good now there is another error we are supposed to return the function type so the returning value is actually a function which is going to return a promise and the promise is nothing but a type of boolean that looks good seems the compilation error has gone now let's move ahead and look at this various configuration the very first thing that you are supposed to provide is a key clock url which should be used for the authentication now in our case the key clock is running on the local machine itself and hence the url is pointing to the low close as well as the port of the key clock is eight zero eight zero followed by the slash auth path the next thing that is required is the realm then in a short while we're just going to create that as well as we need to define the client which will be used in order to access this particular functionality within our application note that you can create multiple clients within a single run so one of the client could be used for the rest apis the other client could be used similar to what we are doing in our case so it could be used for the ui project the following section is very much specific to the sso we are not going to use that so let me just remove those particular options and i'll just save our file let's go back to the npm.js site so that we can proceed with the remaining set of options the next thing that it asks us to refer to that particular initialization function as well as import the key clock angular module within the app model.ts i will just copy this particular block let me go back to the visual studio code and i will open appmodule.ts the first thing that i'm going to do is to import the keyclock angular model so let me type keyclock angular module this may not show you the hints so the first thing that we are supposed to do is to just write the import statement we're manually going to import it and this has to be imported from the key clock angular let's go ahead and also initialize this provider's block so this provider block is nothing but a callback method which is available within the angular project wherein we are indicating that whenever the application gets initialized it is supposed to use the function that we're defined just now now again we may not have this content assist feature working fortunately for key clock service it is working but for our function it is not working properly so we are manually going to import it so let me write the import statement import the key clock function that we just created from the utility file or the utility folder that we have so the folder is available inside app and then utility and the file name is app.init let me just save it looks good our project has been compiled let me just go back to the chrome browser and access the key clock url i will open a new tab type localoscolan8080s this is the default url for the key clock administration console let me just click on the administration console option the username is admin and the password is admin this is the default username password that i have configured and that is why the chrome in displaying me some error will just ignore that for the time being by default key clock comes with a master run we are not going to touch that we are going to create our own realm so i'll just click on this add realm button we're going to name our realm as angular hyphen web so i'll just type angular hyphen web let me just click on the create button this will create our realm and it will show a successful message we're going to leave the rest of the options as is and we're going to click on a link called let's clients this will help us to create the client for our web application click on this create button we need to name our client so the client id is going to be angular web client so angular iphone web hyphen client the client protocol is going to be open id hyphen connect the root url is going to be the root url of our angular application so it has to be http colon slash slash localhost coolant 4200 let's just save this configuration it will successfully create our client we will see this various options which are getting populated let's go ahead and create our very first user so i'll just click on the users and then i'll click on the add user option let's name our user as john and the email address at john again maybe john at the keyclock.org first name is john last name is key clock okay we are going to leave this rest of the options as is let's not play with it click on the save button and this will create our user now we need to set the password for this user so i'll click on the credentials tab go to this password section type the password as john and turn on this temporary option click on the set password set password again and this will create our users successfully now let's go ahead and configure these values within our angular application so i'll just go back to the visual studio code and you'll see that inside app.net.ts we're supposed to define the run let me just go back to the key clock so that we ensure that what run that we are using so the real name is angular hyphen web the name is angular hyphen web just go back to the client section you will see our client is already defined over there angular hyphen web hyphen client so i'm just going to replace this your client id with the name of our client it is angular iphone web hyphen client now we are supposed to also configure some additional configuration the reason is that when the key clock issues are token we are supposed to make sure that whenever the user is interacting within the application the token has to automatically refresh it should not expire and it should not force user to enter his credentials again and for that purpose we are supposed to initialize an attribute called as init options inside this type check login iframe set the value as true so key clock adapter will actually create an iframe within the application and it will keep on refreshing that iframe for a certain interval that interval can be specified using the check login iframe interval let's just set it to 25 this is the seconds and i'm just going to save this so our model will get compiled and if i just go back to our chrome browser okay now this one the second one okay and let me just refresh the page you will see that our welcome page is getting displayed and if i click on show profile nothing is happening yet the logout function is also not working because there is one more step that we're supposed to do so if you just go back to the npm site and just scroll down it talks about an authentication guard so those who are already coded within the angular must be knowing what this authentication card does it actually helps us to write a custom logic which will get executed before a particular url or a component is getting loaded so the same way we're supposed to create an authentication card for our profile component so let's go ahead and copy this particular code from this site let me just scroll down and just copy this code and i'll paste it into a visual studio code for that i need to first create a file then just name it as app dot guard dot ts and we are going to paste the code over here you'll see that there are some errors which are getting displayed so the very first thing is that we are supposed to fix this particular functionality all right it is returning a promise of type boolean looks cut and we are supposed to press and enter over here so there is no formatting related issue okay so we have fixed all the errors within this authentication card and let's refer this authentication card inside our app routing model because that's the place wherein we have defined all the routes now let's assume that we want to load the welcome page but whenever the user tries to access the profile page is supposed to be authenticated user and hence we are going to initialize an attribute called as scan or activate at this profile module level this requires an array and let's refer to our guard so the card name is odd card so let me just copy that i'll just paste it over here let's see if it is getting imported no again there seems to be some problem so i will just write the import statement manually it is located inside the app folder inside that there is utility and then the name of the file is app card okay let me just save it and if i'll just go back to our chrome browser okay it has already started showing this login page let me type the url again okay so this welcome home is getting displayed and if i click on show profile it will take us to this login page that looks good let me type the username at john the password is john and click on login and again ignore this particular warning you will see that our profile page is now accessible but it is just displaying a blunt hi message and then there is a log out which is not at all working let's go back to the visual studio code let me open the edit profile component html wherein we are using this user variable you will see that i'm using the data binding expression out here and i'm referring to a user variable and we have also seen that log out button this logout button is invoking a function called as logout i will just open the ts file wherein you will find these variables have been initialized to an empty value as well as our logout function doesn't have any logic let's go ahead and put some juice into it so i'm going to initialize this user variable using the key clock service but that key clock service is not imported so let me first import that service into the constructor key clock service the type is key clock service okay that's done let's just use that particular service this dot key clock service dot we need to get the user name so there is a function called as get username as well as on the logout we want to log out the user so there is another utility function on the key clock service and it is called as log out now let me just save this particular code and if you just go back to the chrome browser we should be able to see the user but it is not getting displayed it is still showing an empty value what went wrong okay i'll just explain it in a bit while so i'll just go back to the visual studio code so to fetch the actual username let's go ahead and open the app init.ts inside this we are supposed to set one more attribute i'll just press ctrl spacebar and it will show us a property called as load user profile at startup we're going to set the value as true let me save it what this particular property will do it will actually load the user profile information whenever the key clock performs the authentication okay so you will see that the username is getting displayed and now we're supposed to write the functionality for the logout i'll just go back to the visual studio code inside this we have already called the logout function so that should work and what will happen if i just click on this logout button it will actually take us back to the key clock login page what if we want to change this particular functionality and we want to show our welcome page for that particular purpose just go back to the visual studio code and this logout function actually accepts an optional argument i'll just move over mouse over the logout function it will say that it requires a redirect url which is an optional parameter so if i just type single quotes inside that i'm going to provide the url for our main application i'll just save it let me just login again to our application this will show our welcome page click ok all right and if i'll click on the logout button this time it will take us to the welcome page so that looks good we have integrated key clock with our angular application we also use the authentication card to protect some of the restricted areas of our application but displayed the username and finally we are able to redirect on the logout button to a desired page that we want so that's all for this particular video we're going to explore additional options in the upcoming videos make sure that you subscribe to this channel and click on the notification bell to get the updates till then take care and build something [Music] you

Channel: CarbonRider

Views: 11,138

Rating: 4.9666667 out of 5

Keywords:

Id: aykr98e7PlM

Length: 18min 4sec (1084 seconds)

Published: Sun Oct 18 2020