Web Api Authentication And Authorization With Azure ad | Angular Azure ad Authentication | Azure Graph Api in Angular Application
This video has demonstration of Angular Azure AD Authentication - Web API Azure AD Authentication and Authorization and also Angular Azure AD App Azure Graph API integration for fetching Logged in user details and Profile picture.
----------------------------------------------------------------------
This video has 3 sections. first section has angular azure AD implementation, second section has Angular Azure Graph API integration to fetch logged in user details including profile picture and the third section has Web Api Azure AD authentication and Authorization.
Angular Web API Azure AD authentication and authorization
-------------------------------------------------------------------------------------------------
To implement Angular Azure AD authentication, we have to add Azure Msal library and Msal Browser packages to our angular application. We need to modify app.module.ts and in the imports section we need to add the configuration related to azure ad to implement angular azure ad authenticaiton. We have to create Azure App registration and from that we need to copy client_id and tenant_id to the configuration. In this demo, we have implemented redirect based azure ad authentication in angular. We have to configure Redirect based configuration in the same app.module.ts to create Azure Ad Angular application. We are going to consume azure graph api, so we need to add graph api details and also the web api details which has azure ad authentication and authorization. We need to add MSAL Auth Guard and also MSAL interceptor to make Angular Azure AD Authentication application. After that we have to modify app.component.ts and add Login and Logout functionality by using MSAL service. By all these settings, The Azure AD angular authentication can be implemented.
Angular Azure Graph API - Fetch logged in user details and profile pic
--------------------------------------------------------------------------------------------------------------
As mentioned in previous step, make sure to add azure Graph API details in protectedRootMap of app.module.ts which is there in angular azure ad application to integrate with azure graph api. Once the user logged in and clicks on the profile tab (watch video for more information) the angular azure ad app will redirect to azure login page. As we have mentioned azure graph api in angular azure ad application, once user logs in, azure will return the token with the permissions of graph api. if we need to access other enterprise applications, azure will provide those permissions as well in the token to angular azure ad application. Then angular azure ad web api application uses those details to call Azure Graph API and display logged in user details along with display picture.
Web Api angular azure ad authentication and authorization
-------------------------------------------------------------------------------------------------------
Web API application should be created first in order to add Web API azure AD authentication and authorization. We have to create another app registration inside azure ad and configure the client and tenantid details in side the web api azure ad application. We have to go to app registration expose as api tab and create scopes and application uri. We have to create roles in Azure App registration roles tab. We have to assign the roles to users to create Role based web api azure ad authentication and authorization application. All these settings will create a Web API azure ad authentication and authorization application which can be consumed in angular azure ad application.
Chapters
00:00 Angular Azure AD Web Api Azure Ad Intro
02:21 Creating Angular Azure AD Authentication App
03:47 Angular Azure Ad Configuration in app.module.ts
19:10 Angular Azure Ad Login and Logout
28:50 Angular Azure Ad authentication testing
29:30 Angular Azure Ad Azure Graph Api integration
39:00 Web Api Azure Ad authentication project creation
42:30 Web Api Azure Ad Authentication App Roles
46:53 Web Api Azure Ad Assign Roles to user
59:34 Web Api Angular Azure AD Authentication and Authorization Testing
Buy Me A Coffee - [ Ссылка ]
