Angular Azure Active Directory(ad) Authentication Using msal

welcome to azureteach.net we are going to develop an angular application that will look like this on click of the login button the user will be redirected to azure login page and once the login is successful the user will be redirected back to the angular application and will show a welcome message like this on click of logout button the user will be redirected to the azure logout page once the logout is successful the user will be redirected back to the angular application and will show login button again please subscribe to azureteach.net for more videos on azureand.net we need to create new project and add required packages so here i am typing ng new azure ad angular demo we need routing for this so i am pressing yes or here i want to go with scss now let us go into the project folder cd as your ad angular demo and now we have to install few packages we are going to use angular material controls so we need to install angular material library as we are going to use azure id we have to install packages related to that as well so here i am installing mscl browser and msal angular packages now let us open the application in visual studio code so here i am writing code dot it opens the current folder inside visual studio code as we are going to use azure id we have to create an app registration inside azure so here i'm in portal.azure.com i'm going to azure active directory and app registrations here i'm creating a new app registration and here i'm giving name as angular azure 80 app and i want to go with the default settings i am clicking on register and here inside the authentication section we have to add platform and we are going to use single page application and here the redirect url should be http colon slash slash local host colon 4200 as angular application runs at localhost colon 4200 and here we must check this checkbox this implicit flows related to the single page application so here i'm clicking on configure we are going to access azure graph api from our angular application so inside the api permissions it should have azure graph related permission so here if you see it is added by default and which is a delegated permission here inside overview section we have client id and tenant id this we are going to use when we are configuring azure id inside our angular application now inside appmodule.ts we have to add configuration related to azure id so here i am writing msal module dot for road and to this we have to pass new public client application to this we have to pass azure id related configuration that is an object so here i am writing auth and inside this auth section we have to pass client id redirect url and authority now we have to get this details from our agile app registration so here we have the client id and i'm pasting it over here and here we have the tenant id and this we have to use inside authority so here i'm writing https colon slash slash login dot microsoft online dot com slash tenant id and here the redirect url should be http colon slash slash local host colon why this configuration is required so when the user access the application using the browser and the user is not logged on then the application will be redirected to this particular url using the client id so based on these details azure will decide which subscription this application belongs to and it will validate these details and written a access token and it returns that access token to localhost colon 4200 and the same we have configured inside our app registration and after that here we have to write cache and here cache location will be local storage and after that here store earth state in cookie this should be false if you want to set art state inside cookie then you can set this flag to true but this is mostly needed for browsers like internet explorer and as internet explorer is already dead i set this to false and in this demo we are going to test this application using chrome but the same will be working inside edge as well if you are targeting for internet explorer we can get the browser information like this so here i'm writing constant is ie is equal to window dot navigator dot user agent dot index of and if the user agent contains msi that means the browser is internet explorer and also we can look for window dot navigator dot user agent dot index of trident so if the trident is also there then that means the browser is internet explorer and we can set that flag over here user can log on to any angular application in two ways one is using the popups and another one is using the redirects in this demo we are going to use redirects so we have to pass the configuration related to that over here so here i'm writing an object and this is related to msel god configuration so here i'm writing interaction type and interaction type will be interaction type dot redirect so if you see here we have pop-up redirect and silent we are using redirect or here and after that here we have to configure the auth request and as we are going to access the graph api we have to pass the scopes and by default when user logs in it uses this scope in getting the access token so here we have to pass user dot read permission and we are setting that user dot read based on api permissions and this particular user dot read we have to pass one more configuration over here and that configuration is related to the apis that we are going to access we are going to access the graph api so we are going to configure the same here and also if you access any organization related apis or any other apis which needs azure access token you have to configure over here so here again we have to write interaction type interaction type dot redirect then we have to pass the api's information inside protected resource map and it will be a new map object and it accepts an array and to this we have to pass our graph api url so here i'm writing https colon slash slash graph dot microsoft dot com slash v 1.4 slash me and after that we have to pass an array of the permissions and here we have user dot right and if you want to access any organization related apis here you have to mention the url or a part of the url and after that here you have to mention the permissions that we call as scopes but for now let us keep as is it should be inside nra here we have to add few providers related to azure id and here i am writing provide http interceptors and the interceptor that we are going to add will intercept all the http requests and it will add access token so that they can access protected resources like graph api or any enterprise api which needs azure access token so here we have to write use class and it should be mscl interceptor and after that we can mention multi to true over here and after that here we have to add mscl guard in this msal guard we are going to use on top of our protected routes like if user try to access any url inside our application if this msal god is configured this will protect that route and it will check if the user is logged on or not if the user is logged on then only it will allow the user to view that web page and after that here we have to add msal redirect component that's it this is what we have to do inside this appmodule.ts it is very easy right if you look at this code at the first glance you may feel difficulty in understanding this code but if you break down this code into bits and pieces and understand it is very easy so let me explain this code once again as we are using azure login we have to use this msci module and we have imported it to our application and we have to pass certain details based on that as you can decide to which tenant this application belongs to so here we are mentioning those details and we got these details from azure app registration and here once the application is redirect to azure id login page and the login is successful azure will return the token to this particular url here we are mentioning the location to store art state and here we are mentioning that we are using redirection based azure login and also here we are passing the scopes related to our application and here we are mentioning the protected resources and here we have mentioned azure graph api and we have to pass the interceptors as it has to add the azure access token inside each request that it's sent so here we have configured the http interceptor and also as we are going to protect some of our routes so here we have used mscl guard and also when the application is loaded it has to bootstrap app component and also msa redirect component so here we have mentioned that now inside index.html we have to add app redirect which is related to azure ready app redirect now let us add some imports related to angular material controls if you see on this page this top nav bar is material toolbar and we have used angular material buttons and this particular outline box that is angular card and the lines which are showing over here is angular material divider and this list is angular material list so we have to import all these things inside appmodule.ts here i am importing those modules you can get this information from angular material documentation and also we have to import the same modules inside this import section now let us generate a component for this profile page here press ctrl j and here i am writing ng g c ng generate component and i want to generate profile component the component is generated successfully let us generate one more component that is home component it is generated successfully now we have to add our routes configuration inside approaching module.ts class and here i am adding path that is profile and its component is profile component and we have to use msal guard on top of this because this component can only be visible if the user is logged on so this will do the check for us and here we have to add the default route the default route is home component so here i'm writing component home component and this doesn't require any msl guard configuration that means irrespective of the user login status this component can be seen and one other configuration that we have to do over here and here we have to set the initial navigation and this should be enabled for azure this top navbar and also login logout related functionality should go into app component as it acts as a layout page for our application let us write some code inside that here i am inside appcomponent.html and i am removing this default code here i am writing matte toolbar and it should have matte elevation z4 and i want to give color as primary this class elevates matte toolbar in simple words we can say like it adds some kind of shadow to the material toolbar so that it can be exposed well and after that here we need to write routing related code so here i am writing a href is equal slash that means this will redirect to the root page of the application and here i am writing class equal to title and after that here i am writing azureteach.net this will give us this particular label after that here i'm writing a matte button and router link is equal to profile this is for that profile link and here i'm writing profile now here we have to write code to display login and logout button so here i am writing button matte raised button and here i'm writing ngf we are going to declare one variable inside appcomponent.ts and based on that variable we are going to show login or logout buttons so here i am writing ngf if the user is not logged on then we are going to display login button and i am copying it and here if the user is logged on then we have to show log of button and it is complying as we haven't declared this variable so here i'm copying this and am going to appcomponent.es and inside this i am writing that variable and this is a boolean variable by default it can be set to false here the title is at complete left and the buttons are at complete right and there is some gap in between so we have to write some code related to this here i am writing deo class is equal to tool bar spacer and this will add the gap and we have to write css related to this here inside appcomponent.html we have to write one more thing that is router outlet this will display the top navbar and this will display the output of the routes those are home component or profile component here inside style.css i am importing one of the default styles of angular material that is indigo pink and also let us add some code so here i am writing html and body and this should have height of hundred percent and after that here adding code related to toolbar spacer and this should be flex one space one space auto this will give us the gap that we have seen before and after that here and after that here i'm writing a dot title and i want to display the title in white color so this refers to the title that we have written over here as this is the hyperlink it will display underline but i do not want to display the underline so here i am writing text decoration none and here i have added some css related to the fonts those will be used inside our application now inside appcomponent.html here on click of login button we have to execute some logic for login so here i am writing click is equal to login and for logout we have to execute logout logic so here i'm writing click is equal to log out now let us write login logout related code inside appcomponent.ts here we have to implement on init and ondestroy so here i am writing on innate and on destroy pressing ctrl dot here and implement all unimplemented interfaces i am just moving this to the top and after that we have to add a constructor so inside constructor we have to get few dependencies related to azure radio and inside constructor parameters i am writing the rate inject and inside this i am writing msa god config this will return msel god config and private msl god config and here we have to write the type related to that so here i'm writing a message l god configuration and after that here private msal broadcast service these are all needed to write the login related code so here i'm writing msa broadcast surveys and here i'm writing private auth service it should be msal service and inside on it we have to subscribe to azure events and decide if the user is logged on or not and for that we can use msa broadcast service dot in progress this will give us the logged in status whether it is in progress or completed so on this i'm writing pipe and inside this i'm writing filter and inside filter we have to get interaction status it should be a type of interaction status and to this we have to pass a lambda and here we have to check interaction status is equal to is equal to interaction status dot none let us go inside this code so if you see here we have different kinds of status over here so startup login logout acquire token ss silent handle redirect and here for none status set when interaction is complete that means the login is complete so we have to import this filter operator from rxjs and here after that we have to subscribe and inside the subscription we have to write this dot is user logged in is equal to this dot auth service dot instance dot get all accounts so if the user is logged in will get at least one account over here and the length is greater than zero then we can say like the user is logged in as we are using subscribe over observables we have to destroy the subscription as and when this component is destroyed to avoid memory leaks so for that here i am declaring private read-only underscore destroy it should be a new subject of void and here we have to pass it into a take until operator so here i'm writing take until and do this i'm passing this dot destroy and inside ng on destroy we have to write this dot underscore destroy dot next and i'm setting this to undefined and we are completing the subject so this dot destroy dot complete this code will take care of destroying the subscriptions let us write code related to the login so here i'm writing login and inside this if this dot msl got config dot auth request so if this is there we'll pass this object to the azure so here i'm writing this dot auth service dot login redirect and to this we have to pass the object so here i'm writing dot dot dot this dot msl god config dot auth request and this should be a type of redirect request and after that if this auth request is not there then we have to call this dot authservice.loginredirect without any object so we'll get this configuration from our appmodule.ts and here if you see here we have that auth request and inside appcomponent.ts here we can write code related to the logout so here i'm writing logout and inside this this dot or service dot logout redirect and to this we can pass a post logout ura so we can declare our post logout url inside environment dot ts and here i am writing post log out ura it should be the same ui http colon slash slash local host colon 4200 and here inside appcomponent.ts here we can pass the post logout uri so here i'm mentioning environment dot post logout url based on this setting once user clicks on logout button the user will be redirected to azure logout page and once logout is successful again the azure will redirect the request back to the post logout redirect uri that is localhost colon4200 if the user is logged in i want to display a message inside home page so let us write some code over here so here i'm writing dev star ng f is equal to and here again we are using the same flag is user log link and we have to declare this flag inside the component.ts and we have to use it so here i'm writing matte car and here inside this i'm writing matte card content and inside this i'm writing div class is equal to center and inside this i'm writing h1 class is equal to center we have to write the css style color i want to display in blue color and here i'm writing welcome to eduteach.net let us declare this variable inside homecomponent.ts so here inside homecomponent.ts i am writing is user logged in and it's a boolean variable and it should be set to false by default let us add one more css class over here so here i'm writing class is equal to title card here i'm pasting the css related to title card and also the center this will display the card inside center of the web page and show the message in the center of that particular card we need to know if the user is logged in or not inside home component also so one thing what we can do is we can go over here and we can copy this code and replicate it over here inside home component but that's a bad idea so instead we can add a shared survey so here i'm writing ng g as this generate the survey so here i'm writing azure ad demo the service is generated and we have to add this inside app modules provider section so here i'm writing azure ad demo service now inside app appcomponent.ts here i'm injecting that service so here i'm writing private azure id demo service and here i'm writing azure ad demo survey and inside azure id demo service we can declare a subject is user logged in and this should be a subject of boolean is equal to new subject of boolean now inside app appcomponent.ts so when we are setting this flag we can do this dot as your ad demo service dot is user logged in dot next and we can set this dot is user logged in now we can subscribe to this variable inside our home component.ts so here inside the constructor again we have to add dependency related to azure id demo service so here i'm writing azure ready demo service azure ad demo service and in on init i'm writing this dot azure ready demo service dot each user logged in dot subscribe and inside this i'm setting x x will be that boolean value so this dot is user logged in is equal to x i'm not writing take until and destroy over here in the similar way that we have written inside appcomponent.ts if you want to write it you can write it but this is a demo i want to leave it but if you are working for a real-time project you must have to write destroy let us run our application and test our logic the application is running now here i have access the application and clicking on login button the application redirected to the azure login page and i'm logging into the application clicking on sign in and here i am choosing skip for now clicking on s over here now the login is successful and here it is showing the welcome message i am clicking on logout button it is showing azure logout page and i am choosing the user the logout is complete and it is redirected back to our application and showing the login button if you feel this video is helpful to you please like this video and also subscribe to azureteach.net channel

Channel: AzureTeach•Net

Views: 30,252

Keywords: angular azure ad, angular application azure ad, azure ad in anuglar application, angular azure ad authentication, adding azure ad authentication to angular, angular azure authentcation, angular azure active directory authentication, azure authentication angular, azure authentication in angular, msal authenticaiton angular, msal authentication redirect, azure authentication msal angular, angular app with azure ad, angular app active directory authentication, angular azure tutorial

Id: vjpKYSmvRKQ

Length: 28min 50sec (1730 seconds)

Published: Wed Mar 09 2022