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 allez apprendre à connecter des utilisateurs à une application monopage Angular à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native.

Dans ce tutoriel, vous allez :

Conditions préalables

• Suivez les étapes de l’inscription des utilisateurs dans l’application monopage Angular à l’aide du Kit de développement logiciel (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 de connexion/sign-in.component.ts et remplacez son contenu par du contenu de sign-in.component.ts

3. Ouvrez le fichier de connexion/sign-in.component.html et ajoutez le contenu à partir 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.

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

Activer la connexion avec un alias ou un nom d’utilisateur

Vous pouvez autoriser les utilisateurs qui se connectent avec une adresse e-mail et un mot de passe à se connecter avec un nom d’utilisateur et un mot de passe. Le nom d’utilisateur, également appelé un identificateur de connexion alternatif, peut être un identifiant client, un numéro de compte ou un autre identificateur que vous choisissez d’utiliser comme nom d’utilisateur.

Vous pouvez affecter manuellement des noms d’utilisateur au compte d’utilisateur via le Centre d’administration Microsoft Entra ou l’automatiser dans votre application via l’API Microsoft Graph.

Utilisez les étapes de connexion avec un alias ou un nom d'utilisateur pour permettre à vos utilisateurs de se connecter en utilisant un nom d'utilisateur dans votre application :

1. Activez le nom d’utilisateur dans la connexion.
2. Créez des utilisateurs avec un nom d’utilisateur dans le Centre d’administration ou mettez à jour les utilisateurs existants en ajoutant un nom d’utilisateur. Vous pouvez également automatiser la création et la mise à jour des utilisateurs dans votre application à l’aide de l’API Microsoft Graph.

Étape suivante