Självstudie: Hantera autentiseringsflöden i ett Angular SPA

Artikel
07/25/2024

Den här självstudien är del 3 i en serie som visar hur du skapar en Enkelsidig Angular-app (SPA) och förbereder den för autentisering. I del 2 i den här serien skapade du ett Angular SPA och förberedde det för autentisering med din externa klientorganisation. I den här självstudien får du lära dig hur du hanterar autentiseringsflöden i din app genom att lägga till MSAL-komponenter (Microsoft Authentication Library).

I den här självstudien;

Lägga till autentiseringsflöden i ditt program
Importera MSAL-komponenter
Lägg till vägar till hembaserade och skyddade komponenter i programmet.

Förutsättningar

Självstudie: Förbered din externa klientorganisation för att autentisera användare i ett Angular SPA.

Skapa konfigurationsfilen för autentisering auth-config.ts

Skapa en ny fil med namnet auth-config.ts i mappen src/app/ och lägg till följande kodfragment. Den här filen innehåller autentiseringsparametrar. Dessa parametrar används för att initiera Angular- och MSAL Angular-konfigurationer.


/**
 * 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/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
 */
export const loginRequest = {
  scopes: [],
};

Ersätt följande värden med värdena från administrationscentret för Microsoft Entra:
- Leta upp värdet Enter_the_Application_Id_Here och ersätt det med program-ID (clientId) för appen som du registrerade i administrationscentret för Microsoft Entra.
- I utfärdare letar du upp Enter_the_Tenant_Subdomain_Here och ersätter den med underdomänen för din klientorganisation. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn kan du läsa klientinformationen.
Spara filen.

Använda anpassad URL-domän (valfritt)

Använd en anpassad domän för att helt märka autentiserings-URL:en. Från ett användarperspektiv finns användarna kvar på din domän under autentiseringsprocessen, i stället för att omdirigeras till ciamlogin.com domännamn.

Använd följande steg för att använda en anpassad domän:

Använd stegen i Aktivera anpassade URL-domäner för appar i externa klienter för att aktivera anpassad URL-domän för din externa klientorganisation.
Leta upp objektet i auth authConfig.js-filen och sedan:
1. Uppdatera värdet för authority egenskapen till https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Ersätt Enter_the_Custom_Domain_Here med din anpassade URL-domän och Enter_the_Tenant_ID_Here med ditt klient-ID. Om du inte har ditt klientorganisations-ID lär du dig att läsa klientinformationen.
2. Lägg till knownAuthorities egenskap med ett värde [Enter_the_Custom_Domain_Here].

När du har gjort ändringarna i din authConfig.js-fil , om din anpassade URL-domän är login.contoso.com och klientorganisations-ID:t är aaaabbbb-0000-cccc-1111-dddd222eeee, bör filen se ut ungefär så här:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

Importera MSAL-komponenter

Öppna src/app/app.module.ts och lägg till följande kodfragment.

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 { }

Öppna src/app/app-routing.module.ts och ersätt hela innehållet i filen med följande kodfragment. Detta lägger till vägar till komponenterna home och guarded .

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 { }

Gå vidare

Del 4: Logga in och logga ut från Angular SPA

Dela via