Tutoriel : Réinitialiser le mot de passe dans l’application monopage Angular à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native

S’applique à : Locataires externes (en savoir plus)

Dans ce tutoriel, vous allez apprendre à activer la réinitialisation de mot de passe dans l’application monopage Angular à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native. La réinitialisation de mot de passe est disponible pour les comptes d’utilisateur qui utilisent le courrier électronique avec le flux d’authentification par mot de passe.

Dans ce tutoriel, vous allez :

Conditions préalables

• Suivez les étapes du tutoriel : Inscrivez les utilisateurs dans une application monopage Angular en utilisant le SDK JavaScript pour l'authentification native.
• Activez la réinitialisation de mot de passe en libre-service (SSPR) pour les utilisateurs clients du locataire externe. SSPR est disponible pour les utilisateurs clients pour les applications qui utilisent le courrier électronique avec le flux d’authentification par mot de passe.

Créer le composant de réinitialisation de mot de passe

1. Utilisez l’interface CLI Angular pour générer un nouveau composant pour la réinitialisation de mot de passe dans le dossier des composants en exécutant la commande suivante :

   cd components
   ng generate component reset-password
   

2. Ouvrez le fichier reset-password/reset-password.component.ts et remplacez son contenu par le contenu de reset-password.component.ts

3. Ouvrez le fichier reset-password/reset-password.component.html et ajoutez le contenu à partir de reset-password.component.html.

   • La logique suivante dans reset-password.component.ts détermine l’étape suivante après l’opération de réinitialisation initiale du mot de passe. Selon le résultat, il affiche le formulaire d’entrée de code dans reset-password.component.html pour poursuivre le processus de réinitialisation de mot de passe :

     const result = await client.resetPassword({ username: this.email });
     if (result.isCodeRequired()) {
                 this.showCode = true;
                 this.isReset = false;
                 this.showNewPassword = false;
             }
     

     • La méthode d’instance du Kit de développement logiciel (SDK), resetPassword() démarre le flux de réinitialisation de mot de passe.
     • Dans le fichier reset-password.component.html :

     <form *ngIf="showCode" (ngSubmit)="submitCode()">
         <input type="text" [(ngModel)]="code" name="code" placeholder="OTP Code" required />
         <button type="button" (click)="submitCode()" [disabled]="loading">{{ loading ? 'Verifying...' : 'Verify Code' }}</button>
         </form>
     

   • Une fois submitCode() appelé, le résultat détermine l’étape suivante : si le mot de passe est requis, le nouveau formulaire de mot de passe s’affiche pour que l’utilisateur continue le processus de réinitialisation du mot de passe.

     if (result.isPasswordRequired()) {
         this.showCode = false;
         this.showNewPassword = true;
         this.isReset = false;
         this.resetState = result.state;
     }
     

     Dans le fichier reset-password.component.html :

     <form *ngIf="showNewPassword" (ngSubmit)="submitNewPassword()">
       <input type="password" [(ngModel)]="newPassword" name="newPassword" placeholder="New Password" required />
       <button type="button" (click)="submitNewPassword()" [disabled]="loading">{{ loading ? 'Submitting...' : 'Submit New Password' }}</button>
     </form>
   

   • Si vous souhaitez que l’utilisateur démarre le flux de connexion immédiatement après la réinitialisation du mot de passe, utilisez cet extrait de code :

     <div *ngIf="isReset">
         <p>The password has been reset, please click <a href="/sign-in">here</a> to sign in.</p>
     </div>
     

Se connecter automatiquement après la réinitialisation du mot de passe (facultatif)

Vous pouvez connecter automatiquement vos utilisateurs après une réinitialisation de mot de passe réussie sans démarrer un nouveau flux de connexion. Pour ce faire, utilisez l’extrait de code suivant. Consultez un exemple complet à reset-password.component.ts :

if (this.resetState instanceof ResetPasswordCompletedState) {
    const result = await this.resetState.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.resetState = result.state;
        this.isReset = true;
        this.showCode = false;
        this.showNewPassword = false;
    }
}

Lorsque vous connectez automatiquement un utilisateur, utilisez l’extrait de code suivant dans votre reset-password.component.html :

<div *ngIf="userData && !isSignedIn">
    <p>Password reset completed, and signed in as {{ userData?.getAccount()?.username }}</p>
</div>
<div *ngIf="isReset && !userData">
    <p>Password reset completed! Signing you in automatically...</p>
</div>

Mettre à jour le module de routage

Ouvrez le fichier src/app/app.routes.ts , puis ajoutez l’itinéraire pour le composant de réinitialisation de mot de passe :

import { ResetPasswordComponent } from './reset-password/reset-password.component';

const routes: Routes = [
    { path: 'reset-password', component: ResetPasswordComponent },
    ...
];

Tester la fonctionnalité de réinitialisation de mot de passe

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/reset-password. Un formulaire d’inscription s’affiche.

4. Pour réinitialiser le mot de passe d’un compte d’utilisateur existant, entrez vos détails, sélectionnez le bouton Continuer , puis suivez les invites.

Configurer poweredByHeader: false dans next.config.js

• Dans Next.js, l’en-tête x-powered-by est inclus par défaut dans les réponses HTTP pour indiquer que l’application est alimentée par Next.js. Toutefois, pour des raisons de sécurité ou de personnalisation, vous pouvez supprimer ou modifier cet en-tête.

  const nextConfig: NextConfig = {
    poweredByHeader: false,
    /* other config options here */
  };
  

Contenu connexe

• Tutoriel : Prise en charge du fallback web dans le Kit de développement logiciel (SDK) JavaScript d’authentification native.