Partager via

Tutoriel : Créer une application Angular monopage et la préparer pour l'authentification

S’applique à : Cercle vert avec un symbole de coche blanche. Locataires d’employés Cercle vert avec un symbole de coche blanche. Locataires externes (En savoir plus)

Ce tutoriel est la première partie d’une série qui illustre la création d’une application monopage Angular (SPA), l’ajout d’authentification et l’extraction de données utilisateur à l’aide de la plateforme d’identités Microsoft.

Dans ce tutoriel, vous allez :

  • Créer un projet Angular
  • Configurer les paramètres de l’application
  • Ajouter du code d’authentification à l’application

Prérequis

  • Un locataire d’employés. Vous pouvez utiliser votre répertoire par défaut ou configurer un nouveau locataire.
  • Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
    • ID d’application (client)
    • ID de l’annuaire (locataire)
  • Ajoutez les URI de redirection suivants à l'aide de la configuration de la plateforme d'application monopage. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
    • URI de redirection : http://localhost:4200/.

Créer un projet Angular

Dans cette section, vous allez créer un projet Angular à l’aide de l’interface CLI Angular dans Visual Studio Code. Choisissez l’onglet approprié en fonction du type de locataire.

Pour créer le projet Angular à partir de zéro, procédez comme suit :

  1. Ouvrez une fenêtre de terminal et exécutez la commande suivante pour créer un projet Angular :

    ng new msal-angular-tutorial --routing=true --style=css --strict=false

    La commande crée un projet Angular nommé msal-angular-tutorial avec routage activé, CSS pour le style et mode strict désactivé.

  2. Accédez au répertoire du projet :

    cd msal-angular-tutorial

  3. Installez les dépendances d’application :

    npm install @azure/msal-browser @azure/msal-angular bootstrap

    La commande npm install @azure/msal-browser @azure/msal-angular bootstrap installe le navigateur Azure MSAL, Azure MSAL Angular et les packages Bootstrap.

  4. Ouvrez angular.json et ajoutez le chemin CSS du Bootstrap au tableau styles :

    "styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

    Le code ajoute le CSS du Bootstrap au tableau de styles dans le fichier angular.json.

  5. Générez les composants Accueil et Profil :

    ng generate component home
ng generate component profile

    Les commandes génèrent les composants Accueil et Profil dans le projet Angular.

  6. Supprimez les fichiers et le code inutiles du projet :

    rm src/app/app.component.css
rm src/app/app.component.spec.ts
rm src/app/home/home.component.css
rm src/app/home/home.component.spec.ts
rm src/app/profile/profile.component.css
rm src/app/profile/profile.component.spec.ts

    Les commandes suppriment les fichiers et le code inutiles du projet.

  7. Renommez app.routes.ts en app-routing.module.ts à l’aide de Visual Studio Code et mettez à jour toutes les références de app.routes.ts dans l’application.

  8. Renommez app.config.ts en app.module.ts à l’aide de Visual Studio Code et mettez à jour toutes les références à app.config.ts dans l’application.

Une fois ces étapes terminées, la structure du projet doit ressembler à ceci :

.
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── home
│   │   │   ├── home.component.html
│   │   │   └── home.component.ts
│   │   └── profile
│   │       ├── profile.component.html
│   │       └── profile.component.ts
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   └── styles.css
├── tsconfig.app.json
└── tsconfig.json

Configurer les paramètres de l’application

Dans cette section, vous allez configurer les paramètres d’application pour l’authentification. Nous utiliserons les valeurs enregistrées pendant l’inscription de l’application pour configurer l’application pour l’authentification. Choisissez l’onglet approprié en fonction du type de locataire.

Nous utiliserons les valeurs enregistrées pendant l’inscription de l’application pour configurer l’application pour l’authentification. Effectuez les étapes suivantes :

  1. Ouvrez le fichier src/app/app.module.ts et remplacez son contenu par le code suivant :

    // Required for Angular multi-browser support
import { BrowserModule } from '@angular/platform-browser';

// Required for Angular
import { NgModule } from '@angular/core';

// Required modules and components for this application
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';

// HTTP modules required by MSAL
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

// Required for MSAL
import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
      clientId: "Enter_the_Application_Id_Here",
      // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
      authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
      // Must be the same redirectUri as what was provided in your app registration.
      redirectUri: "http://localhost:4200",
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE
    }
  });
}

// MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

// MSAL Guard is required to protect routes and require authentication before accessing protected routes
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { 
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: ['user.read']
    }
  };
}

// Create an NgModule that contains the routes and MSAL configurations
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MsalModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

    Le code configure MSAL pour l’authentification utilisateur et la protection des API. Il configure l’application avec MsalInterceptor pour sécuriser les demandes d’API et MsalGuard pour protéger les itinéraires, tout en définissant des composants et services clés pour l’authentification. Remplacez les valeurs suivantes par les valeurs du centre d’administration Microsoft Entra.

    • Remplacez Enter_the_Application_Id_Here par l’ID Application (client) ID obtenu à l’inscription de l’application.
    • Remplacez Enter_the_Tenant_Info_Here par l’ID Directory (tenant) ID obtenu à l’inscription de l’application.

  2. Enregistrez le fichier.

Ajouter du code d’authentification à l’application

Dans cette section, vous allez ajouter du code d’authentification à l’application pour gérer l’authentification des utilisateurs et la gestion des sessions. Choisissez l’onglet approprié en fonction du type de locataire.

  1. Ouvrez le fichier src/app/app.component.ts et remplacez le contenu par le code suivant :

    // Required for Angular
import { Component, OnInit, Inject, OnDestroy } from '@angular/core';

// Required for MSAL
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus, RedirectRequest } from '@azure/msal-browser';

// Required for RJXS
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Angular - MSAL Example';
  loginDisplay = false;
  tokenExpiration: string = '';
  private readonly _destroying$ = new Subject<void>();

  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService
  ) { }

  // On initialization of the page, display the page elements based on the user state
  ngOnInit(): void {
    this.msalBroadcastService.inProgress$
        .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.setLoginDisplay();
      });

      // Used for storing and displaying token expiration
      this.msalBroadcastService.msalSubject$.pipe(filter((msg: EventMessage) => msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS)).subscribe(msg => {
      this.tokenExpiration=  (msg.payload as any).expiresOn;
      localStorage.setItem('tokenExpiration', this.tokenExpiration);
    });
  }

  // If the user is logged in, present the user with a "logged in" experience
  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }

  // Log the user in and redirect them if MSAL provides a redirect URI otherwise go to the default URI
  login() {
    if (this.msalGuardConfig.authRequest) {
      this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }

  // Log the user out
  logout() {
    this.authService.logoutRedirect();
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
}

    Le code intègre MSAL à Angular pour gérer l’authentification utilisateur. Il est à l’écoute des modifications du statut de connexion, affiche l’état de connexion, gère les événements d’acquisition de jetons et fournit des méthodes pour connecter ou déconnecter des utilisateurs en fonction de la configuration de Microsoft Entra.

  2. Enregistrez le fichier.

Étapes suivantes

Tutoriel : Ajouter des composants fonctionnels de connexion et déconnexion à une application Angular