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

[@azureteachnet]

Here is the source code - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization

[@balbeersingh123]

IrrwlSrk mz

[@balbeersingh123]

Th

[@gadour97]

Hey any idea how to make this app a dashboard for monitor my tenant security and compliance ? i can extract the data from graph API security and azure ad but I don't know whats the right logic / architecture to do I my app??

[@azureteachnet]

@@gadour97 Do you want to convert this app to a dash board? If you want to prepare dashboard, you can use Tableu or Power BI which are best visual representation tools.

[@dancristian3673]

in case you already posted how to CRUD up and MSAL with angular +node.js API i`d love it!!!! thanks in advance.

[@SubrataDas-oh1xi]

"I'm a beginner at this, and while the tutorial was helpful, I think having a bit more explanation would be a great help for me. Thanks for the tutorial!"

[@Deekudla]

keep doing more videos. Step by step approach is super useful

[@123damma]

Thank you so much for this tutorial. This is working like a charm. You are a life saver!! Thanks again.

[@azureteachnet]

Thanks for your words. It motivates me a lot in making content like this :-)

[@adityarj358]

Very helpful tutorial clear lots of doubts and give a lot of insights Thanks a lot keep doing the good work👍

[@adityarj358]

just had a query how can we do SSO using jwt.. any reference on that

[@veerakkannanp9329]

Excellent 👏👍

[@anurag3487]

Great video, very informative and crisp clear.

[@davorinkocbek4779]

Hi. My friend suggested me your videos. Exactly what I need.

[@azureteachnet]

Thanks a lot for coming to my channel and thanks to your friend too for suggesting. I make video tutorials on Azure, .Net and angular. Please subscribe if your have not subscribed yet.

[@davorinkocbek4779]

Do you have any video how to protect access to angular frontend depends on azure ad roles?

[@azureteachnet]

@@davorinkocbek4779 I dont have one. But you have to implement Angular Guard to protect your routes. Here in this video also we have used roles, Guard (MSALGuard - default azure one) but that is on API.

[@davorinkocbek4779]

Have you ever used quarkus as backend api? I have registered 2 applications (backend api and frontend angular) in azure as you did in your video. But response from backend to angular frontend is 401.

[@azureteachnet]

@@davorinkocbek4779 I am sorry. I am primarily a .Net senior Fullstack developer. I think quarkus is related to Java and I dont have idea on that.

[@atul7777777]

Very good explanation!!

[@azureteachnet]

Thank you. There are more in the channel. Please take a look and subscribe if they are relevant to you. Here is the link - kzbin.info/door/jT5Tn4qMkVkSYeP-L6gLVwvideos

[@mickduster]

Great resource. Thank you.

[@bouzidiyakoub3430]

at 29:24, I don't have the automatic redirection to the login page (localhost:4200), it stays on the Microsoft login page: "You signed out of your account" I'm using Google Chrome.

[@mobeenbashashaik9142]

did you find any fix for this?

[@manok8308]

I can say it's very helpful tutorial, it clear lots of doubts and give a lot of insights. Thanks, and keep doing the good work. However, I am wondering the below things, I am requesting you to please explain? so that others who may have the same doubts can also refer the same. 1. I am not seeing any refresh token concepts in both Angular and Web API or I don't see any call made to get refresh token in both apps. 2. What happens if the token gets expired? how and where to maintain this logic. 3. I don't see you append any access token in the header while making the http call ? how come we pass both access and refresh token ?

[@azureteachnet]

Thanks for the feedback. Right now I dont have any videos which shows angualr refresh token with Azure AD. will make video soon.

[@danilomiranda1871]

hi!, you have created 2 app in the register apps azure, this is for development environment, but for qa or production, i will have create other applications in azure?

[@shrinivaschakravarthy]

I see that the scope created was only for one API controller. Can't we make it work without a scope or by using the .default scope?? I think the role(s) was alone enough with default scope. Can you explain please?

[@lirimimeri6319]

Hi, thank you for making this very helpful tutorial. I have a question: I want that all users that have a microsoft account can login how can I do that?

[@azureteachnet]

In your app registration authentication section, add All microsoft accounts as Identity provider. This video may help - kzbin.info/www/bejne/qZWZoaCjg75khrs Please subscribe to the channel, if you have not subscribed yet. Thank you.

[@abhishekjadhav9289]

Thank you for the video playlist. But your explanation is very small and fast. Can you explain slowly and in elaborative manner ? I am new to this topic its very hard to understand in the video.

[@azureteachnet]

Thanks for the feedback. I will do it in the future videos. This video was created after many other videos which have explanations. So I thought telling the same point again and again will be redundant and waste viewers time. However, I will try to fix it. Thanks

[@vijenderreddy1475]

Thanks for you clean explanation, how can we get assigned role in the angular app for the logged in user so we can hide "Show Report" button based on the role on UI ?

[@azureteachnet]

you can get the logged in user account details by using this.authService.instance.getAllAccounts()[0]. Please refer to the github code. It will return account info object and from that you can get all the related roles of the user. Based on that you can hide the link. Please subscribe to the channel if you have not subscribed yet. Thank you.

[@dhee26]

@@azureteachnet Hello, does it mean even at angular app reg we need to create an app role and assign to user? Same like we did for web api side?

[@azureteachnet]

@@dhee26 Roles do exist only for Apis. You should not add them to client applications unless you are using the client app registration for an api too... Please subscribe to the channel if you have not subscribed yet. Thanks.

[@dhee26]

@@azureteachnet ok well noted. but as you mentioned on this first comment once we get account details you can get the roles of the user, this details actually from angular app right (which do not have roles) ? Currently roles do define at API app registration, how to get information about the roles from angular app? (In order to define hide/show for some links)

[@inplayinplay-bv3qe]

Hello, sir. Thank you for this tutorials. Is there a way to look for the source code of this tutorial?

[@azureteachnet]

I have not added this to Git Repo yet. Will share it soon. Thank you for your interest.

[@gadour97]

yes please add it!!!

[@azureteachnet]

Here is the source code - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization

[@vijenderreddy1475]

Very clean explanation, thanks so much, how to redirect to microsoft login page directly without click on the login button, I have a requirement when I put in the URL of my application it should redirect to the login and then to home page, how to set it up ?

[@azureteachnet]

In this video, for home page, in routes module, I have not added MSALGuard. If we add MSALGuard on the route, it should redirect to the login page.

[@vijenderreddy1475]

@@azureteachnet Thanks you very much, do you have any tutorial where you have angular app which gets the jwt token and pass it to the API, and how token refresh works like after 1 hour if token expires how to get the refreshed token and pass it to the api as part of the request, and in order to get token how to access azure key vault for client secret in angular app ?

[@azureteachnet]

@@vijenderreddy1475 I have Web api tutorial with jwt and refresh token.I have a video on Azure key vault too. not the angular one. In future, I will create a video for angular with jwt.

[@priyankjoshi6869]

Do we need a separate Azure ad app registration for web API We already have an app registration for angular app? Can we use the same client ID and tenant ID for web api as we are using for angular UI?

[@azureteachnet]

No

[@kanupriyagoel2257]

The tutorial is very helpful but the constant bell sound really disturbs and it will be helpful if you explain certain things more, like MsalRedirectComponent, or why is app-redirect in index.html required.

[@azureteachnet]

Thanks a lot for taking time in providing the feedback in a constructive way. Sorry for the annoying bell sound. Actually I have added that because of desperation. Viewers are appreciating my content in comments and in likes however, forgetting to subscribe to the channel. So I thought of reminding them in every important moment of the video 🙂 . Sorry for that. I will reduce adding them. Regarding MSAL redirect Component - In the demo, we have used Redirect based Azure Ad for angular. MSAL is the library to add Azure Ad to angular app and we are using Redirect Based AzureAd so we used MSALRedirectComponent. App-Redirect - This is needed in the index.html. As we are using Azure AD we must include its related components. It is like, I am a .net guy. If I want to use Azure AD in .net core I must add Azure related dlls to my project. It is also the same. There are more azure videos in my channel. Please take a look and if you feel they are relevant, please subscribe 🙂 .

[@kanupriyagoel2257]

@@azureteachnet Thanks for acknowledgement and response. Can you please help me in understanding scopes and what if I don't want to decorate controller with scopes

[@azureteachnet]

@@kanupriyagoel2257 using scopes we can make the api granular and give the permissions. You can understand it like Roles are for the users and scopes are for the applications. Assume from a .net client app you are trying to access an api. first of all, the client app should be known to your api. there can be multiple client apps which can access the api. assume, there are 3 clients. each client can access a specific controller only and it cannot access other controllers. we can use scopes to restrict the client apps. Here is a video in which I demoed using scopes on different client applications for an api - kzbin.info/www/bejne/poSUmXiIaZuDh6s

[@anurag3487]

How does the token interaction among the angular app and the API which a user has created?

[@azureteachnet]

Once the user logs in to the angular app using azure ad, azure returns the token. It will be preserved in browser cache. As we have mentioned the Web Api scope in app.module.ts , azure includes claims related to the api in token. When angular app send request to the api, MSAL interceptor (we have mentioned it in app.module.ts) includes the token in request header. As we have used azure AD at web api end too, it decodes the token and authenticates the user.

[@anurag3487]

@@azureteachnet makes sense. Thanks a lot brother.

[@franciscosalazar8116]

Hi, thanks! how could I get the role in the token claims?

[@azureteachnet]

If your question is on Front End, you can see the method which is in MSAL. If it is API, you can use Identity User Object to see the claims or even ITokenAquisation to get the entire token itself which you can decode using JWT classes.

[@azureteachnet]

This is angular code let allAccounts = this.msalService.instance.getAllAccounts(); if (allAccounts.length > 0) { let account = allAccounts[0]; let roles = account.idTokenClaims.roles; }

[@franciscosalazar8116]

@azureteachnet yes! I have two apps, a frontend and a backend, but I declared the roles in the backend according to the docs, then I get the token in the frontend, I need it there, but the roles are not being received :(

[@azureteachnet]

@@franciscosalazar8116 check if you are using proper scope while generating the token.

[@sravanthnetula7150]

Hello sir, i am working with angular 8 application, and this MSAL is not working for me, kindly help me out in this or can you do a separate video for angular 8 application with msal azure authentication as well.

[@azureteachnet]

sure. I will give a try in my machine and if it works share you the code over github.

[@anurag3487]

Hi, How do I create users and assign them different roles like Manager or Admin as you have done in the video? For ex: Jessica has a manager role and she is able to access the authorized resource which is accessible to only manager. Please guide. Thanks for your efforts.

[@azureteachnet]

Creating roles and assigning them is shown in video. If you want to create the users, Go to Active directory in azure portal, click on Users tab (left side menu). In that you can create users.

[@anurag3487]

@@azureteachnet thanks I will have a re-look. Already watched the video twice. Appreciate your efforts.

[@avanishsrivastava3464]

Hi In the same way as you did for angular and .net with azure ad, do you have something for react js and .net with azure ad?

[@azureteachnet]

I have a plan to post a video in future. Thanks.

[@jayakumar2927]

Newly added components it is same?

[@azureteachnet]

can you please eloborate.

[@aleksastokanic4221]

Great video mate! Can you draw the entire flow of the backend frontend and Azure? I would like to understand as well as possible

[@azureteachnet]

Thanks for your feedback. Do you need the flow of the components, that has been shown in this video or azure front end and backend?

[@aleksastokanic4221]

@@azureteachnet Yes, all of this. For example how frontend communicate with Azure AD when user try to login, what is happening in the background when we try to login, how Azure AD know which user is trying to login, things like that. Can you draw or explain entire logic?

[@azureteachnet]

@@aleksastokanic4221 I hope you know how JWT authentication works. Please refer this kzbin.info/www/bejne/aqqTpJpvpNKEa6c 12 minute video, if you dont know that. This entire flow use JWT authentication with oAuth2.0. Every application, which uses Azure AD authentication is identified with a client ID (Id of app registration). When the user access the application which has Azure AD authentication, it will redirect the user to the azure login page. Once user provides the credentials, azure generates the JWT token and returns it back to the application. How this work? - When the application redirect the user to azure login page, It sends ClientId, Scope and credential type as parameters. Scope means, the criteria that azure needs to consider while generating the token. For example, In an organization, it can have 100s of apis. However, the client application (here angular app) may need to access only few apis. Based on the scope, azure will limit the scopes in the token generation. IF YOU DECODE THE TOKEN OF AZURE, you can easily understand what I mean. In this example, angular app is passing scopes of azure graph api and web api. so it passed two scopes. If this client app is authorized to access these two apis, Azure validates them and generates the token with a scope array of these two apis. Here is the key thing is, most of the information that is needed is embedded inside the token itself. so once the token is generated and it will be returned to the client app and it stores the token in the local storage. Client app uses the token to call the downstream apis. I know it is lengthy answer. There is more I can explain. Please let me know If you want me to make a video. Thanks

[@aleksastokanic4221]

@@azureteachnet Thank you mate for this!! Now it's clear!

[@akshaychaudhari9905]

​@@azureteachnetcan you plz shortly explain how to use that token to call an api?

[@nolimitsREAL]

Hello, if I start from the API towards the client APP (angular, react or other app), it's always needed to configure the client app with MSAL ?

[@azureteachnet]

yup. If you use Azure AD on API, you have to use MSAL on client side. You can write your own logic to call Azure AD authorize end point to get the token, however it is a kind of re-inventing the wheel. Please subscribe to the channel, if you have not subscribed yet.

[@nolimitsREAL]

@@azureteachnet thank you

[@deepthirekhachitrapu1144]

I am a beginner, this is tutorial very useful. I got error main.ts:6 ERROR Error: NG05104: The selector "app-redirect" did not match any components. when checked in the git hub code link you provided there is no component with name "app-redirect". Thanks for your efforts.

[@azureteachnet]

Thanks for the feedback. That is msal component. Please check github.com/AzureTeachNet/AzureTeachTutorials/blob/Angular_WebAPI_AzureAD_Authentication_Authorization/azuread-angular-demo/src/index.html file. you have to add it in index.html. Please subscribe to the channel if you have not subscribed yet. Thanks.

[@BasavaKiran-n9k]

After implementing this I'm facing issue with "Provisional headers " issue on chrome as im sending bearer token with auth header. , tried all the ways to fix it, but could not able to.. please help.

Hello my friend, have a problem, show error 'MsalModule' does not appear to be an NgModule class., and using Angular 16

[@azureteachnet]

what it is showing in console?

[@klam8080]

Great tutorial. Can you please also show how to use Azure AD to authenticate one API that calls another API? I.e., the API itself is a client. Thanks.

[@azureteachnet]

sure. will create a video soon.

[@azureteachnet]

Here is the video - kzbin.info/www/bejne/oKfCp5xnfJuYfaM . Please watch it if you are still looking for it. Also please subscribe to the channel. Thank you.

[@klam8080]

@@azureteachnet Yes, thank you!

[@philmingo]

why all tutorials only using either .net5 or .net 3.1??? I'm looking for one for .net 6 and not minimal api.

[@azureteachnet]

could you please let me know what you are looking for in .net 6. I will create tutorial. I am creating tutorials on .net 5 or .net 3.1 because most of the big enterprises are still using it. 🙂

[@pabloserranomanzarbeitia1203]

Do you have any repo for the backend of this project with Typescript?

[@azureteachnet]

github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization This is complete code of the video which has both backend and UI. Please subscribe to the channel if you have not subscribed yet. Thanks

[@tipsandhacksbygaurav]

Can we use single azure ad app registration for (both backend and frontend ) ?

[@azureteachnet]

we can, but not recommended. Also, it depends on the way you are developing/configuring. App registrations are free and it is better to create an app registration for each app

[@tipsandhacksbygaurav]

@@azureteachnet quick response, thank you so much.

[@tipsandhacksbygaurav]

@@azureteachnet if I download your code from git repo and make necessary changes for app regis part, then it will work with single app regis ?

[@azureteachnet]

@@tipsandhacksbygaurav nope. It need two app registrations. Also , you have to configure app registrations with roles, authentication url etc. may I know what preventing you in creating a separate app registration for each app.

[@gadour97]

i don"t have a startup.cs file when i added it I think I forgot to add something, so I got an error and now it doesn't work anymore can I see your startup.cs file and program.cs file ?

[@azureteachnet]

Are you trying out this demo using regular .net or with .net core. If your project is not .net core, Startup.cs may not be there. Please check your project .net framework. In the video, the changes related to Startup.cs is there. I will add this project to Git by Monday and let you know.

[@ramonastoica9042]

Very helpful, exactly what I needed. Is there a way to set custom expiration time for a token? And also to request to authorize on a specific api? Thanks in advance and thanks for the tutorial! :)

[@azureteachnet]

Changing token life time may need Azure AD Premium license. Here is the information - docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-configurable-token-lifetimes "request to authorize on a specific api" - Do you mean adding authorization globally for entire api? We can specify the authorization, On an Action, On a Controller and at complete API level too. You can create a custom authorization filter or define a policy. Or even create a base controller and inherit all your controllers from it. Decorate your base controller with Authorize filter with roles. This will ensure that all your controllers can only be accessed if the user has certain roles.

[@ramonastoica9042]

@@azureteachnet Thanks a lot for your reply. But I have some more questions, if you can answer them I would be very grateful 1. Why do we need 2 redirectUri: one in Azure and one in Angular code? What can we do if we have multiple environments (dev, stage, live)? 2. Is the permission "User.Read" from Api permissions needed if I've created custom roles for the users? 3. Why do we need 2 app registrations (the WebApiAzureAngularDemoApp and angularazureadapp) and I didn't understand why we need a scope if we create custom roles? 4. Can we somehow get the roles from Azure in Angular? I have tried some methods, but I only managed to get the name, username, scopes and all other configs, but not the roles 5. Can we update more directly the user roles in app when changing/deleting/adding a role in User roles in Azure? Cuz now if I change a role I need to logout and clear cache and login again so that the roles are updated with the last changes.

[@azureteachnet]

@@ramonastoica9042 1. Understand it with a scenario. Your angular app exposes client Id which anybody can read from the url. If any malicious person want to use the same app id he can do so. Then we can make azure AD to redirect to any web site we want. Assume, actual website is www.abc.com. an malicous person want to redirect the request to www.xyz.com. he can easily do it. To avoid it, we must set the redirect uri. Azure will validate the url and check if it is the same url that is configured in it or not. Otherwise simply returns an error.

[@azureteachnet]

@@ramonastoica9042 2. It all depends on your need. This video has the use of Azure Graph API. With Every App registration, by default you will get User.Read permission with in app registration. If you dont need it, you can remove it.

[@azureteachnet]

​@@ramonastoica9042 3. General rule of thumb - number of app registrations = number of applications which uses Azure AD. However we can use a few app registrations for all the applications which is not recommended. Scope is needed because, Azure needs to validate the app which is accessing it. Other thing is, Assume your organization has 1000 applications and all of them have various roles defined in azure. A user, may be an admin user who has access to all the applications. Now user login to Application-1. How will azure know which roles to include in the access token (jwt)? It cannot include roles of 1000 apps rite? So it will check the scope and based on the scope it will include the roles which are specific to that application. You can assume like , Roles are for the users and scopes are for the client applications. You can check this video - kzbin.info/www/bejne/poSUmXiIaZuDh6s . It has web api authentication and authorization using Azure AD and the client applications which has scopes

[@matjazhafner2000]

Great video! Can you do the same for quarkus instead of .NET? Quarkus API, angular frontend, both protected with azure AD.

[@azureteachnet]

I worked on Java for sometime but too less. I am primarily a dotnet developer/lead from past 11 years. If I have to create a video on quarkus, I need to spend time in learning the basics instead of directly creating a tutorial 😁

[@matjazhafner2000]

You dont have to learn quarkus 🙂 Angular part is enough for me to try Azure SSO. Btw, is it possible to automatically redirect an unauthenticated user to the MS login page when a user visit the site (without clicking the login button)?

[@azureteachnet]

@@matjazhafner2000 yes. we can do that. In this video, in routes module, I did not add MSALGuard to Home route. so it is not redirecting to login. But If you add MSALGuard to any route, if somebody who is not logged and open the page, it will redirect to login page.

[@matjazhafner2000]

Thank you. I will try. I am choosing between MSAL and angular-oauth2-oidc library. I dont have much experiences with Azure SSO so I need to find a proper library which will suit my needs.

[@matjazhafner2000]

Is it possible to get the name of logged in user without calling the graph/me endpoint? I would like to display the name of logged in user in page header. What would be the best way to do that (another Subject like isUserloggedIn in app.component.ts)?

[@mihirdwivedi4297]

Sir, i've created SAP app with your code, first it was working fine . But now when i run the app it goes to Microsoft login without clicking Login button and localhost page is reloading again and again... please help

[@azureteachnet]

Clear the browser cache and try again. Also check, if you have added MSAL guard on the landing page.

[@naresh1253]

I am getting 401 unauthorized error for profile pic API, any help there?

[@azureteachnet]

please check the configuration in app.module.ts. Did you add it in protected resource map. Please comapre with github code and let me know if you still face the issue.

[@naresh1253]

@@azureteachnet All looks good, Infact the User Profile information is working and I am getting that data, but just the Profile Pic endpoint is erroring out with 401

[@azureteachnet]

@@naresh1253 are you using Azure AD B2C?

[@KhoaTran-oj3wm]

Can we also have a ReactJS version of these topics please?

[@azureteachnet]

sure

[@jayakumar2927]

How to other IDP using MSAL library

[@sanjay-q5c6e]

Angular AD & B2C video please

[@azureteachnet]

Even I am thinking to create a video on that. Soon will upload. Please subscribe to the channel if you have not subscribed yet. Thanks.

[@sanjay-q5c6e]

@@azureteachnet subscribed

[@erickgordillo4786]

net Framework ?

[@azureteachnet]

.Net 5. you can use the same code in 6 as well.

[@pradeep83shinde]

Please add source code, it's very good article

[@azureteachnet]

Sure. By Monday, I will share the github link

[@azureteachnet]

Here is the source code - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization