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

Article
01/20/2025

Une fois l’inscription terminée, un projet Angular peut être créé à l’aide de la CLI (interface de ligne de commande) Angular. Ce tutoriel montre comment créer une application monopage Angular à l’aide de la CLI Angular et les fichiers nécessaires à l’authentification et l’autorisation.

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

Respect des prérequis et exécution des étapes du Tutoriel : Inscrire une application.
Installer la CLI Angular
Installez Node.js.
Visual Studio Code

Créer un projet Angular

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

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é.
Accédez au répertoire du projet :
```
cd msal-angular-tutorial
```
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.
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.
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.

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.

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.
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

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

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.

Enregistrez le fichier.

Ajouter du code d’authentification à l’application

Pour gérer l’authentification utilisateur et la gestion des sessions à l’aide de MSAL Angular, vous devez mettre à jour src/app/app.component.ts.

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.

Enregistrez le fichier.

Étapes suivantes

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

Partage via