Web Api Authentication And Authorization With Azure ad | Angular Azure ad Authentication

welcome to azureteach.net we are going to develop an angular application that will look like this on click of login button the user will be redirected to azure login page and once the login is successful the user will be redirected back to angular application and will show a welcome message over here here we have the profile tab and on click of this we are fetching this user information and also the profile picture from azure graph api here we have the reports tab and this is driven by a web api and in that we have implemented authentication and authorization through azure this get report action is only accessible by the user who has the manager role but this get report status is accessible by any user who has logged in here i have logged in with a user who has manager role and now i am clicking on the reports tab and clicking on the show report status and this is accessible by everybody now i am clicking on the show report tab and this is accessible by the user who has the manager role on click of this it will fetch a report and display like this here i have logged in with a non-manager user on clicking of reports tab it will show the ui like this but if i click on show report it will show unauthorized before we start please subscribe to azureteach.net for more videos on azure and dot net we need to create new project and add required packages so here i am typing ng new azure ad angler demo we need routing for this so i'm 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 am in portal.azure.com i am going to azure active directory and app registrations here i am creating a new app registration and here i am giving name as angular as your ad app and i want to go with the default settings i'm 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 permissions 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'm 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 azure 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 localhost colon4200 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 colon4200 and the same we have configured inside our app registration and after that here we have to write cache and here catch a location will be local storage and after that here store or 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 off 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 pop-ups 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 am writing an object and this is related to mscl guard 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 rate 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 nrf 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 msel guard 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 guard is configured this will protect that root 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 mscl 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 difficult 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 mscl 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 redirected 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 roots so here we have used msl 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 app routing module dot ts class and here i'm 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 ad 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 edu teach dot this will give us this particular label after that here i'm writing a mat 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'm writing button matt 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'm 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 logout button and it is complying as we haven't declared this variable so here i'm copying this and i'm going to appcomponent.ts 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 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 am writing click is equal to log out here inside appcomponent.html we have to write one more thing that is router outlet this will display the top number 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 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 id and inside constructor parameters i am writing the rate inject and inside this i am writing msa guard config this will return msal 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 god configuration and after that here private msl 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 msal broadcast service dot in progress this will give us the login status whether it is in progress or completed so on this i'm writing i 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 for 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 printer 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 to this i'm passing this dot destroy and inside ng on disk drive 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.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 art service dot login redirect without any object so we'll get this configuration from our app module.ts and here if you see here we have that auth request and inside appcomponent.ts here we can write code related to the log out so here i'm writing logo and inside this this dot auth service dot log out redirect and to this we can pass a post logout ura so we can declare our post logout url inside environment.ts and here i am writing post logout 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 store ngf 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 dot 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.ta 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 appcomponent.ts here i'm injecting that service so here i'm writing private azure ad demo service and here i'm writing azure ad demo survey and inside azure ready 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 appcomponent.ts so when we are setting this flag we can do this dot azure 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 ad demo service so here i'm writing a journey 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 am 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'm choosing the user the logout is complete and it is redirected back to our application and showing the login button now let us add code to display this profile information for this we have to call the azure graph api here inside azure ad demo service that we have created before i am pasting the azure graph api endpoints we have to generate a model class to hold the profile information so here i am writing ngg class profile and hyphen hyphen type equal to model so this will generate a class with name profile model in this model we have to add some properties so i'm pasting the code over here so please note that here i have changed the class to interface here we have all the set of properties that we are going to display on the profile screen now go back to azure ad demo service here we have to get the profile information and also the profile pic to access the graph api we need to make ajax calls and for that we have to import http client module inside our appmodule.ts so here i'm importing http client module and we have to mention the same inside import section so here i'm writing http client module now go back to azure ready demo service and we have to import http client over here http client now let us add two methods one for getting the user profile another one is for getting the user profile pic so here i am writing get user profile and inside this i am returning this dot http client dot get and it will return an observable of profile and after that inside this we are passing graph endpoint and i am copying this method and pasting it over here and here i am writing get profile pic and here i am using graph endpoint underscore pic and here one more thing that we have to note is we have to mention the response type and it should be blob and we have to remove this so for this method the service will return json data so we can typecast that to profile but here the service will return a picture that is a blob so we have to mention the response type as blob now go to profile component.ts and here add the dependency related to azure ad demo service and it should be azure ad demo service and also we need one more dependency that is dom sanitizer and this is needed when we are downloading the picture so here i am writing dom sanitizer and also here we have to declare a variable profile and it should be profile and also profile pic and this should be a type of safe resource url here i am writing a method get profile and inside this this dot agreed demo service dot get user profile dot subscribe and here i'm writing profile info and after that lambda expression and here this dot profile is equal to profile info now here i'm writing another method get profile pic and inside this this dot azure id demo service dot get profile pic and after that subscribe and here responds lambda and after this here we have to create the response as in url so here i'm writing url creator is equal to window dot url or window dot webkit url it should be capital window dot url and after that here this dot profile pic url that is desktop profile pic is equal to this dot dom sanitizer dot bypass security truss resource url and to this we have to pass url creator dot create object url and inside this we have to pass the response so what we are doing here here we'll get the response that is the profile pic as blob and we are converting that blob into a url as image that needs a url and the browser will give a security issue so we have to sanitize this so we are sanitizing the blob or the url using this method now let us go to profile component.html write html code to display the profile information and the picture information so here i am writing div style is equal to margin auto because i want to display the content center of the screen so here i'm writing margin as auto and width as 60 percent and after that here i'm writing matt card matte card and inside this matte card title and i want this to be centered so here i'm writing style text align center and here i'm writing user information and after that here matte card content inside matte card content we are going to display this user information and also the profile pic and we have to display these side by side so here i am writing leo style display inline block this is for the user information and the second one is for the user profile pic and inside the i'm writing mat list and style i want to give max width and it should be 50 viewport width now let us write some css classes so here inside profile component dot css here i'm writing list item title and this should be display inline block and padding i want 5 ex and font weight as this is a title i want to give bold and i'm copying it and pasting it over here and this should be list item content and i'm running this font right now insert profile component.html here i am writing math divider and after that here matte list item inside this div this one is for the label so here i'm writing class list item title and i'm copying it and pasting it over here and it should be list item content and here i'm writing the label as username and here we have to display the username so that will be inside user principle so here i'm writing profile dot user principle name now we have to replicate this part and display other items in interest of time i'm pausing the video and i'm writing the phone now i have added the content to display other items over here now here inside the second view we have to display the profile pic so here i'm writing mat card and after that matte card content here we have to note one thing i'm writing img tag and here the src should be in square braces otherwise the browser will give error and here we have to put the profile pic variable so i'm copying this and going over here and pasting it and i'm setting the height as 250 pa and also we have to set the width also the same width 250 px and i'm closing this tag now let us run this solution npm start one thing we forgot we have to call these methods inside ngoninit so here i'm writing get profile this dot get profile pic now let us save and run this application here i logged into the application and clicking on the profile tab and here if you see we got the information in the format that we are looking for and here if you see the divider lines came out of this image so if you want to keep these lines inside this part you can set one property inside your code so here for this matte divider i'm setting insert is equal to true and i'm copying this to all matte dividers now if you see the lines stayed inside this box till now we have discussed about azure ready authentication now let us create a web api application and discuss about authorization here i am creating a new asp.net core wave api application clicking on next and i am naming it as web api angular ad demo clicking on next and clicking on create to this we have to add some packages so i'm right clicking on the project and manage nuget packages and here i'm going to browse and here i'm searching for identity.web and installing this package now inside startup.cs class i am adding a namespace using microsoft.identity.web and after that here in the configure services i am writing services dot add authentication and to this we are passing jwt bearer defaults press ctrl dot and add this namespace and here i'm mentioning authentication scheme and after that here we have to write add microsoft identity web api and to this we have to pass the configuration object which is there already at the top so here we have that and after that here we have to pass the azure id configuration name if you see the method signature the config section name is mentioned as azure ready if you use a different name you have to pass it but i want to go with the azure id configuration only so here now i'm going to appconfigsettings.json and here i'm writing azure 80 and after that here we have to pass certain details so here we have to pass client id will get this information after creating an app registration and here we have to write instance this will be https colon slash slash login dot microsoft online dot com and after that here we have to pass tenant id tenant id and this is also we can get from the app registration now inside startup.cs class before authorization we have to write app.use authentication and after that inside portal.azure.com under default directory we have to create an app registration and here i am naming it as web api azure angular demo app and i'm going with the default settings i'm clicking on resistor so here we have client id i'm copying it and going to the app settings.json and pasting it over here and also here we have the tenant id i'm copying it and pasting it over here now we have to expose this as an api go to expose as an api and set application url click on save and once after doing this we have to add a scope and i am naming this as api dot scope and this is for admin send users i'm copying this and pasting it over here here and i'm clicking on add scope now we have to go to app roles and define an app role so here i'm clicking on create app role and i'm defining an app role as manager and here also i'm giving manager and here also i'm giving manager and i wanted to use for users and groups i am clicking on apply now go back to visual studio and add a controller so here i am adding a controller right click add new controller and here i am choosing api api controller empty and i am naming it as report controller and after that here i am adding a method public i action result and i want to name it as get report and after that here i'm writing written file of system dot io dot file and here i want to read a pdf that is inside my local drive and i want to return that so here the content type should be application slash pdf so we are going to return a pdf from here and that will be displayed inside the angular app inside the due tag so we are going to return this pdf from this api and this should be accessible only by the manager so here i am writing authorize press ctrl dot and inside this i'm passing manager role and after that i want to give http get word over here and i want to go with the action name so here i'm writing the action here i have pasted the pdf path and here i am adding one more method public i action result get report status this can be accessed by anybody who logged into the application so here i'm writing authorize but we are not passing any roles to this and here i am decorating it with http gate and here also i want to go with the action so i'm writing the action over here and inside this i am returning written okay of new anonymous object and here i'm writing status addreit report generated it and here i am appending date time dot now dot to string and here i am writing m m d d y y y colon h colon mm colon ss so assume there is a batch job running inside our organization and that is generating this report so user can get report generation status from this method and this can be accessible by any logged in user but this can be accessible only by the manager and one more thing that we have to do is we have to define the scope of the application over here so here i'm writing scopes and this scope should be the scope that we have defined inside the apa so if you go over here and go to expose as an api and here click on this so this is the scope that we have created copy it and go over here and paste it over here and we have to define the scope over here so here i'm writing required scope press ctrl dot and we have to add this namespace to this we have to pass this required scopes configuration key and this we can get from here there is a typo it should be scopes and i'm copying this and pasting over here in the controller and after that colon and after that i'm copying this and i'm pasting it over here now let us assign role to the user so i'm going to portal.azure.com and in the default directory i am going to enterprise applications and here this is the application registration that we have created i am going inside this and after that here i am clicking on assign users and groups and after that here i'm clicking on add user group and here i'm selecting the user and here we have jessica adams and selecting this and clicking on select and here we have only one role and by default it is assigned and clicking on assign and we are going to test our application for manager role with this user and also we have a different user that is this adam robert we're going to use this as non-manager user now let us run this api and see if it is working fine before we run there are few issues that we have to fix here we have to pass this under roles and also inside app settings.json here we have forgot the comma now let us run this web api project it opened the swagger ui so i'm clicking over here and clicking on try it out if our azure id works fine then it will return unauthorized error so i'm clicking on try it out clicking on execute so here if you see we got unauthorized error that means the authentication is added to our web api application now let us go back to angular application and make the changes over there first and foremost thing that we have to do is we have to go to appmodule.ts and inside the protected resource map here we have to add the api related information so here we have to add the api path that is local host because our api runs at localhost and after that here we have to pass the scopes so let us go back to our azure portal and go to the default directory and go to app registrations and inside [Music] our app registration here expose an api and copy this scope and go to our angular application and paste it over here and after doing this i am generating a component so here inside powershell here and writing ng g c report so this will generate the reports component and here inside approaching module dot ts here we have to add one more route so i'm copying this one and i'm pasting it over here naming it as reports and here the component will be report component and this needs msal guard after that here inside azure id demo service i am defining the uri for the reports api so here i am writing reports api base ura is equal to let us go to the swag so here i am copying this url and going back to here and pasting it over here and after that here i'm defining two methods get report and inside this i'm copying this and pasting it over here and here i'm taking the reports base url plus we have to write the action name the action name is get report so it will be report slash gate report so here we have to add api slash and here report slash get report now i'm copying this method and pasting it over here get the report status and here it is returning any and here we have to do the similar thing like we have to append this url and it should be report slash get report status so now we have added code to interact with our local host web api now let us write code inside report component.ts here i'm writing private as you ready demo service and it should be as you ready demo service and here i'm writing a method get report and after that here i'm declaring a variable that is pdf url and it should be safe resource url press ctrl dot and add this import and after that here writing this dot a jewelry demo service dot get report and after that here i'm subscribing to this and after that here inside this i'm writing response and after that here where url creator is equal to window dot url or window dot webkit url and after that here this dot pdf url is equal to this dot dom sanitizer this we haven't imported it so here we have to go and import private dom sanitizer and this should be dom sanitizer and after that here we have to use bypass security trust resource url and inside this we have to use url creator dot create object url and after that here we have to pass the response so this will give us the pdf and let us write one more method and before that let us declare one more variable here the report status it should be string and we have to make it nullable and here i'm writing get report status and here this dot azure demo service dot get report status dot subscribe and here we'll get response and after that here i'm writing this dot report status is equal to response dot status because this is we are returning from the api now here i am writing some code inside report component dot html so here and writing blue style is equal to margin auto i want to keep this content center so i'm giving auto and width as 80 and after that height as ninety percent and now inside this wave i want to keep two buttons center so here i'm writing their style margin 0 auto and after that here i'm giving width as 80 or 90 percent and after that here i am giving text align center i am closing this video and here i am adding two buttons button matte raised button and i want to give primary color to this and on click of this i want to call the api to get the report so here i'm writing get report and i'm copying this and i'm pasting it over here it is showing the error over here let us see the method name that we have written so it is get report so here we have a typo so it should be get report so we have to correct our typo here as well so it should be get report and also we have to correct our typo inside azure ready demo service i'm going over here and here also we need to correct our api endpoint so here we have the correct one only so i'm going to get report so here inside report component.html this is fine and for the second method i'm copying this and pasting it over here now here i'm adding duo ng a pdf url so if the pdf url is there then only we can display this content so here i'm adding matte card and after that here i'm adding matte card content and after that here we are displaying the pdf inside the html page itself so for that we have to use object tag and here i'm writing data is equal to pdf url and after that it is the type of application slash pdf and here we have to give some style style min height is 100 percent i want to give that is 100 vh and i'm giving the width as 100 now i'm closing this object tab here we have to add the button text so here i'm writing show report and here i'm writing show report status here i'm writing the report status so i'm going over here and i'm copying this i'm going to the report component.html and pasting it over here as this method can only be accessed by the manager if anybody else access this method we have to display the error so here i'm writing error and it should be http error response and after that here if error dot status is equal to is equal to 4 0 1 or error dot status is equal to is equal to 4 0 3 then i want to display error in a snack bar so we have to add input for that inside appmodul.tf so here i'm adding the import and we have to add this inside import section also and also we have to add dependency related to mad snack bar over here so here i'm writing private snack bar and it should be snack bar and here i'm writing this dot snack bar dot open and here i'm adding a message you are unauthorized to work with snack bar we have to import browser animations module also so here i am importing browser animations module now we have to display our routes so here we have to add one more link that is reports so here i am copying it and pasting it and here i am copying the route name and going over here and pasting it over here and i am naming it as reports one last thing that we have to do is we have to enable cars inside our application so here i am writing app dot use cards and it accepts options and inside options i am writing options dot allow any method dot allow any header dot allow any origin so this will enable the course and i am running the api the api is running fine here our angular application is also running please note that here i have added this css now let us access this application with non-manager user credentials now i am clicking on login button and here i have used adam robert he is a non-manager user i am clicking on next here i'm entering the password signing in now i'm clicking on the profile button it displayed the profile now i'm clicking on the reports button if you are clicking these two buttons for the first time you will be redirected to azure consent page and that is not an issue because if the user access any new api from the application azure will show you the consent page but here i have already accessed the application using these two buttons so it is not showing me the consent page let me click on show report status it is showing the report status over here now i am clicking on show report button this user shouldn't have access and it should show you are unauthorized so i'm clicking over here so it showed us unauthorized now let us access our application as manager i'm clicking on login button and here i am pasting jessica email id she is the manager i am clicking on next button and here i am entering the password and clicking on sign in here is the welcome screen i am clicking on profile button and it is showing us the profile i am clicking on reports i am clicking on show report status it showed us the report status and as jessica as a manager she should have access to see the report so here i am clicking on show report and it displayed the report and the report is displayed inside the web page and we can see the report over here it takes a great effort and time to make all these kind of tutorial videos if you feel these videos are helpful to you please like this video share it with your friends and also subscribe to azureteach.net channel thank you

Channel: AzureTeach•Net

Views: 28,306

Keywords: Angular Web Api Azure Ad, angular azure ad web api azure ad authentication and authorization, web api azure ad authentication, Azure AD Angular authenticaiton, Web API angular azure ad authentication, azure ad angular web api, angular azure ad web api azure ad, angular azure ad authentication with web api azure ad, angular web api azure ad, angular webapi azure ad authentication, angular azuread web api azure ad, angular web api azure ad authentication, web api azure ad

Id: 98T1CumHofI

Length: 61min 38sec (3698 seconds)

Published: Tue Mar 15 2022