Kurz: Přihlášení uživatelů ve službě Angular SPA pomocí nativní sady JavaScript SDK pro ověřování

Platí pro: Externí nájemci (další informace)

V tomto kurzu se dozvíte, jak se přihlásit uživatele k jednostránkové aplikaci Angular pomocí nativní sady JavaScript SDK pro ověřování.

V tomto kurzu se naučíte:

• Aktualizujte aplikaci Angular tak, aby se přihlásili uživatelé.
• Otestujte tok přihlášení.

Požadavky

• Dokončete kroky v registraci uživatelů do jednostránka aplikace Angular pomocí nativní sady JavaScript SDK pro ověřování.

Vytvoření součásti pro přihlášení

1. Pomocí Angular CLI vygenerujte novou komponentu pro přihlašovací stránku ve složce components spuštěním následujícího příkazu:

   cd components
   ng generate component sign-in
   

2. Otevřete soubor přihlášení/sign-in.component.ts a nahraďte jeho obsah obsahem z sign-in.component.ts

3. Otevřete soubor přihlášení/sign-in.component.html a přidejte obsah z sign-in.component.html.

   • Následující logika v sign-in.component.ts určuje další krok po počátečním pokusu o přihlášení. V závislosti na výsledku se v sign-in.component.html zobrazí formulář s heslem nebo jednorázovým kódem, který uživatele provede příslušnou částí procesu přihlášení:

         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;
         }
     

     • Metoda signIn() instance sady SDK spustí tok přihlášení.

     • V souboru 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>
     

Aktualizace modulu směrování

Otevřete soubor src/app/app.routes.ts a přidejte trasu pro komponentu přihlášení:

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

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

Otestování funkce přihlašování

1. Pokud chcete spustit proxy server CORS, spusťte v terminálu následující příkaz:

   npm run cors
   

2. Pokud chcete spustit aplikaci Angular, otevřete další okno terminálu a spusťte následující příkaz:

   npm start
   

3. Otevřete webový prohlížeč a přejděte na http://localhost:4200/sign-in. Zobrazí se přihlašovací formulář.

4. Pokud se chcete přihlásit k existujícímu účtu, zadejte podrobnosti, vyberte tlačítko Přihlásit se a postupujte podle pokynů.

Povolení přihlášení pomocí aliasu nebo uživatelského jména

Uživatelům, kteří se přihlašují pomocí e-mailové adresy a hesla, můžete také povolit přihlášení pomocí uživatelského jména a hesla. Uživatelské jméno označované také jako alternativní přihlašovací identifikátor může být ID zákazníka, číslo účtu nebo jiný identifikátor, který se rozhodnete použít jako uživatelské jméno.

Uživatelské jména můžete k uživatelskému účtu přiřadit ručně prostřednictvím Centra pro správu Microsoft Entra nebo ho v aplikaci automatizovat prostřednictvím rozhraní Microsoft Graph API.

Pomocí postupu přihlášení pomocí aliasu nebo článku o uživatelském jménu můžete uživatelům povolit přihlášení pomocí uživatelského jména ve vaší aplikaci:

1. Povolte přihlášení pomocí uživatelského jména.
2. Vytvořte uživatele s uživatelským jménem v Centru pro správu nebo aktualizujte stávající uživatele přidáním uživatelského jména. Alternativně můžete také automatizovat vytváření a aktualizace uživatelů ve vaší aplikaci pomocí rozhraní Microsoft Graph API.

Další krok

Kurz: Resetování hesla v jednostráňové aplikaci Angular pomocí nativní sady JavaScript SDK pro ověřování