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.

     • In der dateisign-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.

Aktivieren der Anmeldung mit einem Alias oder Benutzernamen

Sie können Benutzern, die sich mit einer E-Mail-Adresse und einem Kennwort anmelden, auch die Möglichkeit geben, sich mit einem Benutzernamen und Kennwort anzumelden. Der Benutzername wird auch als alternativer Anmeldebezeichner bezeichnet, kann eine Kunden-ID, Kontonummer oder ein anderer Bezeichner sein, den Sie als Benutzernamen verwenden möchten.

Sie können dem Benutzerkonto Benutzernamen manuell über das Microsoft Entra Admin Center zuweisen oder in Ihrer App über die Microsoft Graph-API automatisieren.

Führen Sie die Schritte im Artikel 'Anmelden mit einem Alias oder Benutzernamen' aus, um Ihren Benutzern die Anmeldung mit einem Benutzernamen in Ihrer Anwendung zu ermöglichen:

1. Aktivieren Sie die Anmeldung mit dem Benutzernamen.
2. Erstellen Sie Benutzer mit Benutzername im Admin Center , oder aktualisieren Sie vorhandene Benutzer, indem Sie einen Benutzernamen hinzufügen. Alternativ können Sie auch die Benutzererstellung und -aktualisierung in Ihrer App mithilfe der Microsoft Graph-API automatisieren.

Nächster Schritt