Tutoriel : Connecter des utilisateurs dans Angular SPA à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native

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

Dans ce tutoriel, vous apprendrez à authentifier des utilisateurs dans une SPA (single-page application) Angular à l'aide du SDK (Kit de développement logiciel) JavaScript d'authentification native.

Dans ce tutoriel, vous allez :

Conditions préalables

• Finalisez les étapes dans Inscrire des utilisateurs à une application monopage Angular à l’aide du SDK JavaScript d’authentification native.

Créer un composant de connexion

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

   cd components
   ng generate component sign-in
   

2. Ouvrez le fichier sign-in/sign-in.component.ts et remplacez son contenu par celui de sign-in.component.ts

3. Ouvrez le fichier sign-in/sign-in.component.html et ajoutez-y le contenu provenant de sign-in.component.html.

   • La logique suivante dans sign-in.component.ts détermine l’étape suivante après la tentative de connexion initiale. Selon le résultat, il affiche le mot de passe ou le formulaire de code à usage unique dans sign-in.component.html pour guider l’utilisateur dans la partie appropriée du processus de connexion :

         const result: SignInResult = await client.signIn({ username: this.username });
     
         if (result.isPasswordRequired()) {
             this.showPassword = true;
             this.showCode = false;
         } else if (result.isCodeRequired()) {
             this.showPassword = false;
             this.showCode = true;
         } else if (result.isCompleted()) {
             this.isSignedIn = true;
             this.userData = result.data;
         }
     

     • La méthode d’instance du Kit de développement logiciel (SDK) signIn() démarre le flux de connexion.

     Note

     Le username paramètre accepte l’adresse e-mail de l’utilisateur ou son nom d’utilisateur (alias) lorsque l’attribut utilisateur intégré nom d’utilisateur est activé dans le flux utilisateur de votre locataire. L’utilisateur peut entrer l’une ou l’autre valeur pour se connecter. Pour activer l’attribut, consultez Activer le nom d’utilisateur dans la stratégie d’identificateur de connexion.

     • Dans le fichier sign-in.component.html :

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

Mettre à jour le module de routage

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

import { SignInComponent } from './components/sign-in/sign-in.component';

export const routes: Routes = [
    ...
    { path: 'sign-in', component: SignInComponent },
];

Tester la fonctionnalité de connexion

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

   npm run cors
   

2. Pour démarrer l’application Angular, ouvrez une autre fenêtre de terminal, puis exécutez la commande suivante :

   npm start
   

3. Ouvrez un navigateur web et accédez à http://localhost:4200/sign-in. Un formulaire de connexion s’affiche.

4. Pour vous connecter à un compte existant, entrez vos détails, sélectionnez le bouton Se connecter, puis suivez les invites.

Étape suivante