Single Sign On App with Angular and Keycloak Authorization Server

[Music] what's going on youtube my name is henry and i'm back here again with another video tutorial for you guys so in this tutorial i'll be showing you guys how you can create um a single sign-on application using angular and we're going to be using quick look as our authorization server now um you have many choices for creating single sign-on applications you can use um otka i already have a video about odd car in my channel and if you want you can check that out i'm going to leave it on the description um you can also use key cloak now key cloak is um open source and you can run it on your local machine as opposed to odd card that runs on the cloud so i like kick local very much and i'm going to be showing you how you can set it up in this tutorial so you also have other options like azure um ad so the azure cloud platform you also have google's cloud platform i also have a video on this channel showing you how to do authentication with firebase you can check that out as well but in this video we're going to be making our single sign-on application um using angular and key cloak as our authorization server and i hope you would enjoy it guys so i have the application right here is just a very simple application and i'm running it on the default um port on angular as usual i'm running it in incognito mode um so you could see um the login in in action so it's just a simple application that says welcome to the sso application it has a nice bootstrap navigation bar and all of that but the main thing i want you to take from this application is how we could uh set up the single sign-on or login um in angular and apart from the authorization server we're going to be using um the angular library called angular or 2oidc and we're going to be using that with our authorization server to um to configure the application now let me just go ahead and show you how the application is working so um you get excited for the tutorial just the way i am so we have the application right here and i'm going to click on this login link and now it's going to redirect me to the key clock login page so key clock provides you with this nice um login page you can configure it yourself and put your own design to match up with your application but to keep things simple i'm just going uh with the default so right here you can see the name of the rim that i'm using on key cloak i'm going to show you how to set this up in the tutorial right so i have my username and password which i already have um set up on click key cloak and i also have uh the opportunity to sign in with um a social authentication provider like github you also can set it up for facebook and google but i just went with gito because it's very easy to register an application with github so um i'm going to sign in with my user name so i'm going to put my username the one i configured with key cloak and that's it and then i'm going to put my password and now it's going to redirect me to the application now i'm redirected to the application nothing special or fancy you see i get redirected to the same home page but then you see this home link that wasn't there at the beginning so if i click on this link you see a message telling me welcome with my username right here um so that that's it guys um you see i can log in um to my application uh and i configure this uh login uh using a key cloak authorization server and angular oidc or to library right so i just have welcome with my name and at the end of it i can log out and you see that home page link is gone and the logout link changes to the login before we get started let me just show you how i can sign in with the social account so i can also sign in with my github now this is going to redirect me to the default login page for github and here i can enter my username and i'm going to enter my password and if i hit sign in oops okay it's going to now redirect me back um to our application so same thing um like before um i'm redirected to the application and i have this home page that tells me welcome right so that's it guys um not a very fancy application but um making a single sign-on login functionality it's very important these days in securing application and you have a lot of authentication providers um providing this feature and it's a good thing to a good knowledge to have in your your programming toolbox so i hope you guys would um enjoy this tutorial and learn uh one or two things for me thank you for watching all right guys so the first thing that we want to do um in setting up our application is that we want to install um kick look so i already have it installed on my local machine but i'm just going to guide you on how i did it so if you go to geeklog.org this is the the website for kick look and you go to the downloads page you're going to see the different options for which you can uh download key club to your machine and i actually use the first one which is the distribution provided by whitefly so i downloaded the the zip version and then i unzipped it um into my my local directory on my my computer right so that is one way of installing kick look another way of installing kick log which i also like um is to do that with docker right so you pull the docker image um to your machine and then you can run it on your docker container container so this is a good way to install kick lock if you want to you know push it to docker or or just deploy the somewhere so for you to do that you can go to this uh page so this is the full documentation of key cloak you can learn a lot about it but i wanted to take you to this page so if you go to getting started slash getting started with docker i'm going to leave all this link um below on the description and you're going to see um how you can start up the the docker uh container with key cloak so um you can go ahead and try this if you have any issues with it you can drop questions on the comment but um the easiest way to do it is just to download it um to your um local machine and run it from there that's the way i'm doing it now and um i think it's good to do it this way if you have any other questions about installing it with docker please drop it in the comments so i already downloaded it and it's in my downloads folder um i'm just going to open the terminal because i don't remember where i kept it so it's here um i'm just going to stop it now i stop the server and as you can see if i go back from that bin directory you see that i downloaded it and i unzipped it and i have it this is the zip right here and i have it i unzipped it into this directory so that's the dev directory i wanted to show you that okay so it's document there so if i go there i have documents and i have dev right here so this is the zipped version what i downloaded from the website then i unzipped it to get this and then i moved into the bin folder and then there is a standalone uh shell script and when you run that script that is how you can start up the key cloak server all right so this is how you can set up keep looking your machine so it's very simple you download the zip file you unzip it you put it in any location or directory you like on your your machine and then you run inside the bin folder you can run the standalone.sh if you're using um a linux distribution or you're on a mac like me and if you're on a pc you can run the standalone.bat and this would start up your kickbox server so let's do that so i stopped my kick lock server i'm in my dev folder i'm going to go back to my key cloak and then i want to go back to the bin folder right and then i want to run that command with a standalone dot sh right so i'm going to hit on enter and this is going to start up my key cloak server it's just going to take some time to do its thing and as you can see it's running on localhost port 8080 right there right so my keyglo server is started and for me to um see it i need to go to localhost local star 8080 yeah so if i run this now it's going to take you to the key cloak uh console so you have welcome to kick look and you have the administration console so you want to click on the administration console and um so it's not the first time i'm logging in for you you might need to set up um your account your username and your password and then you can uh sign in but i already uh set that up um i don't think that that was difficult so um it's going to give you an instruction of how you can set that up if you have any um issue on that you can go to the administration guide and i think there's some part here for um installation right so now i'm going to sign up my username is this and um i'm going to sign in with my password [Music] and now it's going to take me to my key cloak um dashboard and the the first thing you want to do when you uh log into the key cloak is you want to set up your room right so here you have a lot of options you can set up the client the scopes to roll but first you want to set up the ram now when i logged in the first time you saw that the the login had this ram at the top so this is what i set up there so if i just go back to my old application and then i i try to log in you see that i have my ram here so the first thing that you want to do is you want to set up a new room for your application and how to do that you have the master ram that comes with it so um when you set up a new account you get the master ram and then you want to configure a new ram so i'm going to click on add new ram and it's as easy as just adding a name and um clicking on create so um let's call this um um any name you like my sso applications for example you can come up with a better name and then you want to click on enable and create so that success and you see it uh automatically uh switched um to the ram that i just created which is this one my sso application now i have three rams i have a code with henry i have master and i have this my sso application ram that i just created so that's it um when you are creating a new ram for your application and that's the first step so um you can do some configurations here um you can change the name the display name html display name front-end url and so on the one that's really interested for interesting for me here when i'm doing the setup is the login part now in the login part you have the opportunity to set up if you want a user to register to your application if you want to enable forgot password remember me verify email and all of that good stuff also you have the part to configure how your token is generated right but you don't see this in the front end so this is the part that's interesting for me if i go back to this application you see that um with the ram for code with henry i um i enabled this remember me part um so this remember me dialog box is when you check it and you close your application by mistake and you open it and you're still logged in you still gonna be logged in but if you don't check it and you close your browser you're going to be um asked to log in again and forgot password it allows you to you know put back your username or your email um to enter um to change your password obviously so yeah so that's the the uh really interesting part for setting the ram so uh key cloak is really awesome in doing this uh security configurations for us so now that we set up our room the next thing that we want to do is we want to set up a new client for our application so when you want to configure sso the first thing is setting up your client and they have different names for it you can set it up in uh othka i think they call it um you create a new app integration um you create the new um register app registration in azure ad but here you're just registering a new client so whichever way they call it is the same thing you just want to create a new application that would integrate um to the sso application now we're going to give it a nice name so um let's call it the sso app like this you can come up with a better name and when you are on creating sso application there are two very popular um protocol that you are um going to have to choose between the first one is open id connect and this is the one i'm going to be using because our library that we'll be using with angular is also using that as you can see here this is our library that we'll be using um in creating this application it's angular or to oidc or two is actually the authorization framework that um give the user um authority to do something in the application and oid sees the authentication framework or protocol built on top of it that tells the application that who you are your your credentials so authentication tells the application who you are at uh authorization says what you can do what roles what authority you have um with the application yeah so that's just it um you have those two options when you want to set it up um i don't have um much um knowledge about samuel but open id connect is very popular now i encourage you to use this um as well right and then you want to put your root um url for your application now this is not compulsory so i'm going to just leave it blank now i'm going to hit on save and success our client application is registered so we have our client id when we want to get our token we can use that um you can give it the name let's say our sso application again this is not compulsory we can come up with the nicer name then i'm going to put here and you can also give it a description so i'm just going to copy that and paste it there um again not compulsory and um here you want to enable it and here this is where you want to set up the team um what you'll be using to log in so right here you see i have this nice kick lock team and if you want to set the base one the base one doesn't have um any default css on it so then you would use your um default styling to match your application but i'm going to go with the key cloak one and by default it's already using the keyglo theme so if you leave it uh blank it's going to use the key clock theme so you can choose kick look team or leave it default and again our protocol you have open id connect which is the newer protocol actually or you can use xaml so i like open id connect more so i'm going to use that and now the access type so over 2 is the framework that we are using here and or 2 has a different um grant types so you have a client credential or grant type that is usually um used when you want to communicate with one application to another application but the one that's mainly used when you want to communicate with a client application like angular is actually the authorization or code grant type right so we are going to be using the authorization code grant type um in this application and you have the also the enhanced authorization code grant type which is the recommended one for um angular application actually it's more secured um and it's the one recommended when you're using um single page application so we have the authorization code grant type basically this allows you to send a request to your authorization uh server i'm going to make a demonstration of this very soon and then you get um an authorization code and with this authorization code you can um request an access token uh with your server it's usually a jwt token um with the bearer in front of it so sometimes they call it the br token um but yeah you have different grant types and if you want to use the the um or two authorization grant type which is the standard flow so if i um over under standard flow you see this enables um standard open id connect redirected based authentication with authorization code right so this is the one that we want to use and to use that you need to make this one public if you make it um confidential now you're going to go um if i make it confidential i don't see anything now because i haven't saved it and then if i save it oh i need a redirect uri so let's just add a valid redirect uri and then we get back to that so i'm going to enter my redirect uri which is going to be http colon slash localhost colon 4200 yeah so this is going to be the home page of our application usually the home page of most angular applications by default and um also you want to configure course so this is for the web origin so when you're communicating with the backend application and the front-end application you need to configure the add the cross origin uh header to allow that communication be able to work so i'm just going to put an asterix there again it's not good for production application you need to put your full url there like this but i'm just going to put an exteriors to allow all applications from my local machine right so now if i save this i shouldn't have any error now so it's been saved and there you see this credential part so you can generate a secret um that you can use before you get your um authorization code right so um if you put it to confidential now you need to use that secret but if you just put it to public then you don't have to use that secret and you can come right here to the advanced settings and then you want to go to this proof key for code exchange right so this is the the method um that that allows the the client to um get a code challenge and this is the one recommended for front-end application and now you want to set this if you want that code challenge to be a plain text or you want it to be encrypted by this so i usually go with this one yeah so this is our our settings for the or2 right so this is how we're going to configure our um application server so before we go to the angular application the next thing let me just quickly save that the next thing i'm going to show you is i'm going to show you the authorization code flow how does this really work uh when you want to get the authorization code and get the access token so i'm going to be showing you that next so guys in order for uh me to show you how you can get the authorization code and get the access token i'll be using a postman to do the demonstration in this video but you can use any other [Music] client application um that you prefer and before i would do that i just want to go back to my advanced settings and i'm going to um um turn off the approved key for code exchange for now we'll be using this in our application but um for uh demonstrating the authorization code or grand flow i'm going to turn this off and then i'm going to show you how this is working um with the flow so now let's just turn this off and then i'm going to save that yeah so i'm going to save it so we have the pixie turned off and we still have the configuration as we had before so i'm going to bring in postman and i'm going to um enter the url for doing the authorization so um the url is going to be http because that's the protocol and we have a key cloak server running on local host 8080 slash art slash ram and our sso application which is my sso application in my case you might have named it differently so you use whatever name that you gave to it and here i'm going to enter the pro tool call and our protocol is open id connect open id connect and we want to go to slash alt so this is where we are doing the um authorization now we want to pass some parameters to that url the first one is our client id so you want to pass your client id and um if you have a client secret this is where you want to put it but we didn't configure client secret um we're going to put our response type and our response type here would be our authorization code which is just code and i can go back and copy our client id which is sso app so i'm going to copy that and paste that back and also we need um the scope um now we're going to talk more about the scope if you go back here you see you have a client scope and these are the default scopes that you have for your application you have email profile rows and then you can add your own scope so this scope is um what exactly you are authorizing the application to have access so if you put email for example the application is going to have access to your email and your profile and all of that your phone number address um so this is the scope that you're defining on oidc and you are giving your application these um accesses right so let me go back for now we're going to use um uh just two scopes let's say open id right so this is the default one and then we we can um put space to separate the scope and the other one i'm going to put is the profile these two scopes are there by default and another thing you want to put is your redirect it's called redirect uri and if you remember at the beginning we set this up um in our client and this is our sso app and we have set up our redirect url to be localhost 4200 right so we need to add that so that's our redirect uri and i'm going to put it the same http local host 4200 right and um the next thing i want to put is the state so i'm going to pass a state parameter and this state can be anything and when you want to get back the token you have to provide this same state what you are using um to send uh the request so that's it um yeah i just it just came to my mind that i configured this redirect uri with the other application so this might redirect me to the other application um that i have uh running so just in case we have an issue with that so when we have this all set up we want to copy this now and you want to open your incognito window and bring that over and when you paste that in the browser you're going to be redirected here so this is how you set up the login page you have the ram here you have the user name or email and then you also have the password but we haven't configured any user for our ram right i showed you at the beginning that you can configure users for your ram but we didn't configure anyone so we can go back here so this is our authorization server and we can go to the users part of the application and here we can add a new user right we can do this here or in the ram settings we can go to the login part and user registration we can turn this on so that we can have um a new user so let me just turn this on save it and let's go back to our application in the console if i refresh it now you see that i have new user register so if i click on this register you see all these um properties there for us to enter so i'm just going to quickly fill it my first name my last name my email let's just say code with hungry gmail.com um user let's just say [Music] 82 and for password you can give it um any password that you like i'm going to give it mine and confirm the password and now i'm going to click on register and yeah this is what i was saying now it redirects me to this home page because this was uh configured as my redirect uri and i have this uh running in on another application so what i'm going to do now is going to use another redirect uri because i already have that application running so if i go back to the client and i have sso app and i have redirect uri okay this is the one we want to use but for now let's just use something else let's just use http um let's just say let's go to google as our redirect uri on google.com and i'm going to save that but i think we need ww here okay let me just save this so we're using this as our redirect uri for now because we have that other application i showed you at the beginning running on localhost so it's um having a conflict with that um that's why you don't see the authorization code here so i'm just going to close it and bring back postman now i have to change back this redirect your i and if i remember correctly was https www dot google dot com and now we can try this again so i'm going to copy this and now i'll bring the incognito window and if i paste this now it redirects me to google because i was already logged in before when i did that registration but now what do we have we get back a session state and we get back a code have you seen right here we get back this code now this code is what is referred to as the authorization code um right here so this right here is our authorization code and now this authorization code can be um exchanged for the access token now the access token is what we use to represent the user so we get back the session state what we defined and we get back our authorization code now next up i'll be showing you how we can use this authorization code to get back the access token so guys now that we've seen how we can get our authorization code we want to see how we can use this authorization code to get an access token now this access token is uh what a user needs for the application to be able to identify and know who they are and what they can do in our application so previously we use this endpoint right here to get this authorization code so it's uh our um localhost uh 8080 um this is our default port for um our key click authorization server so went to slash alt rims and the rim that we named our application and we use the protocol open id and we use this ought to get the authorization code for the that's the authorization code endpoint and now we passed all these parameters to the body and we code it in our browser and we're redirected to login and we got the code from there now to um get the token we're going to use a different endpoint so i already tried it out here but we i'm going to walk you through it we're going to do it together so we need a post endpoint to get the token so right now we need the post we change it to get from from get to post and now we have the token endpoint which is similar to the endpoint you get the authorization code but at the end here i have token instead of bot um as you can see here and this is the one to get the authorization code now to get the token we need to pass some parameters um for the authorization code we're passing the parameters as the param so right here in our request but for the authorization code we're going to send a post request and we pass those parameters um in the body of the request so we're going to go to the body and we're going to go to um form url encoded and there we want to set the client id what we're going to pass so we want to client id we want the scope we want the redirect uri okay and we want the state so that states that we passed um to get the code so this value want to must be the same as the other one right and uh what else do we need so we need the authorization code itself right and and that's that's all we need so we need the client id if you set up the the client secret you want to add that here too as well but in this example we haven't set up the client secret and i showed you how to set up the the client secret in um um so if you want to set up your client secret you want to go ahead and change this access type from public to confidential and there you can set the um access um the client secret there you're going to have a place to set the client secret but here we are keeping it simple uh because later we want to use the pixie to secure our app which is the standard way for doing it with the single page application so we're going to leave it off to public i just wanted to mention that so you take note of that all right so these are all the parameters we need to pass to our body to be able to get our token so our client id um [Music] we set that to the sso app i'm just going to copy that and go back to postman and paste it there our scope i think we use open id and profile our redirect uri was google.com so i'm just going to copy it from what i did here before and i'm going to paste it here and the state has to be the same with what we use for our authorization code right here so i'm going to pass the state and the code is the one we're going to get from this uri so let's get a new code so i'm going to copy this like we did before you want to go to your browser i'm going to bring my browser this is in incognito mode i'm going to paste it and now i'm redirected to google with my authorization um code so i'm going to copy the whole endpoint that i got back and let me just open onenote um this way i was doing the testing and now i have the authorization code right here i'm going to copy it and go back to my postman and here i'm going to paste the authorization code here and i have everything set up and now if i hit send okay i get um that i'm missing one other parameter which is the grand type so i'm just going to add the grant type and our grant type remember is authorization code so i'm going to say authorization underscore code i think if you put code it's also going to work so here i put that and we have this is our access token so when you are securing uh an application you create uh you set up your authorization server for you to be able to retrieve this access token and this access token expires as you can see in um 300 i think milliseconds but yeah the um access token expires after some time then you want to get a refresh token or you want to get an access um token again so guys that's it that's how you can obtain um your access um token after you get the authorization code configuring the key cloak server now the next thing i want to show you is how you can get this access token um when you turn on the pixel so that we can understand how the the um enhanced authorization code flow uh grant is working and after we do that then we'll go ahead and use the library um as you can see this is not um so um easy it's a little bit complex so the best way to do this in your application is to use the existing library so if you are using um spring boot you have a library for that um in spring security if you are using angular you have the library which i showed which we'll be using um in this video so next up we'll be using looking how we can do the same thing um using uh pixy um the enhanced authorization code grant type all right guys so next i want to show you how you can use the pixi enhanced authorization code grant which is the the um or to grant type that is mainly used for single page application now it is used for single page application because you know in javascript um applications you can just check on the console and then you can be able to detect or find out the the client secret of the application which is not very secured so what this enhance uh authorization called grant type does is that um it creates a challenge value and now this challenge value is uh generated and then when you want to get the um when you want to get the token um you're going to provide a challenge of verifier so you have a challenge value and a challenge uh verifier and this is um generated automatically so this um is used in place of the client uh secret so i told you previously that for authorization code grant type you can choose to have client id or client secret but i did the illustration without the client secret but i showed you also how you can set up the client secret but for the pixie um enhanced authorization code grant type you're going to need a code challenge so a code challenge method and a code challenge value in place of the client secret so that's what i've done here for the challenge method you see i'm using this um hash in uh functional method to generate the code uh challenge and this is the code challenge i'll show you how i generated this in a bit but then if we go back to our application right here and let's go to the client and this is our sso app the first thing i did is that i went back to advanced searchings and here i um added the code challenge method to two five six now there are two different ways to do that you have the plane and the two five six so it's going to be in plain text or you have it um encoded in this s 256 which is the recommended one so um you can you want to go ahead and update that and then you want to go back to um your um request so this is the uh get request and you want to add the challenge method to be that and for the code challenge i am using um i'm using an online pixie generator uh generator tool and this is by uh tony zoo so um let's give credit to tony zoo thank you for creating this for us it's really really nice um otherwise i would have needed to create a java program that can do this and again you can see um how you can create this uh program to do this if you go to the or to um specification but for our purposes it's just easy to use this so i'm going to paste the link in the description or you can just google for online pixie generator tool and then um you can use that right so i did that and that's how i got the code challenge value right now you just want to generate the code verifier first then generate the code challenge value and that's how i generated that code challenge value that i added right here so for the pixie and hand enhanced authorization code grant you need the code challenge method and the code challenge value um to get your authorization code and to get the authorization token you need the code verifier value which i showed you how you can get that in the tool so let's try that together so i added these two to the request so i'm going to copy it and i'm going to go to my browser let me bring it over here and now i'm going to paste that and when i hit enter i get my response so i'm going to copy this and now i'm going to paste it here we have been pasting all the response and you see it's exactly the same as the or2 authorization code grant type i just have the authorization code right here and now i'm going to copy it and then i'll go back to my request and the post request and here this is it i added the code verifier value and i want to add the authorization code so i'm going to add my authorization code and then if i hit send you see i get the access token now this is a jwt um access token um that is um the um popular way of using um um tokens you also could use opaque tokens but jwt tokens is the standard way and a way to uh decode the token if you go to jwt dot io website [Music] and then you go to the debugger and you want to paste your encoded token here and now you're going to see the decoded token here that we are getting from oscar so you see all the information um that is uh used to generate the token you see the allowed origins you see our um issuer this is iss for the issuer of the token you see the rules that we have and then these are the rules and you see our scopes here that that has been exposed and my name here my username and the email um that i that i have used right and this is the signature um verifier so that's it this is how we can generate uh tokens uh using um ort and what we usually do in the front end of the application we are saving this token to um uh session storage or local storage or in the cookies and then um anytime the user wants to make a call to any endpoint we pass this token um in the header so that's it guys that's how we can um retrieve tokens um using the authorization code grand type now as you can see this is not so easy to create from scratch so we're going to be using a library to work with this in angular which is our um angular or 2oidc um library and in the um next thing i want to do is i'm going to generate the new angular application i'm going to add the angular library and we're going to use this in our angular application so let's do that next all right guys so um let's go ahead and create our angular application um using our angular or two oidc library to do the sso authentication so in this video i'll be using the angular cli so you want to make sure that you have the angular cli installed so to install the angular cli first you want to install node and then you want to go ahead and install the angular cli okay um i have some tutorials that shows how to do this just in case you haven't done that you can just check my channels for some videos on how to do that so i'm going to go to um directory in my mac and i'm going to create a new folder i'm going to just call it demo and i'm going to open this in my terminal so you can uh use any uh folder that you like um on your on your pc all right so in this demo folder i want to bootstrap the new um angular application like i said i'll be using the angular cli and if you just quickly check what version of the cli i'll be using you can see i'm using angular cli version 12 and that's the version of the node and npm manager and to install that you want to do npm install um that's g so you install it globally and you do angular dash cli to install the angular cli but of course you want to install node first before you can do that all right let's just go ahead and generate a new angular application in this our demo folder so i'm going to do engine new for my new application and let's call it sso app all right i'm going to hit enter and yes i'm going to be adding routing to our application and we'll be using css for this demonstration [Music] so angular would um install all the necessary package to give me all the good stuff i'll just wait for it to do its thing all right so the installation is um complete now and um i want to go into the directory that was generated if i just list that out you see i have the sso app so i'm going to cd into that and i'm going to be using visual studio code as my editor so let's open up the project in visual on studio okay let's do this later close that up and let me open this in full screen you know what let me open this to the side [Music] left of the screen and let's have this to the right all right so um now we have uh visual studio open let's um set up our um application and install the dependencies um that we need um to build this app so the main one of course is um angular 2 or 2 oidc and if we scroll down we're going to see that we can install it um this way so i'm just going to copy this and then i'm going to paste it in the application and that should install it all right done so next i also would like to install bootstrap because um in the demonstration i showed you earlier i was using a bootstrap header for my navigation bar so i'm going to do mpi install bootstrap dash dash save i think that's the way to do it [Music] okay so as you can see right here we have bootstrap five um installed um good so the next thing we want to do whenever we install bootstrap to our application is that we want to go to the angular.json or file to add the styles so we have we usually have a directory for css and one for our javascript and you want to make sure that you are adding it to this view part right here so to find that you can go to your node modules and then you can look for where you have bootstrap right here and then you open it and go to the list and then you want to look for bootstrap main.css and then you want to copy the relative part so when you do that you're going to go back here and then add a comma here and you want to paste that relative part there so that's how you add the styles the bootstrap styles and let's do the same for the javascript quickly so if i just open the node modules again and this is for the css now i want to do the same for javascript bootstrap main.js i'm going to copy that [Music] now i can close back the node models and then i'm going to paste it here did i copy it no i haven't copied it let me just go back again copy here paste something that's not working copy um it should be copied related but i'm sorry so let me just go back click on it copy relative part here so now i can paste it good so we have the um styles and and the javascript so i'm going to save that file and now i can close the node models right so we set up that and um let's go back and build our application so i'll do i'll open up the console let's clear it out and let's serve the application and i want to i want to go to the bootstrap website so i'm going to the bootstrap website uh getbootstrap.com docs 5.0 because i'm using bootstrap 5 and the examples i want to quickly grab a header um here so if i scroll down so i want to get the nav bar let's get this one navbar fixed okay so now i can view page source and here i have the navbar so i'm just going to copy it good and i go back here and let's generate the component for navbar so i'm going to do ng g [Music] c for components and we want to put this in components folder and we want to generate the navbar component and we want to skip test okay and let's generate another component for the home the home page right and let's do one more for our welcome page so i'm going to do welcome right here all right so i generated um all the components that we need now i want to go to our navbar component.html right here and i want to paste um the html that i copied from the bootstrap website here and now i have this i can go to the app component so app.component.html this is the entry point for our angular application [Music] and we have this template right here so i'm just going to get rid of all of this and because we have bootstrap i can do those container plus container and we have a container here and i want to put the router outlet in that i'm going to paste this here i'm going to save that and at the top of that i want to put the nav header so app dash nav bar so i'm going to save that and let's check it out in the browser i'm going to go to localhost 3200 and we have this fixed nut bar okay but i think i'm using a blue color so instead of bg dock i'm going to do bg primary [Music] and we save that now it's blue all right so um let's do some customization to our navbar first it's container fluid i just want container so it sent that good um what else do i want if i push this down i have this search bar i don't need that form so i'm just going to get rid of it okay now i have just home and link all right let's see so i want to get rid of this disabled link of course i don't need that so now i'm left with home i'm linked so i'm going to copy this url and now i paste it let's get rid of this home here you know what let's bring back that back uh we're going to have two links there one for login and the other one for logout and we can disable that um you can disable that later but now we should have login logout home and link we don't need that link so let's get rid of it okay i'm going to save that and the name of our app is not fixed navbar but it's just sso app right so i'm going to put sso up there and now we have this hrf um links here but we don't want that because this is an angular application and we're going to be using a routing so next um let's create the route so to do that i'm going to go to app routing module that was the route that was configured for us at the beginning when we were generating the application so we can create our routes here so the first one i'm going to put the part and do that for home and here i want component and for component i want the home component and that's it later i'm going to add a guide a rouse guide to protect this home component so i cannot access this page unless i am logged in but let's let's leave it like that for now and let's add the other parts to our application so we have just two components one for home and the other one for the welcome page that everybody can see well the home page is the protected page so i'm going to have components and this is welcome component right so i'm going to have one more route which would be the default and that should be star star and i'm going to put it to redirect to redirect to let's go to the welcome component and let's just add the pathmatch to be full okay so we have this setup and now we can go back to our navigation bar so instead of having that go to that we can just do router link and set this equal to i set that equal to home route i think it should be slash home right and um same thing for here i'm just going to copy it and for the login and for the logouts we don't need any link right here um this link would act as a button so we need a row um for that and we're just going to say row button and we're just going to have a click handler here so when the user clicks on the link it's going to call that handler and logos out so let me just save this for now see how it looks we have the sso app it takes me to home when i click on this if i click on home i'm on home and if i refresh i'm still on home if i go to the welcome components now i'm on the welcome but i don't see anything below it right so that's because um our navigation bar is covering that up so what i usually do is that i go to the i go to the styles the main style of the page so style.css and i want to add some styles to the body so i'm going to do body i'm going to do padding top and i'm going to push it down to 80 pixel and if i save that now you see here i'm on the welcome page and i have welcome works and if i click on home i have home works all right so our header is set up navigation is set up now we want to connect to our application so we want to um configure the setup for our application and here if you scroll down you're going to see a nice documentation for it after you've installed this um you want to initialize um the the app with um the client module and you also um want to add the word model right here right so let's just go ahead and um let's do that so i'm going to quickly go to my app module so app module so right here we have the browsing module and the routing module and we want to quickly add the http client module and also we want to add the board the old module plus the forward and you can save that so that's all we need as you can see the or2 the old module is coming from our angular or 2idc that we installed with npm so next we want to create a configuration file so as you can see here they are using pixy which is the approved key for exchange that we talked about a while ago now we want to create a configuration file and in the configuration file we want to add all the properties we want to add the issuer that's going to be the link to our authorization server but we can start out using the authorization server that they have um in this example and then we can switch it back to our authorization server so you can see um the difference when you are configuring this application that the front-end application can get the token from a different um authorization um server as needed right so this is what we're going to do next we're going to create um a config file and then we'll put all these uh properties there so what i'm going to do now is i'm going to go to my application i have this component folder here in the app folder i want to create a new file right and i'm going to call it sso config sso ssoconfig.ts right so this is where we'll be adding our um configuration file so for now we're just going to use the configuration server that they are giving us in the example and then later we're going to switch to our own configuration server so i'm just going to copy this and paste it for now and then save and then we can continue now after this they said we can initialize the flow using in its um code flow and remember we are using the authorization code flow specifically the pc authorization code flow which is the enhanced authorization code flow that has the code challenge of value so this is the one um that we're going to use [Music] right and we want to have this um initialized um in our navigation component because this is where we're going to have um we're going to have our login here so when i click the login i'm going to have that configured um on my nav bar so when i click login it redirects me to the authorization server so now that i have this um set up i want to go to my nav bar component okay i have this open so i can close this up so i go to my navbar component and then i can bring my alt service in the constructor so i'm just going to do that with dependency injection as usual so you can call it whatever you like i'm going to call it service like so and that would be coming from what board service right here you can see it's coming from angular or to oidc right we have that injected to the constructor and the next thing we want to do let me just go back to the documentation and show you that this is all coming from there oh i didn't have it here if you um click go back here and then there's a link that usually take you to the github but i'm going to leave this github page um in the description so you can follow this example what i'm following right now so as you can see it's it's actually the same so we are here we created our config file and now we need to init the the code flow all right but um here we are doing it in in our navbar so that's where we are doing the login um you can have the login uh maybe in your app component page so um the first thing we want to configure the single sign on i am mixing something in the documentation well maybe it's not needed anymore but the first thing we need to do um we need to we need to bring in this um file here that we created um here into um our header right so um it's called um alt um config right so let's create the method uh we're going to call it uh configo configure single configure single sign yeah like so okay and now in this method i want to call the odd service so this dot art service and this odd service i'm going to call the configure method and what you need to pass in this method is the autoflow um config here so i call this sso config but the the name of the class actually is the alt flow config right here so i'm just going to copy it and paste it here all right my editor can't find it but it can give me a hint and then i'm going to import that from the app good so that's going to bring all the properties here i have that initialized and next thing i want to do is um i want to validate the token that i get and to validate the token um we need to install another package and the package is called the angular or two oidc jwk so it was initially with the other um package that i installed but now they separated it for um newer versions of angular so let's just go ahead and install this so i'm going to bring back my terminal and i'm going to paste that there good so it it has installed the dependency for us angular or 2idc jwks so we can close this up now and then we can continue uh by using the token validation handler to validate our token so i'm going to do this dot or service dot token validation handler all right and this would be equal to new jwk as validation handler and this jwk as validation handler is coming from here this package that we just installed right and i'm going to close open the brushes close it and next we want to use um our login so i'm going to do this dot um or service dot load discovery document that's not the one i want and there are two of them there's the one that loads discovery document and there's the other one that loads discovery document and tries uh the login so that's the one we want to use um for our login right so we configure our single sign on right here and the next thing we want to do is we want to write our login function so i'm going to write a new function or method login and here i just simply want to call this dot word service dot innate code flow so as you can see from our documentation um the way we can login is you have you need code flow and then you have a init login flow you can explore these two methods later but um the one that i tried and practiced with and it worked was this init code flow and remember we are using the authorization code or grant so you want to add this init code flow for your login and then let's create the method for logout so i'm just going to type a logout and i'm going to do these dot bought service and that one is just uh logout like so very easy so we have all the methods we need login logout and configure a single uh sign on but then we want to initialize this in our ng only need so that anytime the page loads we have our single sign on console configured so i want to do this dot configure single sign on call this method right here all right now that we have that setup um in our html we want to call um the login method so i need to go back to my navbar.html and remember here we have oh this login is going to home we don't need that so i'm just going to delete that and let's take away the active okay and the login is also going to have a roll of button so row equal to button all right i'm going to save it okay so they look alike now so next we want to have a click handler so when we click on that the link which is acting like a button now we want to call the login here which is that method that we defined and here we want to call logout this would be equal to [Music] log out did i use a capital letter for that i think it was a small letter let's go log out like so good we don't have any arrows let's try that out and see if it works moment of truth so this is our application now we at the homeworks so we want to login so now i'm going to click on login and now it should redirect me so yeah i get redirected to my authorization server and in this case we are using the example from the oidc we're going to change it to our kick look authorization server later but i wanted to show you how we can do it with the initial one that was showed as the example for this library that we are using all right so this is using identity server for i think it was developed with c sharp this is very con popular with the dot net family and how can we log into this authorization server so it says we can either use bob or bob or alice or alice or we can use our google account so let's try it with both so i'm just going to do bob here and the password is bob and we have this nice remember my login functionality and if i click on that now it's going to ask me um you see it's using code plus proof of key exchange right that's our odd flow and i'm going to allow all of it and now it redirects me back to our application and takes me um to the home page which the home page um redirects me to the the welcome page now as you can see right so this is working um we just need to do um some more configurations um for example when i'm logged in um i need to um disable or hide this login button because i'm already logged in and this logout button should be the only one showing and again i need to have a route guard that can hide this home page because i want that to be my um protected route so i need a way to hide that so that the user um will not see that all right so how can we um do that let's just go ahead um and do that so to do that we want to go on to our um [Music] our nav component.ts and here we want to get the identity claim of the user and we can use a getter for that so i'm just going to say getter and let's call the method or or the get our token right so um here i'm going to say let all claims and this should be equal let's give it a type of any just to be safe um this would be equal to this dot what service and here as you can see this interface we have a lot of methods that we can play with this is a method that allows you to disable pc for example and we have that configured in our authorization server so you know what that means and here we can get the id token for example remember we are getting the token i showed you how to do that so you have a lot of good stuff here but now we want to get the identity so get um identity claim this is the one we're interested in get identity claim so i'm going to oops i'm going to call that method and now we want to return the claim so i'm going to return the claims if i have the claim i'm going to return it if not let me return null all right so i have that getter set and um that should return um the claim right so i want to use this claim now to get um the name of the logged in user so how can i do that so on the ng on init i can do cost and i can say user claim and let's call this to be any like we did before and um so what i want to do is call that method again so this dot board service dot get identity get identity claims all right so and from here i'm going to let's set the variable here and let's call it name so this will be the the name of the user let's give it a typo string and initialize that string to an empty string and right here i'm going to set the name so this.name to be equal to the user claim which i got back dot the name and if that's available i want to assign to that variable else i want to assign an empty string all right so we have this token and now we can use um we can show the name on the header right and we can use this token to hide those link and we can do that on the html pack so on the html and we just go nav component.html and so we are here and on this part i want to show this ng if so i'm going to say ng if ng if um not token so if i don't have that to get that set um if i don't have that um get that set then i'm not logged in or then i'm logged in sorry so i want to show this right um but if i have that then i'm already um i'm not logged in so i want to show the the logout right so i'm going to copy this right here and then i'm going to paste it here and now if i save it and i look right here oops i don't see both because i'm using the negation so it's not showing because i am already logged in right so if i am already logged in i have this token then i want to show that logout uh link so if i save it now and i look at the link i have the logout link here and uh also for the name um since that ngif is inside the list i can do something like a span here and just put the name so if i put the name here and i save it now it's going to say log out bobsmith right because we are getting the name from the authorization server but i don't want to show this here so i'm just going to dig that out so just showing you um that you can do that another thing i want to do is i want to have this condition also for this um home uh page because i only want to show this page if i'm logged in so i'm just going to do this ctrl c ng if um paste it for this um list right here so ng if token then i want to show that home page so i'm only showing the home page if i'm logged in right so now i can log out and you see it tells me that i'm logged out you're now logged out you can click here to go back to your application so i'm back here to my welcome page and if i opened here i don't see the home page and i don't see the logout and if i want to see it i need to click the login again and then i can log in with bob or i can log in with alice let's log in with bob again and let's allow and now i'm redirected here and now i have the home and i have the logout right so i have the home and i have the logout so if i click that i'm logged out i click here and i go back to the application but the problem right now is that um i am not protecting my resource because if i go to this home page i don't see the link on the navigation but if i go there i can still access this page i don't see the link here but i can still access this home page and i want this home page um to be protected and the way we protect this um pages and in angular is to use a route or guide so let's do that next all right guys so let's continue the next thing we want to do is we want to create a route guide that is going to uh protect the home page um of the application so our home page is our protected results and the welcome page is the default page that you see where you log into the application so let's bring back the console and let's generate the route guard um using the angular cli so now i have the console open i'm just going to click all of this and the way you can generate the route guard in angular is to do ng g generate and you want to say god and you want to give it the name and i'm just going to call it odd god and um yeah the next thing i want to do is just keep a because we don't need unit tests so if i hit enter it's going to ask me what the interface would i like to implement and we're usually implementing the current activate method and that's it our guard is generated and now i can go to the guard it's spot god and we have the guard generated here and it has the can activate method and here we want to return a boolean if the user is logged in okay so to implement this method first we need to generate our constructor and in our constructor we want to inject our hot service same thing we did in our nav bar so i'm just going to say private um odd service you can call it whatever you like and what service i'm going to import it from angular or to oidc i have that imported and now in the can activate method i'm going to use um i'm going to use some methods um there um let me use var instead of the let's that i've been using before i'm just going to call this variable as id token so we want to check first if the user has the id token that means he's uh has a valid token so odd service dot we have this method as a valid token so has valid um access token and you also have another one has valid id token so i want to check if the user has both of it um [Music] then he's authenticated otherwise we should uh deny him access to that page or resource that he's trying to access so the first one is has id token and the other one is has access token right and i'm going to get this the same way so as access token right and if the user has both of them we want to return true so the way i can do this i can just say has id it has id token and if he also has the access valid access token he called it access token yeah so if he has both of them then he can see the page otherwise not okay so this is our out guard i think it looks good now let's use it in our um app routing model so i'm going to go back here and these are all the routes and for the home page which is the one that we want to protect i'm going to do an activate and now i'm going to bring in our ought guard it's usually in an array just in case you have more than one and yes i have that um imported now so i'm going to save this and as you can see i don't get to the home page right i'm just on the um home directly localhost 4200 and it doesn't show me anything because that home page is hidden right because i'm not logged in so what i want to do is i want to check i want to also redirect for the default uh page so i'm going to just copy this and paste it here and if i have the part to just the default one i would like to redirect to the welcome page um just same like this so if i save this now so now i see something i see the welcome page and now i have just login i don't have the home page because that's protected and if i try to access the home page [Music] i get redirected to this page but it should redirect me to the welcome page so you get the point now that i don't i i get uh redirected to um the i cannot access the home page but i have a problem with this because it's always redirecting me here and it doesn't take me to the welcome page so i'm just going to try something see if it works in the odd guard so before i return this so i'm checking let me break this down to if statement so if the user has the id token and that then i want to return true right so return true and else i want to return false and i want to return false but also i want to navigate them back to the welcome page right because the other page the default page is not doing exactly what i want so i'm just going to inject the router i have the router i'm going to import it good and here before i return false i'm going to do this.router navigate and i want to go to here's the router.navigate and here i'm going to slash welcome let's try this way and see so i'm going to save this okay so now i'm on the welcome page let's try to go to the home page you see i can get access to the home page but instead of redirecting me to the default page i get back to the welcome page that's the yeah that's exactly what i want right so i cannot access the home page so to access the home page i need to log in and we can login with bob maybe next time we try alice so i login bob yes let's allow and redirected back to the welcome page but now i have the home page and i can also get to the home page right so um yeah so this is um how you can protect the the resource or the page using the route guard in um angular right so now we have this homeworks and we have welcome works so what i would like to do is i would like to have a um i would like to have a jumbotron instead of saying homeworks it should say um welcome with the name of the user so let's quickly do that i'm going to go to the home dot html so here where i have homeworks i want to have a container instead let's have a container and inside the container let's have some classes that will give us a jumbotron let's have p5 that's like a paragraph of five spaces if i remember correctly margin top tree um let's have bg light and let's have rounded okay and inside that let's have a h1 and let's say welcome and here let's have a p tag and here we're going to have the name of the user let's just give it a class of lead and here the name of the user let me just put my name for now but you know we would want that dynamically and so if i save that it says welcome henry but henry is not logged in it's bob that's logged in so we should be showing bob and the way that we can do that is um same way we did it um in the navigation right so i don't want to waste a lot of time with that so i'm just going to copy the code because you already know how that works so let's go to the home component the ts and there we're going to have the name which is a string we have a name of string and also let's have our single sign-on method like we did for the our single sign-on method like we did for our navigation header and we can import all of the missing things um here we don't have the word um service in our constructor so i'm just going to bring that in to our constructor now we have the old service i'm just going to quickly import that from angular or 2oidc and we also want to import the um jwks validation handler all right this look good so it's the same thing what we have in the um navigation here that i just wanted to be fast um instead of typing that so on the engine only needs we're going to do the same thing we're going to call the method there and paste it there and also we're going to call the get the name of the user like we did in the navbar so if i save that now so we have this variable here name that we can display in the html so instead of saying henry here i'm just going to put name here so we can see the name of whoever is logged in so i'm going to save that and now we have bobsmith so let's log out for example now we are logged out we go back to the application let's log back in but this time let's use alice so i'm going to say alice and the password is alice that's a different user i'm going to try to log in yes allow and now i get redirected and welcome works i go to the home page and you see welcome ali smith okay so that's how you can get the name of the logged in user um so this is good it's how i want my homepage to look like but then my welcome page is still the same uh this should go to welcome because i have a link for whom i don't have a link um to go back to the welcome so let me just quickly fix that in my navigation component.html so here i can go to the home and i want this one to go to welcome instead you can call this links whatever you like i'm just playing around or hit stupid names so now we have home and this is my welcome now my welcome pages have welcomed works but i just want to have similar thing what i have with the home instead of um just that text i want to have a jumbotron there right so i'm just going to copy and paste the html it's going to be exactly similar to what i have in the home page so let me go to my welcome page so i'm going to my welcome page.html now i'm going to paste this here and if i save it now and i check the welcome page i just click this one and you see it says welcome to the sso application login to see the protected page but we are already logging so we can see the protected page but then when we log out and we go back to the application we can't see the protected page except um we log in yeah so this is the um sso application like i showed at the beginning but right now it is using the authorization server that we have um from installing this our angular or 2oidc library but that's not what we um the authorization server that we set up um at the beginning of this tutorial we set up an authorization server using keyclock so this is our key clock authorization server here and instead of using the default one that comes with this library we want to use the one from kick look so this is what we would be doing next all right guys so the next thing that we want to do is we want to switch the authorization server from the default one um that comes with the angular um or 2idc library and we want to switch it um to our key cloak um authorization server so we set all the properties right here in this sso config file but um right now what i want to do is um i want to take um these um values to our um environment dot ts a variable because you usually put in um these properties there so that you can switch between the ones for development and production for example so let's assume that this authorization server is the one that's configured for production environment because of cl of course is deployed to azure and the key cloak authorization server that runs on our local machine will be the one for our local environment so we can do all those settings in our um environment variable so i'm just going to go to [Music] environment um ts so you see we have environment.ts which i'll be using for my local keyclock setup and the prod which will be the one for the production so i'm going to switch to environment um ts right here and uh on environment.ts we want to configure um all of our properties so right now we just have a production false and now we want to bring in all our properties so we can give it a name i'm just going to call it key cloak you can call it whatever name you like key cloak and this is going to be a json object and in that json object what we need we need the issuer okay we need the issue are you going to paste yours there yours should be different from mine because i'm guessing you called um your ram a different name from mine but if it's the same it's fine i think it was sso application we're going to check that later and next we need our redirect uri right here we need the redirect uri and also we need um our client id i think as what um sso app right here i'm looking at it so we can just fill that in client id and that is the sso app so sso dash app okay and um what else i don't have a comma here and i need one more property which is the scope that we want to expose so for the scope let's put our open id scope and the profile scope these are the two scopes that we used uh when getting the token in the example but we can also add the email scope and let's also have uh offline access so let's have this as our school right and now we need to get the redirect uri and for the redirect uri i think we set it to google.com because we didn't want it to clash with the other application so now we can change it so we can match what we have so i'm just going to changes my redirect uri from google.com that's not our application and i'm going to change it to localhost 42 um thousand that's where our app is running on so i'm going to save that oops i have to sign in again and i'm going to change google.com to localhost now i'm going to save it and success our redirect uri is saved okay and what else do we need do we need the issuer so i'm going to go back here and i'm going to post my issuer here so the issuer should be local hosts the key global runs on 8080 autorams and the name of the ram so whatever you call your ram should be here right so let's just quickly check what we called it um from here so we called the ram as you can see what we were testing to get the token we called it my sso application so i'm just going to copy this here my sso application i'm going to copy that and let's bring back visual studio code and let's paste it here so you can put whatever you um used when you were creating the key cloak authorization server but i called mine my sso application so i'm going to save that right and we have all our kick lock um settings here this looks good so now we going to take uh all the settings um from this sso.config and put it in the environment production file so i'm going to go to environment pro tx is what we want to have for our production config so i already have it somewhere i'm just going to copy it and paste it so that i don't waste a lot of time typing now i just pasted it there and for the key i'm just calling it azure you can call it whatever you want and that's the issuer the client id and the scope so we are good now we can come back here and um for the issuer for the issuer instead of having it there i'm just going to do environment dot oops i need to import the environment right so um i'm going to import environment from proj because we have that in prod and i'm going to say environment.azure dot and this is for issuer the redirect uri is that for client id i'm going to say environment dot azure dot client id and response type it's always code because we are using um authorization code and i guess somewhere here you can disable the pixel if you want and i guess this is it so i'm just going to save it and i think i i copied the scope as well so let me just add the scope so the scope should come from environment environment dot azure dot scope okay so we have everything put in our environment variable now i'm going to save it and let's check our application again welcome to ssoap let's login we are redirected here we can log in with bob and if i log in i allow and i'm redirected to the home page now i see the home page and it tells me welcome bob smith so i can log out that looks good we just moved everything to the variable now instead of using prod let's use our key cloak or configuration right so now i'm going to change that broad to just environment and now we don't have azure anymore we have kick cloak so key cloak dot on issuer right and for client id we have key cloak dot client id and for scope instead of azure we're going to have key clock good and let's save it and one more thing we need to change is the redirect uri so what i'm going to do is i'm just going to comment that out and i'm going to bring the configuration for keep look redirect uri [Music] and here i'm just going to paste it here and put a comma there of course and then i'm going to save it and yeah that's it so we have the redirect uri client id response type and every other thing is good i just want to add more prop one more property because our key cloak is running on localhost let me just disable https so we are safe with that so require https i'm going to set it to false all right so i'm going to save that now let's try logging in with our application and let's see if it's going to make use of our key cloak authorization server so if i click on login now we go to key cloak authorization server right but this is interesting i don't see um it's disabling the ah i know what's happening so let me get out from there and um [Music] let's go to new incognito window and let's have it in full screen and let's go back here so this is our sso application and wait this login is at the middle something is wrong there let me just quickly fix that so that's coming from our nav and if you look right here you have margin end auto and if you want that this to go to the start we're going to use margin s margin start auto so if i go back now you see this is at the end of the application now if i try to log in you see i get the key cloak um on css style here and i guess it doesn't come before because if i shrink this you see the css doesn't apply to smaller screen just for full screen yeah that's why you need to write your own css okay so this looks good now and i remember we configured the register here but um i guess we have um one account i guess we have one account so we can log in um with that account and um oops i don't remember it i think the username was henry school 82 and the password was yeah and you see now i'm logged into my application and it says welcome to this sso application and if i check the home page you're going to see that it says welcome henry right it says welcome henry so i am logged in um with my application so now i can also log out and i'm logged out um from the application if i try to log in again it takes me to the kick lock i have my ram here and i have my login page now the next thing i want to do is i want to configure some other things i just have the register here a new user so i want to add some other configuration to my ram um i want to have the remember me functionality and i want to have a remember pass me a forgot password or functionality because at some point i forgot my password and i need to change it so let's do that next all right guys so let's continue um with the configuration of our login page so right now we have this uh login page looking like this from our key cloak authorization server and we have this um button below it where we can register a new user but we want to add more functionality so we can add the remember me check box and we can have a link to change our password so if i bring back our key cloak um page right here we can do all those settings in the rim right so right here we have the ram and here on the login settings you have user registration so you can turn that on or off um let's leave it on for now and let's add this forgot password and let's add turn on the remember my functionality okay that's just all i want so i'm just going to hit on save and that has been saved and now if i go back to my application just to refresh it now you see i have the remember me checkbox i have a new user forgot password and yeah with the remember me checkbox so let's try to log in again to our application and i'm going to use the username and the password and i'm going to hit on the remember me checkbox and i can do the sign in and i get redirected to my application and then i can see my name as usual all right so i can log out and i log in again and i see the page so this is how the page it's looking like currently so what i want to do is i want to disable this user registration but instead i want to create an app registration um to my github account so i can show you how you can do the um social uh sign-in and let's let's do that next so for us to do that you want to first of all log into your github account right here i think i have my github account open so you want to go to your github account i already register an application which i showed at the beginning but we're going to create a new one so if you're logged in to github you want to go to um developer settings and again this also applies to google or facebook or any other um social authentication provider it's just easier to do it on on github that's why i'm using github so on github you want to go to settings first and then you go to developer settings and then you go to always apps and then you can register a new old um application so previously i called it sso app um this time around let me just call it alt app just so it's different from the other one and the home page url is right now localhost um if you deploy then it's going to be different and my authorization callback is the redirect uri which we have um said to be this so now i'm going to click on register application and then you have a client id and the client secret so you have the client id right here and you can click on this generates new client secret and it's going to ask you for your password and you want to enter your password no you want to enter your password and now you have the client secret for your application so we're going to copy this and um we're going to um put it to our key cloak authorization server let's do that next so let's go back to the kick lock authorization server i'm just going to bring it right here um this is our key clock authorization server and um we want to add a new identity provider so this is how you add um the new identity provider and here if you go down you see the different list you have github facebook google linkedin and you have most of the popular um social um um providers that you can log in with so right now we are just using github as an example so i'm going to choose github and now it's going to bring in the identity provider setting page for me and what i want to do is i want to copy the client id and the client secret that i generated right so you want to copy the one that you have so i'm going to copy my client id so copy the client id and then paste the client id here and then i'm going to copy the client secret so copy the client secret and then i'm going to paste it here and then you want to leave everything as is um not so much things to set up i'm happy with the default so i'm going to hit on save and now you see success github provider um has been added so let's try it out and see uh by signing into our application again so now we have this if i refresh [Music] um i have username password remember me forgot password so sign in or you can sign in with github yeah i wanted to take out this registration from um button here so i'm just going to go back uh you can keep that if you want so i'm just going to turn this off and save it and now if i go back to my application and i reload it so that that's gone so now let's try signing in with our github account so i'm going to click on github now it's going to redirect me to the github um home page and i want to log in with my username and password and now it's going to tell me that um this app is trying to get access to this just the same way it was showing um with the um identity provider that we used previously so you want to hit on authorize and now i'm going to be redirected to my application it's going to take some time it says the account already exists because i'm using my um github account um the same one with um same email with what i'm using there so i'm just going to add to existing account and now i want to sign into my github account again so i'm going to enter my password [Music] okay and now you can see that um i'm logged in right so i'm logged in i click on home and you see welcome my name so now now if i log out and i try to log in again and let's try to log in with github again and because i enter my credentials before it doesn't ask me for it again and you see i'm logged in with my name so i can log out i can log in and this is um our application we can log in back with our username i think it was in risco 82 and our password and we can check the remember me here and we are logged into our application we can log out and we can change our password um you put your email and then it sends you an email to change your password all right so that's that's it guys that's what um i wanted to show you i hope you have learned uh um some things about um sso about oauth and open idc and how you can set it up with angular and key cloak if you like this video give it a thumbs up and subscribe to the channel if you haven't and you love content like this and i will see you next time with some more video tutorials [Music]

Channel: Henry Codes

Views: 400

Keywords:

Id: -z8k1vxQ3Tk

Length: 131min 17sec (7877 seconds)

Published: Sun Oct 24 2021