Inscrire des utilisateurs dans une application Angular SPA en utilisant le SDK d’authentification native. - Microsoft identity platform

S’applique à : cercle vert avec un symbole de coche blanc qui indique que le contenu suivant s’applique aux locataires externes. Locataires externes (en savoir plus)

Dans ce tutoriel, vous allez apprendre à créer une application monopage Angular qui inscrit des utilisateurs à l’aide du Kit de développement logiciel (SDK) JavaScript de l’authentification native.

Dans ce tutoriel, vous allez :

Créez un projet Next.js Angular.
Ajoutez le Kit de développement logiciel (SDK) MSAL JS à celui-ci.
Ajoutez des composants d’interface utilisateur de l’application.
Configurez le projet pour inscrire des utilisateurs.

Conditions préalables

Suivez les étapes décrites dans Démarrage rapide : Connectez les utilisateurs dans une application monopage Angular à l’aide du kit de développement logiciel (SDK) JavaScript d’authentification native. Ce guide de démarrage rapide vous montre comment exécuter un exemple de code Angular.
Effectuez les étapes décrites dans Configurer le serveur proxy CORS pour gérer les en-têtes CORS pour l’authentification native.
Visual Studio Code ou un autre éditeur de code.
Node.js.
Interface CLI Angular.
Si vous souhaitez autoriser les utilisateurs à s’inscrire avec un nom d’utilisateur (alias), activez l’attribut utilisateur intégré nom d’utilisateur dans votre flux d’utilisateur d’inscription. Pour connaître les étapes, consultez Activer le nom d’utilisateur dans la stratégie d’identificateur de connexion.

Créer un projet React et installer des dépendances

Dans un emplacement de choix dans votre ordinateur, exécutez les commandes suivantes pour créer un projet Angular avec le nom reactspa, accédez au dossier du projet, puis installez les packages :

ng new angularspa
cd angularspa

Une fois que vous avez correctement exécuté les commandes, vous devez disposer d’une application avec la structure suivante :

angularspa/
└──node_modules/
   └──...
└──public/
   └──...
└──src/
   └──app/
      └──app.component.html
      └──app.component.scss
      └──app.component.ts
      └──app.modules.ts
      └──app.config.ts
      └──app.routes.ts
   └──index.html
   └──main.ts
   └──style.scss
└──angular.json
└──package-lock.json
└──package.json
└──README.md
└──tsconfig.app.json
└──tsconfig.json
└──tsconfig.spec.json

Ajouter le Kit de développement logiciel (SDK) JavaScript à votre projet

Pour utiliser le Kit de développement logiciel (SDK) JavaScript d’authentification native dans votre application, utilisez votre terminal pour l’installer à l’aide de la commande suivante :

npm install @azure/msal-browser

Les fonctionnalités d’authentification native font partie de la azure-msal-browser bibliothèque. Pour utiliser les fonctionnalités d’authentification native, vous importez à partir de @azure/msal-browser/custom-auth. Par exemple:

  import CustomAuthPublicClientApplication from "@azure/msal-browser/custom-auth";

Ajouter une configuration du client

Dans cette section, vous définissez une configuration pour l’application cliente publique d’authentification native pour lui permettre d’interagir avec l’interface du Kit de développement logiciel (SDK). Pour ce faire,

Créez un fichier appelé src/app/config/auth-config.ts, puis ajoutez le code suivant :

export const customAuthConfig: CustomAuthConfiguration = {
    customAuth: {
        challengeTypes: ["password", "oob", "redirect"],
        authApiProxyUrl: "http://localhost:3001/api",
    },
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com",
        redirectUri: "/",
        postLogoutRedirectUri: "/",
        navigateToLoginRequestUrl: false,
    },
    cache: {
        cacheLocation: "sessionStorage",
    },
    system: {
        loggerOptions: {
            loggerCallback: (level: LogLevel, message: string, containsPii: boolean) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

Dans le code, recherchez le placeholder :

Enter_the_Application_Id_Here remplacez-la par l’ID d’application (client) de l’application que vous avez inscrite précédemment.
Enter_the_Tenant_Subdomain_Here remplacez-le par le sous-domaine du locataire dans votre centre d’administration Microsoft Entra. Par exemple, si le domaine principal de votre locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez de quelle manière consulter les détails de votre locataire.

Créez un fichier appelé src/app/services/auth.service.ts, puis ajoutez le code suivant :

import { Injectable } from '@angular/core';
import { CustomAuthPublicClientApplication, ICustomAuthPublicClientApplication } from '@azure/msal-browser/custom-auth';
import { customAuthConfig } from '../config/auth-config';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private authClientPromise: Promise<ICustomAuthPublicClientApplication>;
  private authClient: ICustomAuthPublicClientApplication | null = null;

  constructor() {
    this.authClientPromise = this.init();
  }

  private async init(): Promise<ICustomAuthPublicClientApplication> {
    this.authClient = await CustomAuthPublicClientApplication.create(customAuthConfig);
    return this.authClient;
  }

  getClient(): Promise<ICustomAuthPublicClientApplication> {
    return this.authClientPromise;
  }
}

Créez un répertoire appelé /app/components.
Utilisez l’interface CLI Angular pour générer un nouveau composant pour la page d’inscription dans le dossier composants en exécutant la commande suivante :
```
cd components
ng generate component sign-up
```
Ouvrez le fichier sign-up/sign-up.component.ts, puis remplacez son contenu par le contenu de sign-up.component.

Ouvrez le fichier d’inscription/sign-up.component.html et ajoutez le code dans le fichier html.

La logique suivante dans le fichier sign-up.component.ts détermine ce que l’utilisateur doit faire après le démarrage du processus d’inscription. Selon le résultat, il affiche le formulaire de mot de passe ou le formulaire de code de vérification dans sign-up.component.html afin que l’utilisateur puisse continuer avec le flux d’inscription :

   const attributes: UserAccountAttributes = {
               givenName: this.firstName,
               surname: this.lastName,
               jobTitle: this.jobTitle,
               city: this.city,
               country: this.country,
           };
   const result = await client.signUp({
               username: this.email,
               attributes,
           });

   if (result.isPasswordRequired()) {
       this.showPassword = true;
       this.showCode = false;
   } else if (result.isCodeRequired()) {
       this.showPassword = false;
       this.showCode = true;
   }

La méthode d’instance du Kit de développement logiciel (SDK) signUp() démarre le flux d’inscription.

Si vous souhaitez que l’utilisateur démarre le flux de connexion immédiatement après l’inscription, utilisez cet extrait de code :
```
<div *ngIf="isSignedUp">
    <p>The user has been signed up, please click <a href="/sign-in">here</a> to sign in.</p>
</div>
```

Ouvrez le fichier src/app.component.scss , puis ajoutez le fichier de styles suivant.

Vous pouvez autoriser les utilisateurs à s’inscrire avec un nom d’utilisateur (alias) en plus de leur e-mail. Le nom d’utilisateur (alias) est un autre identificateur de connexion, tel qu’un ID client, un numéro de compte ou une autre valeur que vous choisissez.

Lors de l’inscription, le nom d’utilisateur (e-mail) est toujours requis en tant qu’identificateur principal, et le nom d’utilisateur (alias) ne le remplace pas. Par défaut, le nom d’utilisateur (alias) est facultatif, bien qu’un administrateur puisse le configurer en fonction des besoins. Votre application collecte toujours le nom d’utilisateur (e-mail) et collecte l’alias en tant qu’attribut en même temps que l’e-mail. Lors de la connexion, l’utilisateur peut ensuite se connecter avec son nom d’utilisateur (e-mail) ou son nom d’utilisateur (alias). Pour savoir comment l’attribut Username est configuré comme facultatif ou obligatoire, consultez Configurer les types d’entrée utilisateur et la mise en page.

Pour collecter un nom d’utilisateur (alias) lors de l’inscription :

Vérifiez que l’attribut utilisateur intégré nom d’utilisateur est activé dans votre flux d’utilisateur d’inscription. Pour connaître les étapes, consultez Activer le nom d’utilisateur dans la stratégie d’identificateur de connexion.
Ajoutez un champ flatUsername au composant d’inscription, puis incluez l’attribut flatusername dans le UserAccountAttributes que vous passez à signUp() :
```
flatUsername = "";

const attributes: UserAccountAttributes = {
    givenName: this.firstName,
     //...
    flatusername: this.flatUsername,
};
```

Ajoutez une entrée d’alias à sign-up.component.html en même temps que les champs existants :

<input type="text" [(ngModel)]="flatUsername" name="flatUsername" placeholder="Username (alias)" />

Gérer les erreurs liées au nom d’utilisateur (alias) :
- result.error?.isUserAlreadyExists() couvre un e-mail en double ou un nom d’utilisateur en double (alias). Mettez à jour le message en conséquence, par exemple , un compte avec cet e-mail ou ce nom d’utilisateur existe déjà.
- Un nom d’utilisateur (alias) non valide s’affiche via result.error?.isAttributesValidationFailed() plutôt que via result.error?.isInvalidUsername(). Branchez-vous sur cette méthode pour afficher un message spécifique au nom d’utilisateur.

Vous pouvez connecter automatiquement vos utilisateurs après l'inscription réussie d'un utilisateur, sans démarrer un nouveau flux de connexion. Pour ce faire, utilisez l’extrait de code suivant. Consultez un exemple complet à sign-up/sign-up.component.ts :

    if (this.signUpState instanceof SignUpCompletedState) {
        const result = await this.signUpState.signIn();
    
        if (result.isFailed()) {
            this.error = result.error?.errorData?.errorDescription || "An error occurred during auto sign-in";
        }
    
        if (result.isCompleted()) {
            this.userData = result.data;
            this.signUpState = result.state;
            this.isSignedUp = true;
            this.showCode = false;
            this.showPassword = false;
        }
    }

Lorsque vous effectuez une connexion automatique d’un utilisateur, utilisez l'extrait de code suivant dans votre fichier html sign-up/sign-up.component.html.

    <div *ngIf="userData && !isSignedIn">
        <p>Signed up complete, and signed in as {{ userData?.getAccount()?.username }}</p>
    </div>
    <div *ngIf="isSignedUp && !userData">
        <p>Sign up completed! Signing you in automatically...</p>
    </div>

Mettre à jour le routage des applications

Ouvrez le fichier src/app/app.route.ts , puis ajoutez l’itinéraire du composant d’inscription :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SignUpComponent } from './components/sign-up/sign-up.component';
import { AuthService } from './services/auth.service';
import { AppComponent } from './app.component';

export const routes: Routes = [
    { path: 'sign-up', component: SignUpComponent },
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes),
        SignUpComponent,
    ],
    providers: [AuthService],
    bootstrap: [AppComponent]
})
export class AppRoutingModule { }

Pour démarrer le serveur proxy CORS, exécutez la commande suivante dans votre terminal :
```
npm run cors
```
Pour démarrer votre application, exécutez la commande suivante dans votre terminal :
```
npm start
```
Ouvrez un navigateur web et accédez à http://localhost:4200/sign-up. Un formulaire d’inscription s’affiche.
Pour vous inscrire à un compte, entrez vos détails, sélectionnez le bouton Continuer , puis suivez les invites.

Étape suivante

Tutoriel : Connecter des utilisateurs à une application React monopage à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-06-24

Tutoriel : Inscrire des utilisateurs dans une application monopage Angular à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native

Conditions préalables

Créer un projet React et installer des dépendances

Ajouter le Kit de développement logiciel (SDK) JavaScript à votre projet

Ajouter une configuration du client

Créer un composant d’inscription

Collecter un nom d’utilisateur (alias) lors de l’inscription

Se connecter automatiquement après l’inscription (facultatif)

Mettre à jour le routage des applications

Tester le flux d’inscription

Étape suivante

Commentaires

Ressources supplémentaires