Angular Azure Active Directory(ad) Authentication Using msal скачать в хорошем качестве

Angular Azure Active Directory(ad) Authentication Using msal

Angular Azure Active Directory(ad) Authentication Using msal Angular Azure ad authenticaiton using Redirects ------------------------------------------------------------------ The video has Angular Azure AD authentication Demo. It is very easy to add azure ad authentication to angular application. We have to install MSAL package which is provided by microsoft and also Microsoft browser package. To add azure ad authentication angular, first step is we have to modify app.module.ts file. this file is the most important file in angular azure ad authentication. ------------------------------------------------------------------ changes in app.module.ts for enabling angular azure ad authentication To add azure ad authentication to angular application, we have to add MSAL.forRoot call in app.module.ts. It accepts a PublicClientApplication object and in that we have to pass azure ad appregistration details to enable azure ad authentication in angular and after that we have to set cache location and based on this setting angular azure ad will store the authentication token at client side. Then we have to set Authentication type. Angular Azure AD authentication supports two types of authentication. using azure ad popups and azure ad redirects. In this demo I have shown using redirects. Then we have to set MSAL guard configuration. In providers section we have to set MSAL intercepter as HTTP_INTERCEPTER which will intercept the ajax calls and adds azure ad token in the header when it is accessing apis. We need to protectedResourceMaps and in that we need to mention those need to be protected when accessing apis using azure ad angular application. ----------------------------------------------------------------------- change app.routing.module.ts to enable azure ad authentication in angular we need add routes and also set initial navigation. We have to add MsalGuard for proteced routes for angular azure ad. -------------------------------------------------------------------- change app.component.ts to enable angular azure ad we need to add login logout code in app.component.ts also we need to add angular material tool bar. To enable login in azure ad angular application, we have to use MsalBroadcastService and listen to inprogress event. we have to filter on the status. if the status is None that means azure ad authenticaiton in angular is completed. later we have to check for number of accounts in msal instance and based on that we can decide if the user is logged in or not in angular azure ad application. We need to use Msal Service's loginRedirect call to send redirect request to Azure Ad login page and once the user logs in we have to redirect back to the angular application. One final thing is we have to create an app registration in azure and use client id and tenant id then configure the public client application in app.module.ts. This will complete adding azure ad authentication to angular application. On click of login button user will be redirected to azure login page and once the login is successful, user will be redirected to angular application. If the user clicks on logout button, user will be redirected to azure logout page and once user complete logout there, logout will be successful and redirected back to angular application. Chapters 00:00 Angular Azure Ad authentication intro 00:50 Creating angular project for azure ad 01:36 Creating appregistration 03:15 Modifying app.module.ts 12:05 Adding angular material modules 13:00 Modifying app-routing.module.ts 14:18 Modifying app.component.html 18:00 adding login and logout for angular app using azure ad 28:00 Testing angular azure ad functionality BUY ME A COFFEE - https://www.buymeacoffee.com/azuretea...