Lernprogramm: Anmelden von Benutzern in Angular SPA mithilfe nativer Authentifizierungs-JavaScript-SDK

Gilt für: Externe Mandanten (weitere Informationen)

In diesem Lernprogramm erfahren Sie, wie Sie Benutzer mithilfe des nativen Authentifizierungs-JavaScript-SDKs bei einer Angular-Einzelseiten-App (SINGLE Page App) anmelden.

In diesem Tutorial erfahren Sie:

Voraussetzungen

• Führen Sie die Schritte in der Registrierung von Benutzern bei der Angular-Einzelseiten-App mithilfe des nativen JavaScript-SDKs für die Authentifizierung aus.

Erstellen einer Anmeldekomponente

1. Verwenden Sie Angular CLI, um eine neue Komponente für die Anmeldeseite innerhalb des Komponentenordners zu generieren, indem Sie den folgenden Befehl ausführen:

   cd components
   ng generate component sign-in
   

2. Öffnen Sie die Anmelde-/sign-in.component.ts datei, und ersetzen Sie deren Inhalt durch Inhalt aus sign-in.component.ts

3. Öffnen Sie die Anmelde-/sign-in.component.html Datei, und fügen Sie den Inhalt aus sign-in.component.htmlhinzu.

   • Die folgende Logik in sign-in.component.ts bestimmt den nächsten Schritt nach dem ersten Anmeldeversuch. Je nach Ergebnis wird entweder das Kennwort oder das Einmalige Codeformular in sign-in.component.html angezeigt, um den Benutzer durch den entsprechenden Teil des Anmeldevorgangs zu leiten:

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

     • Die Instanzmethode signIn() des SDK startet den Anmeldeablauf.

     Hinweis

     Der username Parameter akzeptiert entweder die E-Mail-Adresse des Benutzers oder seinen Benutzernamen (Alias), wenn das integrierte Benutzer-Attribut "Benutzername " im Benutzerfluss Ihres Mandanten aktiviert ist. Der Benutzer kann einen der werte eingeben, um sich anzumelden. Informationen zum Aktivieren des Attributs finden Sie unter "Aktivieren des Benutzernamens in der Anmeldebezeichnerrichtlinie".

     • In der Datei 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>
     

Aktualisieren des Routingmoduls

Öffnen Sie die Datei "src/app/app.routes.ts ", und fügen Sie dann die Route für die Anmeldekomponente hinzu:

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

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

Testen der Anmeldefunktionalität

1. Führen Sie zum Starten des CORS-Proxyservers den folgenden Befehl in Ihrem Terminal aus:

   npm run cors
   

2. Um die Angular-App zu starten, öffnen Sie ein weiteres Terminalfenster, und führen Sie dann den folgenden Befehl aus:

   npm start
   

3. Öffnen Sie einen Webbrowser, und navigieren Sie zu http://localhost:4200/sign-in. Ein Anmeldeformular wird angezeigt.

4. Wenn Sie sich bei einem vorhandenen Konto anmelden möchten, geben Sie Ihre Details ein, wählen Sie die Schaltfläche "Anmelden" aus, und folgen Sie dann den Anweisungen.

Nächster Schritt