Tutoriel : Gérer les flux d’authentification dans une SPA Angular

Article
07/26/2024

Ce tutoriel est la troisième partie d’une série qui présente la construction d’une application monopage Angular (SPA) et sa préparation à l’authentification. Dans la Partie 2 de cette série, vous avez créé une SPA Angular et vous l’avez préparée pour l’authentification auprès de votre locataire externe. Dans ce tutoriel, vous apprendrez à gérer les flux d’authentification dans votre application en ajoutant des composants de la Bibliothèque d’authentification Microsoft (MSAL).

Dans ce tutoriel,

Ajouter des flux d’authentification à votre application
Importer des composants MSAL
Ajoutez des itinéraires aux composants d’accueil et protégés de l’application.

Prérequis

Tutoriel : Préparer votre locataire externe à authentifier les utilisateurs dans une application monopage Angular.

Créer le fichier de configuration d’authentification, authConfig.js

Créez un fichier appelé auth-config.ts dans le dossier src/app/ et ajoutez l’extrait de code suivant. Ce fichier contient des paramètres d’authentification. Ces paramètres sont utilisés pour initialiser des configurations Angular et MSAL Angular.


/**
 * 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: [],
};

Remplacez les valeurs suivantes par les valeurs du centre d’administration Microsoft Entra :
- Recherchez la valeur Enter_the_Application_Id_Here, puis remplacez-la par l’ID d’application (clientId) de l’application que vous avez inscrite dans le Centre d’administration Microsoft Entra.
- Dans autorité, recherchez Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine de votre locataire. Par exemple, si votre domaine principal du locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez comment consulter les détails de votre locataire.
Enregistrez le fichier.

Utilisation d’un domaine d’URL personnalisé (facultatif)

Utilisez un domaine personnalisé pour personnaliser entièrement l’URL d’authentification. Du point de vue des utilisateurs, ces derniers restent sur votre domaine pendant le processus d’authentification, au lieu d’être redirigés vers le nom de domaine ciamlogin.com.

Procédez de la manière suivante pour utiliser un domaine personnalisé :

Utilisez les étapes décrites dans Activer les domaines d’URL personnalisés pour les applications dans des locataires externes afin d’activer un domaine d’URL personnalisé pour votre tenant externe.
Dans votre fichier authConfig.js, recherchez l’objet auth, puis :
1. Mettez à jour la valeur de la propriété authority sur https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Remplacez Enter_the_Custom_Domain_Here par votre domaine d’URL personnalisé et Enter_the_Tenant_ID_Here par votre ID de locataire. Si vous ne disposez pas de votre ID de locataire, découvrez comment consulter les détails de votre locataire.
2. Ajoutez une propriété knownAuthorities avec une valeur [Entrer_le_domaine_personnalisé_ici].

Après avoir apporté les modifications à votre fichier authConfig.js, si votre domaine d’URL personnalisé est login.contoso.com et que votre ID de locataire est aaaabbbb-0000-cccc-1111-dddd2222eeee, votre fichier devrait ressembler à l’extrait de code suivant :

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

Importer des composants MSAL

Ouvrez src/app/app.module.ts et ajoutez l’extrait de code suivant.

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

Ouvrez src/app/app-routing.module.ts et remplacez l’intégralité du contenu du fichier par l’extrait de code suivant. Cela ajoute des itinéraires aux composants home et 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 { }

Étape suivante

Partie 4 : Connexion et déconnexion de la SPA Angular

Partager via