-
Notifications
You must be signed in to change notification settings - Fork 461
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #595 from MicrosoftDocs/main
11/29/2023 AM Publish
- Loading branch information
Showing
11 changed files
with
1,118 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+40.5 KB
.../tutorial-single-page-app-angular-sign-in-sign-out/angular-01-not-signed-in.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+150 KB
...edia/tutorial-single-page-app-angular-sign-in-sign-out/angular-02-signed-in.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
242 changes: 242 additions & 0 deletions
242
.../customers/tutorial-single-page-app-angular-sign-in-configure-authentication.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,242 @@ | ||
| --- | ||
| title: Tutorial - Handle authentication flows in an Angular single-page app | ||
| description: Learn how to configure authentication for an Angular single-page app (SPA) with your Microsoft Entra External ID for customers tenant. | ||
| services: active-directory | ||
| author: garrodonnell | ||
| manager: CelesteDG | ||
|
|
||
| ms.author: godonnell | ||
| ms.service: active-directory | ||
| ms.subservice: ciam | ||
| ms.topic: tutorial | ||
| ms.date: 10/27/2023 | ||
|
|
||
| #Customer intent: As a developer, I want to learn how to configure an Angular single-page app (SPA) to sign in and sign out users with my Microsoft Entra External ID for customers tenant. | ||
| --- | ||
|
|
||
| # Tutorial: Handle authentication flows in an Angular single-page app | ||
|
|
||
| In the previous article, [Prepare an Angular single-page app for authentication](./tutorial-single-page-app-angular-sign-in-prepare-app.md), you created an Angular single-page app (SPA) and prepared it for authentication with your Microsoft Entra External ID for customers tenant. In this article, you'll learn how to handle authentication flows in your app by adding MSAL components and creating authentication configuration files. | ||
|
|
||
| In this tutorial; | ||
|
|
||
| > [!div class="checklist"] | ||
| > * Add authentication flows to your application | ||
| > * Import MSAL components | ||
| > * Add routes to home and guarded components of the application. | ||
| ## Create the authentication configuration file, auth-config.ts | ||
|
|
||
| 1. Create a new file called _auth-config.ts_ in the folder _src/app/_ and add the following code snippet. This file contains authentication parameters. These parameters are used to initialize Angular and MSAL Angular configurations. | ||
|
|
||
| ```JavaScript | ||
|
|
||
| /** | ||
| * This file contains authentication parameters. Contents of this file | ||
| * is roughly the same across other MSAL.js libraries. These parameters | ||
| * are used to initialize Angular and MSAL Angular configurations in | ||
| * in app.module.ts file. | ||
| */ | ||
|
|
||
| import { | ||
| LogLevel, | ||
| Configuration, | ||
| BrowserCacheLocation, | ||
| } from '@azure/msal-browser'; | ||
|
|
||
| /** | ||
| * Configuration object to be passed to MSAL instance on creation. | ||
| * For a full list of MSAL.js configuration parameters, visit: | ||
| * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md | ||
| */ | ||
| export const msalConfig: Configuration = { | ||
| auth: { | ||
| clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply. | ||
| authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain | ||
| redirectUri: '/', // Points to window.location.origin by default. You must register this URI on Azure portal/App Registration. | ||
| postLogoutRedirectUri: '/', // Points to window.location.origin by default. | ||
| }, | ||
| cache: { | ||
| cacheLocation: BrowserCacheLocation.LocalStorage, // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs. | ||
| }, | ||
| system: { | ||
| loggerOptions: { | ||
| loggerCallback(logLevel: LogLevel, message: string) { | ||
| console.log(message); | ||
| }, | ||
| logLevel: LogLevel.Verbose, | ||
| piiLoggingEnabled: false, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| /** | ||
| * Scopes you add here will be prompted for user consent during sign-in. | ||
| * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request. | ||
| * For more information about OIDC scopes, visit: | ||
| * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes | ||
| */ | ||
| export const loginRequest = { | ||
| scopes: [], | ||
| }; | ||
| ``` | ||
|
|
||
| 1. Replace the following values with the values from the Microsoft Entra admin center: | ||
| - Find the `Enter_the_Application_Id_Here` value and replace it with the **Application ID (clientId)** of the app you registered in the Microsoft Entra admin center. | ||
| - In **authority**, find `Enter_the_Tenant_Subdomain_Here` and replace it with the subdomain of your tenant. For example, if your tenant primary domain is `contoso.onmicrosoft.com`, use `contoso`. If you don't have your tenant name, [learn how to read your tenant details](how-to-create-customer-tenant-portal.md#get-the-customer-tenant-details). | ||
| 1. Save the file. | ||
| ## Import MSAL components | ||
| 1. Open _src/app/app.module.ts_ and add the following code snippet. | ||
| ```JavaScript | ||
| import { NgModule } from '@angular/core'; | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; | ||
| import { MatToolbarModule } from "@angular/material/toolbar"; | ||
| import { MatButtonModule } from '@angular/material/button'; | ||
| import { MatCardModule } from '@angular/material/card'; | ||
| import { MatTableModule } from '@angular/material/table'; | ||
| import { MatMenuModule } from '@angular/material/menu'; | ||
| import { MatDialogModule } from '@angular/material/dialog'; | ||
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { MatIconModule } from '@angular/material/icon'; | ||
| import { AppRoutingModule } from './app-routing.module'; | ||
| import { AppComponent } from './app.component'; | ||
| import { HomeComponent } from './home/home.component'; | ||
| import { GuardedComponent } from './guarded/guarded.component'; | ||
| import { | ||
| IPublicClientApplication, | ||
| PublicClientApplication, | ||
| InteractionType, | ||
| } from '@azure/msal-browser'; | ||
| import { | ||
| MSAL_INSTANCE, | ||
| MsalGuardConfiguration, | ||
| MSAL_GUARD_CONFIG, | ||
| MsalService, | ||
| MsalBroadcastService, | ||
| MsalGuard, | ||
| MsalRedirectComponent, | ||
| MsalInterceptor, | ||
| MsalModule, | ||
| } from '@azure/msal-angular'; | ||
| import { msalConfig, loginRequest } from './auth-config'; | ||
| /** | ||
| * Here we pass the configuration parameters to create an MSAL instance. | ||
| * For more info, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/configuration.md | ||
| */ | ||
| export function MSALInstanceFactory(): IPublicClientApplication { | ||
| return new PublicClientApplication(msalConfig); | ||
| } | ||
| /** | ||
| * Set your default interaction type for MSALGuard here. If you have any | ||
| * additional scopes you want the user to consent upon login, add them here as well. | ||
| */ | ||
| export function MsalGuardConfigurationFactory(): MsalGuardConfiguration { | ||
| return { | ||
| interactionType: InteractionType.Redirect, | ||
| authRequest: loginRequest | ||
| }; | ||
| } | ||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent, | ||
| HomeComponent, | ||
| GuardedComponent, | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| BrowserAnimationsModule, | ||
| AppRoutingModule, | ||
| MatToolbarModule, | ||
| MatButtonModule, | ||
| MatCardModule, | ||
| MatTableModule, | ||
| MatMenuModule, | ||
| HttpClientModule, | ||
| BrowserAnimationsModule, | ||
| MatDialogModule, | ||
| MatIconModule, | ||
| MsalModule, | ||
| ], | ||
| providers: [ | ||
| { | ||
| provide: HTTP_INTERCEPTORS, | ||
| useClass: MsalInterceptor, | ||
| multi: true, | ||
| }, | ||
| { | ||
| provide: MSAL_INSTANCE, | ||
| useFactory: MSALInstanceFactory, | ||
| }, | ||
| { | ||
| provide: MSAL_GUARD_CONFIG, | ||
| useFactory: MsalGuardConfigurationFactory, | ||
| }, | ||
| MsalService, | ||
| MsalBroadcastService, | ||
| MsalGuard, | ||
| ], | ||
| bootstrap: [AppComponent, MsalRedirectComponent], | ||
| }) | ||
| export class AppModule { } | ||
| ``` | ||
| 1. Open _src/app/app-routing.module.ts_ and replace the entire contents of the file with the following snippet. This will add routes to the `home` and `guarded` components. | ||
| ```JavaScript | ||
| import { NgModule } from '@angular/core'; | ||
| import { RouterModule, Routes } from '@angular/router'; | ||
| import { BrowserUtils } from '@azure/msal-browser'; | ||
| import { MsalGuard } from '@azure/msal-angular'; | ||
| import { HomeComponent } from './home/home.component'; | ||
| import { GuardedComponent } from './guarded/guarded.component'; | ||
| /** | ||
| * MSAL Angular can protect routes in your application | ||
| * using MsalGuard. For more info, visit: | ||
| * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/initialization.md#secure-the-routes-in-your-application | ||
| */ | ||
| const routes: Routes = [ | ||
| { | ||
| path: 'guarded', | ||
| component: GuardedComponent, | ||
| canActivate: [ | ||
| MsalGuard | ||
| ] | ||
| }, | ||
| { | ||
| path: '', | ||
| component: HomeComponent, | ||
| }, | ||
| ]; | ||
| @NgModule({ | ||
| imports: [ | ||
| RouterModule.forRoot(routes, { | ||
| // Don't perform initial navigation in iframes or popups | ||
| initialNavigation: | ||
| !BrowserUtils.isInIframe() && !BrowserUtils.isInPopup() | ||
| ? 'enabledNonBlocking' | ||
| : 'disabled', // Set to enabledBlocking to use Angular Universal | ||
| }), | ||
| ], | ||
| exports: [RouterModule], | ||
| }) | ||
| export class AppRoutingModule { } | ||
| ``` | ||
|
|
||
| ## Next steps | ||
|
|
||
| > [!div class="nextstepaction"] | ||
| > [Add sign-in and sign-out](./tutorial-single-page-app-angular-sign-in-sign-out.md) |
Oops, something went wrong.