Angular Azure ad Authentication MSAL | Azure Graph Api In Angular

[@AlokKumar-nz8en]

Bro, i was following this tutorial and i have to display userEmail in header component. And when i called ,getProfile() inside ngOnInit of header.comp.ts. then i am getting issue of automatically login. Because ngoninit is a lifecycle and i am calling inside it. Can you help to resolve that issue.

[@balajeek]

Thanks for the great video, i followed step by step, i was able to make the angular web app authenticate with azure ad and also show the profile page. all i did on my current project i am working on and it works well and able to login/logout with azure ad, I continued to do the azure ad steps for webapi project, after adding the authentication as described I use postman tool to call the api and it shows unauthorized as you mentioned, but I also get unauthorized when accessing the api from angular service. I did not even get any consent page also as you said. I am not sure how i can troubleshoot to make it work.

[@azureteachnet]

can you check the configurations in app.module.ts - protected resource map? also the role assignments. If your code is not confidential, share angular code (exclude node_modules) @ [e-mail]. I will troubleshoot.

[@balajeek]

@@azureteachnet ah! you are right, there was a small mistake i made, the graph permission i called it User.Read in the AD, but from angular module i did 'user.Read', just the case sensitive make things not to work, as soon as i corrected it i got the consent screen and after accepting, it worked. Good catch man!.
I have a question, i have lot of controllers and methods in my webapi and i want all of them to be protected by AD, is there something i can do it once to Authorize instead of putting the Authorize[] in all methods or at least something right on top of each controller?
Thank you.

[@azureteachnet]

@@balajeek you can do it by adding authorization filter globally. It will protect all of your actions with azure AD. you need to add below code in Startup.cs-->ConfigureServices method.
services.AddControllers(x=>x.Filters.Add(new AuthorizeFilter()));. Please note that add controllers is already there in startup.cs. you just need to add the lambda expression.
If you have any actions, which does not need Azure AD, decorate them with [AllowAnonymous] attribute.
Thank you.

[@balajeek]

@@azureteachnet Thank you, very useful. appreciate much :)

[@pablocrz5615]

Thanks for the video, i was wondering if it is possible to retrieve a user's application-role, from the graph API and save it on the Profile Model you created?

[@azureteachnet]

That is possible.

[@balajeek]

Another question, since i got the AD setup on my angular app and webapi, is there something or anyway to temporarily disable, becaz i am still in development and trying to avoid logging in and make the authentication request like hundred times a day, I can enable once development is complete and ready to be tested/deployed.

[@azureteachnet]

you can comment out Azure AD code in startup.cs class and also in app.module.ts class of angular project. But in the Web API you may face issue if you are using claims/roles of the logged in user. For that we have to setup Identity and assign it to the context. You can give a try doing it in Startup.cs class.

[@jamessd15]

Hi If you will paste this solution in the Git hub it will be help for understanding the code

[@azureteachnet]

Thanks for your comment. Please subscribe to the channel if you have not subscribed yet.
here is the github link - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization

[@sandysurya924]

How to give permission and access data from one folder to another using graph api

[@azureteachnet]

is it on storage account or in your angular app?