Partager via

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

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

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,

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

  2. 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éer un composant d’inscription

  1. Créez un répertoire appelé /app/components.

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

  3. Ouvrez le fichier sign-up/sign-up.component.ts, puis remplacez son contenu par le contenu de sign-up.component.

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

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

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

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

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

Tester le flux d’inscription

  1. Pour démarrer le serveur proxy CORS, exécutez la commande suivante dans votre terminal :

    npm run cors

  2. Pour démarrer votre application, exécutez la commande suivante dans votre terminal :

    npm start

  3. Ouvrez un navigateur web et accédez à http://localhost:4200/sign-up. Un formulaire d’inscription s’affiche.

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

  • Last updated on