Angular & Microsoft Login - Using Microsoft Authentication Library (MSAL)

hello everyone in this video i'll be showing you how you can build a microsoft identity platform login in your angular application as you can see i have an angular application i have a login button and if i click on it a pop-up window shows and i can log login in microsoft and let me do just that and now i'm logged in in microsoft so i have these two pages and there's a restricted page which is guarded by the microsoft login and it even shows my name and also i can sign out if i want to and now i'm logged out and if i go back to the web page i can log in again if i want to so in this video i'll show you how you can do it on your own before we can start we must register our web application in the azure active directory you must have an azure account you must go here and log in and then here you can search for azure active directory and then go there and then here on the sidebar here under app registration you see a list of all your registered applications and here you can create a new registration should just give it a name for example my login test and i choose this one here so all microsoft accounts can use my application and then i can here i can select a single page application our angular application will be a single page application and here i must enter a redirect url and this will be localhost 4200. because the application will run on our local machine and then you click on register and that's it we're done now we need this one here the application client id we need to copy it and remember it we will use it as a client id in our angular application just copy it so now i am creating the angular project i'm using the angular cli i use ng and with new i'm creating a new project i name it microsoft login and i also use the routing flag with true because i want to have routings in the project so let me execute this so after a while the project has been generated then i can change it to the new directory and here i can start visual studio code to start coding i can also start npm start to start the web application so after a while it has been compiled and started i can start it with this url and let me open the webpage so i see the pre-generated web page i can get rid of that content and i do that by going here into the app and this is the rendered application i can remove everything but this one here here we will display our router content in order to build a microsoft login i must install some node packages microsoft provides a microsoft authentication library and let me open the terminal and i'm using this command so npm install and i'm installing msal microsoft authentication library angular in browser and this is the javascript angular wrapper with this we can use microsoft login in our angular application and you see after a while it has been installed and now it's time to integrate the library for that we must go here into the app module and here we must do several things we must import modules and we must configure the authentication client so let me first do the import of course we must import this module here microsoft authentication library module and make sure it's imported correctly and we must define an instance factory function so for that we just define a function here with export function name it microsoft authentication library instance factory and it returns a type of i public client application [Music] and we do it by returning a new public client application and we must provide some configuration objects and it is it contains auth and this is also an object and it contains several it contains several options first we must define a client id and this is the client id which we have generated in the azure active directory so just copy paste it here and also we must define a redirect url it is this one here redirect yuri and the redirect yuri will be http localhost 4200 so that means when the user has logged in in microsoft he will be redirected to this url and this is our web application and also we must define here the providers first a provider define the provider of this type here msal instance and we use effectory methods and we use a factory method and this will be our method or our function what we just defined this one here and also we must set here msal service and this will be the authentication service which we will need to do a login and a log out and now we are ready to go to develop our application let us go into this app component and here we need to define several methods we need to define a login method a logout method and also a method to check if the user has been logged in for that we must first inject the microsoft authentication library service let's first define a constructor and in the constructor we inject a member the msal service of type mscl service and this service here is the one which has those methods like login or log out or get the logged in user like this get active account and we will use the service to log in and to log out and let us define a function here log in and for that we use the injected service and let's do a at first we will do a simple pop-up login and on the pop-up login we must subscribe on the result we do we do this by typing this subscribe and we get a response of type authentication results and what we do is we go to our service and we do we go to the instance of the service and we do set active accounts and response get response account and that means when the user has logged in we set the active account of the result of the subscribe and also we define a method to log out log out and for that we just call the service again with log out and that's it now we need a method to check if the user is logged in let's do this is logged in we return a boolean and for that we just check if the service has an active account this mscl instance get active account is not null and let us start implementing the html part let us first build a login and a logout button and an indicator if the user is logged in or not so let's go here in html and at first let's build some buttons a button and with a click event i just do log in and i name the button sign pin and also another button to log out sign out with the click events log out and let me use the angular directives i render the sign in button only if the user is not logged in and the logout button is only rendered with the users logged in so ng if is logged in is not logged in then the button will be rendered and here ng if is logged in then the sign out button is rendered and also let me arrange these buttons in a table just simply a one raw table and another column here and also let me display a text to indicate if the user is logged in or not so yes another div and with the directive ng if is logged in then i show a big text with you are logged in and in the other case with ng if is not locked in i will just display you are not logged in you are not logged in so let's take a look at how the web page looks like and now we have opened our web page look at that we have the text it says you are not logged in and we have a sign in button let me try out the sign in button and as you can see i am being redirect to the microsoft login page in the pop-up window and let me try the login enter the password and there you go you see it now says you are logged in and i have the sign out button and let me click on the sign out button then i am redirected to the microsoft page i need to specify which account i want to sign out and then it tells me i am sign out so we have seen a login with a pop-up window there is also another way we can specify the login as a redirect login that means when you click on sign in you are being redirected to a microsoft login web page and then you log in there and then you are redirected back to this web page so let's try this out and to do that we must go here again in this login function we can just for now comment this out and to do a redirect login we just call the service again with login redirect and that's it no other values but we need also to define a redirect handle when the user is being redirected to the page we must do this again and we can just do that by let's implement the on init function on init and implement this method and here we can do again use this service the microsoft authentication library service and on instance and then there's a function handle redirect promise and with the method then we can define a redirect handler with res and then doing this and we can say if res is not null and res account is not null we can just do the same as here we set the account to the active account res account and let's go back to our web page and now let's click on the send in button again so as you see i am completely redirected to a microsoft login page and here i do the login and you see now i'm redirected to to my web page and it says i am logged in and i can sign out let me sign out and that's it and now i would like to extend the web page i want to have two different pages i want to show a public page and also a restricted page and the restricted page should be guarded by the microsoft login and let me use the ngcli ng generate component public public page and also a restricted page and let me change the content of the pages here we'll use header again and now i need to add those components to the routing so in this app routing module i have this rouse array i need to create several rows arrays with the first one is this path and on path public page i will show this component the public page component and i also need to define the restricted page with the path restricted page and the component will be the restricted component page and also the default routing with the wildcard path and it will direct to the public page component so let me add those links in this app component in the html part i will just add a few more columns and i will use in a with the label will be public page and i will use router link public page also another link with the label restricted page and router link is the restricted page those are the router links and let me see how it looks like you already see public page and restricted pages i can switch between those so first of all i want to guard the restricted page i want to enable it only when the user is is logged in and for that i must generate a guard so back at visual studio code i use the angular cli again generate guard with this i am generating a guard and i name it microsoft authentication library guard and it will be of type can activate and now i have this guard here and here i need to check if the user is logged in and for that i must inject the microsoft authentication library service again so i define a constructor and here in this can activate method i need to say if then say the service instance get active accounts if it is null that means the user is not logged in and then i return a false and i need to use this guard on the routing so i go to to the app routing and here for the restricted page i can also set the fields can activate and i use the microsoft authentication library guard and it must be an array so just like that and now i can check the web page so here i'm in the web page i'm clicking on public and i click on restricted and you can see the restricted page is not being displayed i cannot access that so let me disable this link if the user is not logged in let me go to the app html and let's say i also use this directive angular if is logged in so i want to see the link only when i'm logged in let me go to the web page and you see i do not see the link let me sign in and you see now i can see the restricted page link and i can access it and let me extend the restricted page so it displays the username here for that let's go into the restricted page the typescript class and here i can also inject the microsoft authentication library service and let me define a function to retrieve the user name get name of type string and return this msal service instance get active accounts and then i use name and in the html template i want to display the username with h2 welcome [Music] and with interpolation name so let's go back to the web page all right and let's go to the restricted page and it says welcome user and that's it that's a simple example for a login and logout with microsoft identity platform thanks for watching my video

Channel: Genka

Views: 25,189

Keywords:

Id: TkCKqeYjpv0

Length: 25min 26sec (1526 seconds)

Published: Sat Feb 20 2021