Activer l’authentification dans votre propre application Angular à l’aide d’Azure Active Directory B2C

2025-05-07

Important

À compter du 1er mai 2025, Azure AD B2C ne sera plus disponible pour les nouveaux clients. Pour plus d’informations, consultez notre FAQ.

Cet article explique comment ajouter l’authentification Azure Active Directory B2C (Azure AD B2C) à votre propre application monopage Angular (SPA). Découvrez comment intégrer une application Angular à la bibliothèque d’authentification MSAL pour Angular .

Utilisez cet article avec l’article associé intitulé Configurer l’authentification dans un exemple d’application monopage Angular. Remplacez l’exemple d’application Angular par votre propre application Angular. Une fois les étapes décrites dans cet article terminées, votre application accepte les connexions via Azure AD B2C.

Conditions préalables

Suivez les étapes décrites dans l’article Configurer l’authentification dans un exemple d’application monopage Angular .

Créer un projet d’application Angular

Vous pouvez utiliser un projet d’application Angular existant ou en créer un nouveau. Pour créer un projet, exécutez les commandes suivantes.

Commandes :

Installez l’interface CLI Angular à l’aide du gestionnaire de package npm.
Créez un espace de travail Angular avec un module de routage. Le nom de l’application est msal-angular-tutorial. Vous pouvez le remplacer par n’importe quel nom d’application Angular valide, par contoso-car-serviceexemple .
D’ouvrir le dossier du répertoire de l’application.

npm install -g @angular/cli 
ng new msal-angular-tutorial --routing=true --style=css --strict=false
cd msal-angular-tutorial

Installer les dépendances

Pour installer les bibliothèques MSAL Browser et MSAL Angular dans votre application, exécutez la commande suivante dans votre interpréteur de commandes :

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

Installez la bibliothèque de composants Angular Material (facultatif, pour l’interface utilisateur) :

npm install @angular/material @angular/cdk

Ajouter les composants d’authentification

L’exemple de code se compose des composants suivants :

Composant	Type	Descriptif
auth-config.ts	Constantes	Ce fichier de configuration contient des informations sur votre fournisseur d’identité Azure AD B2C et le service d’API web. L’application Angular utilise ces informations pour établir une relation d’approbation avec Azure AD B2C, se connecter et déconnecter l’utilisateur, acquérir des jetons et valider les jetons.
app.module.ts	Module Angular	Ce composant décrit comment les composants d’application s’intègrent ensemble. Il s’agit du module racine utilisé pour démarrer et ouvrir l’application. Dans cette procédure pas à pas, vous ajoutez certains composants au module app.module.ts et démarrez la bibliothèque MSAL avec l’objet de configuration MSAL.
app-routing.module.ts	Module de routage Angular	Ce composant permet la navigation en interprétant une URL de navigateur et en chargeant le composant correspondant. Dans cette procédure pas à pas, vous ajoutez certains composants au module de routage et vous protégez les composants avec MSAL Guard. Seuls les utilisateurs autorisés peuvent accéder aux composants protégés.
app.component.*	Composant Angular	La `ng new` commande a créé un projet Angular avec un composant racine. Dans cette procédure pas à pas, vous modifiez le composant d’application pour héberger la barre de navigation supérieure. La barre de navigation contient différents boutons, y compris les boutons de connexion et de déconnexion. La `app.component.ts` classe gère les événements de connexion et de déconnexion.
home.component.*	Composant Angular	Dans cette procédure pas à pas, vous ajoutez le composant d’accueil pour afficher la page d’accueil pour l’accès anonyme. Ce composant montre comment vérifier si un utilisateur s’est connecté.
profile.component.*	Composant Angular	Dans ce guide, vous ajoutez le composant profil pour apprendre comment lire les assertions du jeton d'identité.
webapi.component.*	Composant Angular	Dans cette procédure pas à pas, vous ajoutez le composant webapi pour apprendre à appeler une API web.

Pour ajouter les composants suivants à votre application, exécutez les commandes CLI Angular suivantes. Commandes generate component :

Créez un dossier pour chaque composant. Le dossier contient les fichiers TypeScript, HTML, CSS et test.
Mettez à jour les fichiers app.module.ts et app-routing.module.ts avec des références aux nouveaux composants.

ng generate component home
ng generate component profile
ng generate component webapi

Ajouter les paramètres de l’application

Les paramètres du fournisseur d’identité Azure AD B2C et de l’API web sont stockés dans le fichier auth-config.ts . Dans votre dossier src/app , créez un fichier nommé auth-config.ts qui contient le code suivant. Modifiez ensuite les paramètres comme décrit dans 3.1 Configurer l'échantillon Angular.

import { LogLevel, Configuration, BrowserCacheLocation } from '@azure/msal-browser';

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
 
export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
     cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE, 
     },
     system: {
         loggerOptions: {
            loggerCallback: (logLevel, message, containsPii) => {
                console.log(message);
             },
             logLevel: LogLevel.Verbose,
             piiLoggingEnabled: false
         }
     }
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-name.onmicrosoft.com/api/tasks.read"],
  },
}
export const loginRequest = {
  scopes: []
};

Démarrer les bibliothèques d’authentification

Les applications clientes publiques ne sont pas approuvées pour conserver en toute sécurité les secrets d’application, de sorte qu’elles n’ont pas de secrets client. Dans le dossier src/app , ouvrez app.module.ts et apportez les modifications suivantes :

Importez les bibliothèques MSAL Angular et MSAL Browser.
Importez le module de configuration Azure AD B2C.
Importez HttpClientModule. Le client HTTP est utilisé pour appeler des API web.
Importez l’intercepteur HTTP Angular. MSAL utilise l’intercepteur pour injecter le jeton du porteur dans l’en-tête d’autorisation HTTP.
Ajoutez les matériaux Angular essentiels.
Instanciez MSAL à l’aide de l’objet d’application cliente publique à plusieurs comptes. L’initialisation MSAL inclut la passation des paramètres :
1. Objet de configuration pour auth-config.ts.
2. Objet de configuration pour la protection du routage.
3. Objet de configuration pour l’intercepteur MSAL. La classe d’intercepteur acquiert automatiquement des jetons pour les requêtes sortantes qui utilisent la classe HttpClient Angular pour les ressources protégées connues.
Configurez les HTTP_INTERCEPTORSMsalGuard et .
Ajoutez MsalRedirectComponent au démarrage Angular.

Dans le dossier src/app , modifiez app.module.ts et apportez les modifications indiquées dans l’extrait de code suivant. Les modifications sont signalées avec « Modifications commencent ici » et « Modifications se terminent ici ».

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

/* Changes start here. */
// Import MSAL and MSAL browser libraries. 
import { MsalGuard, MsalInterceptor, MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';

// Import the Azure AD B2C configuration 
import { msalConfig, protectedResources } from './auth-config';

// Import the Angular HTTP interceptor. 
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';
import { WebapiComponent } from './webapi/webapi.component';

// Add the essential Angular materials.
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatTableModule } from '@angular/material/table';
/* Changes end here. */

@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent,
    HomeComponent,
    WebapiComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    /* Changes start here. */
    // Import the following Angular materials. 
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatTableModule,
    // Import the HTTP client. 
    HttpClientModule,

    // Initiate the MSAL library with the MSAL configuration object
    MsalModule.forRoot(new PublicClientApplication(msalConfig),
      {
        // The routing guard configuration. 
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: protectedResources.todoListApi.scopes
        }
      },
      {
        // MSAL interceptor configuration.
        // The protected resource mapping maps your web API with the corresponding app scopes. If your code needs to call another web API, add the URI mapping here.
        interactionType: InteractionType.Redirect,
        protectedResourceMap: new Map([
          [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
        ])
      })
    /* Changes end here. */
  ],
  providers: [
    /* Changes start here. */
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    MsalGuard
    /* Changes end here. */
  ],
  bootstrap: [
    AppComponent,
    /* Changes start here. */
    MsalRedirectComponent
    /* Changes end here. */
  ]
})
export class AppModule { }

Configurer des itinéraires

Dans cette section, configurez les itinéraires de votre application Angular. Lorsqu’un utilisateur sélectionne un lien sur la page pour se déplacer dans votre application monopage ou entre une URL dans la barre d’adresses, les itinéraires mappent l’URL à un composant Angular. L'interface de routage Angular canActivate utilise MSAL Guard pour vérifier si l'utilisateur est connecté. Si l’utilisateur n’est pas connecté, MSAL l’amène à Azure AD B2C pour s’authentifier.

Dans le dossier src/app , modifiez app-routing.module.ts apportez les modifications indiquées dans l’extrait de code suivant. Les modifications sont signalées avec « Modifications commencent ici » et « Modifications se terminent ici ».

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MsalGuard } from '@azure/msal-angular';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { WebapiComponent } from './webapi/webapi.component';

const routes: Routes = [
  /* Changes start here. */
  {
    path: 'profile',
    component: ProfileComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    path: 'webapi',
    component: WebapiComponent,
    // The profile component is protected with MSAL Guard.
    canActivate: [MsalGuard]
  },
  {
    // The home component allows anonymous access
    path: '',
    component: HomeComponent
  }
  /* Changes end here. */
];


@NgModule({
  /* Changes start here. */
  // Replace the following line with the next one
  //imports: [RouterModule.forRoot(routes)],
  imports: [RouterModule.forRoot(routes, {
    initialNavigation:'enabled'
  })],
  /* Changes end here. */
  exports: [RouterModule]
})
export class AppRoutingModule { }

Dans cette section, vous ajoutez les boutons de connexion et de déconnexion au composant d’application . Dans le dossier src/app , ouvrez le fichier app.component.ts et apportez les modifications suivantes :

Importez les composants requis.
Modifiez la classe pour implémenter la méthode OnInit. La OnInit méthode s’abonne à l’événement observable MSAL MsalBroadcastServiceinProgress$ . Utilisez cet événement pour connaître l’état des interactions utilisateur, en particulier pour vérifier que les interactions sont terminées.

Avant d’interagir avec l’objet de compte MSAL, vérifiez que la InteractionStatus propriété retourne InteractionStatus.None. L’événement subscribe appelle la setLoginDisplay méthode pour vérifier si l’utilisateur est authentifié.
Ajoutez des variables de classe.
Ajoutez la méthode login qui démarre le flux d’autorisation.
Ajoutez la logout méthode qui déconnecte l’utilisateur.
Ajoutez la setLoginDisplay méthode qui vérifie si l’utilisateur est authentifié.
Ajoutez la méthode ngOnDestroy pour nettoyer l’événement d’abonnement inProgress$ .

Une fois les modifications apportées, votre code doit ressembler à l’extrait de code suivant :

import { Component, OnInit, Inject } from '@angular/core';
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { InteractionStatus, RedirectRequest } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

/* Changes start here. */
export class AppComponent implements OnInit{
  title = 'msal-angular-tutorial';
  loginDisplay = false;
  private readonly _destroying$ = new Subject<void>();

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

  ngOnInit() {

    this.broadcastService.inProgress$
    .pipe(
      filter((status: InteractionStatus) => status === InteractionStatus.None),
      takeUntil(this._destroying$)
    )
    .subscribe(() => {
      this.setLoginDisplay();
    })
  }

  login() {
    if (this.msalGuardConfig.authRequest){
      this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }

  logout() { 
    this.authService.logoutRedirect({
      postLogoutRedirectUri: 'http://localhost:4200'
    });
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
  /* Changes end here. */
}

Dans le dossier src/app , modifiez app.component.html et apportez les modifications suivantes :

Ajoutez un lien aux composants du profil et de l’API web.
Ajoutez le bouton de connexion avec l'attribut d'événement de clic assigné à la méthode login(). Ce bouton s’affiche uniquement si la variable de loginDisplay classe est false.
Ajoutez le bouton de déconnexion avec l’attribut d’événement de clic défini sur la méthode logout(). Ce bouton s’affiche uniquement si la variable de loginDisplay classe est true.
Ajoutez un élément de sortie de routeur .

Une fois les modifications apportées, votre code doit ressembler à l’extrait de code suivant :

<mat-toolbar color="primary">
  <a class="title" href="/">{{ title }}</a>

  <div class="toolbar-spacer"></div>

  <a mat-button [routerLink]="['profile']">Profile</a>
  <a mat-button [routerLink]="['webapi']">Web API</a>

  <button mat-raised-button *ngIf="!loginDisplay" (click)="login()">Login</button>
  <button mat-raised-button *ngIf="loginDisplay" (click)="logout()">Logout</button>

</mat-toolbar>
<div class="container">
  <router-outlet></router-outlet>
</div>

Si vous le souhaitez, mettez à jour le fichier app.component.css avec l’extrait de code CSS suivant :

.toolbar-spacer {
    flex: 1 1 auto;
  }

  a.title {
    color: white;
  }

Gérer les redirections d’application

Lorsque vous utilisez des redirections avec MSAL, vous devez ajouter la directive app-redirect à index.html. Dans le dossier src , modifiez index.html comme indiqué dans l’extrait de code suivant :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MsalAngularTutorial</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <!-- Changes start here -->
  <app-redirect></app-redirect>
  <!-- Changes end here -->
</body>
</html>

Définir css d’application (facultatif)

Dans le dossier /src , mettez à jour le fichier styles.css avec l’extrait de code CSS suivant :

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
.container { margin: 1%; }

Conseil / Astuce

À ce stade, vous pouvez exécuter votre application et tester l’expérience de connexion. Pour exécuter votre application, consultez la section Exécuter l’application Angular .

Vérifier si un utilisateur est authentifié

Le fichier home.component montre comment vérifier si l’utilisateur est authentifié. Dans le dossier src/app/home , mettez à jour home.component.ts avec l’extrait de code suivant.

Le code :

S’abonne aux événements observables MSAL MsalBroadcastServicemsalSubject$ et inProgress$.
Garantit que l’événement msalSubject$ écrit le résultat d’authentification dans la console du navigateur.
Garantit que l’événement inProgress$ vérifie si un utilisateur est authentifié. La getAllAccounts() méthode retourne un ou plusieurs objets.

import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  loginDisplay = false;

  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
      )
      .subscribe((result: EventMessage) => {
        console.log(result);
      });

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None)
      )
      .subscribe(() => {
        this.setLoginDisplay();
      })
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }
}

Dans le dossier src/app/home , mettez à jourhome.component.html avec l’extrait HTML suivant. La directive *ngIf vérifie la loginDisplay variable de classe pour afficher ou masquer les messages d’accueil.

<div *ngIf="!loginDisplay">
    <p>Please sign-in to see your profile information.</p>
</div>

<div *ngIf="loginDisplay">
    <p>Login successful!</p>
    <p>Request your profile information by clicking Profile above.</p>
</div>

Lire les revendications de jetons d’ID

Le fichier profile.component montre comment accéder aux revendications de jeton d’ID de l’utilisateur. Dans le dossier src/app/profile , mettez à jour profile.component.ts avec l’extrait de code suivant.

Le code :

Importe les composants requis.
S’abonne à l’événement observable MSAL MsalBroadcastServiceinProgress$. L’événement charge le compte et lit les revendications de jeton d’ID.
Garantit que la checkAndSetActiveAccount méthode vérifie et définit le compte actif. Cette action est courante lorsque l’application interagit avec plusieurs flux d’utilisateurs Azure AD B2C ou des stratégies personnalisées.
Veille à ce que la méthode getClaims obtienne les revendications de jeton d’ID à partir de l’objet de compte MSAL actif. La méthode ajoute ensuite les revendications au dataSource tableau. Le tableau est affiché à l’utilisateur avec la liaison de modèle du composant.

import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})

export class ProfileComponent implements OnInit {
  displayedColumns: string[] = ['claim', 'value'];
  dataSource: Claim[] = [];
  private readonly _destroying$ = new Subject<void>();
  
  constructor(private authService: MsalService, private msalBroadcastService: MsalBroadcastService) { }

  ngOnInit(): void {

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) =>  status === InteractionStatus.None || status === InteractionStatus.HandleRedirect),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.checkAndSetActiveAccount();
        this.getClaims(this.authService.instance.getActiveAccount()?.idTokenClaims)
      })
  }

  checkAndSetActiveAccount() {

    let activeAccount = this.authService.instance.getActiveAccount();

    if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
      let accounts = this.authService.instance.getAllAccounts();
      this.authService.instance.setActiveAccount(accounts[0]);
    }
  }

  getClaims(claims: any) {

    let list: Claim[]  =  new Array<Claim>();

    Object.keys(claims).forEach(function(k, v){
      
      let c = new Claim()
      c.id = v;
      c.claim = k;
      c.value =  claims ? claims[k]: null;
      list.push(c);
    });
    this.dataSource = list;

  }

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

export class Claim {
  id: number;
  claim: string;
  value: string;
}

Dans le dossier src/app/profile , mettez à jourprofile.component.html avec l’extrait HTML suivant :

<h1>ID token claims:</h1>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Claim Column -->
  <ng-container matColumnDef="claim">
    <th mat-header-cell *matHeaderCellDef> Claim </th>
    <td mat-cell *matCellDef="let element"> {{element.claim}} </td>
  </ng-container>

  <!-- Value Column -->
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> Value </th>
    <td mat-cell *matCellDef="let element"> {{element.value}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Appeler une API web

Pour appeler une API web d’autorisation basée sur un jeton, l’application doit avoir un jeton d’accès valide. Le fournisseur MsalInterceptor acquiert automatiquement des jetons pour les requêtes sortantes qui utilisent la classe HttpClient Angular pour les ressources protégées connues.

Important

La méthode d’initialisation MSAL (dans la app.module.ts classe) mappe les ressources protégées, telles que les API web, avec les étendues d’application requises à l’aide de l’objet protectedResourceMap . Si votre code doit appeler une autre API web, ajoutez l’URI de l’API web et la méthode HTTP de l’API web, avec les étendues correspondantes, à l’objet protectedResourceMap . Pour plus d’informations, consultez Protected Resource Map.

Lorsque l’objet HttpClient appelle une API web, le fournisseur MsalInterceptor effectue les étapes suivantes :

Il obtient un jeton d’accès avec les autorisations requises (étendues) pour le point de terminaison de l’API web.
Transmet le jeton d’accès en tant que jeton du porteur dans l’en-tête d’autorisation de la requête HTTP à l’aide de ce format :
```
Authorization: Bearer <access-token>
```

Le fichier webapi.component montre comment appeler une API web. Dans le dossier src/app/webapi , mettez à jour webapi.component.ts avec l’extrait de code suivant.

Le code :

Utilise la classe Angular HttpClient pour appeler l’API web.
Lit l’élément auth-config de la classe protectedResources.todoListApi.endpoint. Cet élément spécifie l’URI de l’API web. En fonction de l’URI de l’API web, l’intercepteur MSAL acquiert un jeton d’accès avec les périmètres correspondants.
Obtient le profil utilisateur depuis l'API Web et initialise la variable de classe profile.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { protectedResources } from '../auth-config';

type ProfileType = {
  name?: string
};

@Component({
  selector: 'app-webapi',
  templateUrl: './webapi.component.html',
  styleUrls: ['./webapi.component.css']
})
export class WebapiComponent implements OnInit {
  todoListEndpoint: string = protectedResources.todoListApi.endpoint;
  profile!: ProfileType;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getProfile();
  }

  getProfile() {
    this.http.get(this.todoListEndpoint)
      .subscribe(profile => {
        this.profile = profile;
      });
  }
}

Dans le dossier src/app/webapi , mettez à jourwebapi.component.html avec l’extrait HTML suivant. Le modèle du composant affiche le nom retourné par l’API web. En bas de la page, le modèle affiche l’adresse de l’API web.

<h1>The web API returns:</h1>
<div>
    <p><strong>Name: </strong> {{profile?.name}}</p>
</div>

<div class="footer-text">
    Web API: {{todoListEndpoint}}
</div>

Si vous le souhaitez, mettez à jour le fichier webapi.component.css avec l’extrait de code CSS suivant :

.footer-text {
    position: absolute;
    bottom: 50px;
    color: gray;
}

Exécuter l’application Angular

Exécutez la commande suivante:

npm start

La fenêtre de console affiche le numéro du port où l’application est hébergée.

Listening on port 4200...

Conseil / Astuce

Sinon, pour exécuter la npm start commande, utilisez le débogueur Visual Studio Code. Le débogueur permet d’accélérer votre boucle de modification, de compilation et de débogage.

Accédez à http://localhost:4200 dans votre navigateur pour afficher l’application.

Partager via

Activer l’authentification dans votre propre application Angular à l’aide d’Azure Active Directory B2C

Conditions préalables

Créer un projet d’application Angular

Installer les dépendances

Ajouter les composants d’authentification

Ajouter les paramètres de l’application

Démarrer les bibliothèques d’authentification

Configurer des itinéraires

Ajouter les boutons de connexion et de déconnexion

Gérer les redirections d’application

Définir css d’application (facultatif)

Vérifier si un utilisateur est authentifié

Lire les revendications de jetons d’ID

Appeler une API web

Exécuter l’application Angular

Étapes suivantes

Commentaires

Ressources supplémentaires