Lernprogramm: Registrieren von Benutzern bei einer Angular-Einzelseiten-App mithilfe des nativen Authentifizierungs-JavaScript SDK (Vorschau)

Gilt für: Externe Mandanten (weitere Informationen)

In diesem Lernprogramm erfahren Sie, wie Sie eine Angular-Einzelseiten-App erstellen, die Benutzer mithilfe des JavaScript-SDK der nativen Authentifizierung registriert.

In diesem Tutorial erfahren Sie:

Voraussetzungen

• Führen Sie die Schritte in der Schnellstartanleitung aus: Anmelden von Benutzern in einer Angular-Einzelseiten-App mit systemeigenem JavaScript SDK. Diese Schnellstartanleitung zeigt, wie Sie ein Angular-Beispielcodebeispiel ausführen.
• Führen Sie die Schritte im Einrichten des CORS-Proxyservers aus, um CORS-Header für die systemeigene Authentifizierung zu verwalten.
• Visual Studio Code oder ein anderer Code-Editor.
• Node.js
• Angular CLI.

Erstellen eines React-Projekts und Installieren von Abhängigkeiten

Führen Sie an einem Speicherort ihrer Wahl auf Ihrem Computer die folgenden Befehle aus, um ein neues Angular-Projekt mit dem Namen reactspa zu erstellen, navigieren Sie in den Projektordner, und installieren Sie dann Pakete:

ng new angularspa
cd angularspa

Nachdem Sie die Befehle erfolgreich ausgeführt haben, sollten Sie über eine App mit der folgenden Struktur verfügen:

angularspa/
└──node_modules/
   └──...
└──public/
   └──...
└──src/
   └──app/
      └──app.component.html
      └──app.component.scss
      └──app.component.ts
      └──app.modules.ts
      └──app.config.ts
      └──app.routes.ts
   └──index.html
   └──main.ts
   └──style.scss
└──angular.json
└──package-lock.json
└──package.json
└──README.md
└──tsconfig.app.json
└──tsconfig.json
└──tsconfig.spec.json

Hinzufügen des JavaScript-SDK zu Ihrem Projekt

Um das systemeigene Authentifizierungs-JavaScript SDK in Ihrer App zu verwenden, verwenden Sie Ihr Terminal, um es mithilfe des folgenden Befehls zu installieren:

npm install @azure/msal-browser

Die systemeigenen Authentifizierungsfunktionen sind Teil der azure-msal-browser Bibliothek. Um systemeigene Authentifizierungsfeatures zu verwenden, importieren Sie aus @azure/msal-browser/custom-auth. Beispiel:

  import CustomAuthPublicClientApplication from "@azure/msal-browser/custom-auth";

Hinzufügen der Clientkonfiguration

In diesem Abschnitt definieren Sie eine Konfiguration für die systemeigene öffentliche Clientanwendung für die Authentifizierung, damit sie mit der Schnittstelle des SDK interagieren kann. Um dies zu tun:

1. Erstellen Sie eine Datei namens "src/app/config/auth-config.ts", und fügen Sie dann den folgenden Code hinzu:

   export const customAuthConfig: CustomAuthConfiguration = {
       customAuth: {
           challengeTypes: ["password", "oob", "redirect"],
           authApiProxyUrl: "http://localhost:3001/api",
       },
       auth: {
           clientId: "Enter_the_Application_Id_Here",
           authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com",
           redirectUri: "/",
           postLogoutRedirectUri: "/",
           navigateToLoginRequestUrl: false,
       },
       cache: {
           cacheLocation: "sessionStorage",
       },
       system: {
           loggerOptions: {
               loggerCallback: (level: LogLevel, message: string, containsPii: boolean) => {
                   if (containsPii) {
                       return;
                   }
                   switch (level) {
                       case LogLevel.Error:
                           console.error(message);
                           return;
                       case LogLevel.Info:
                           console.info(message);
                           return;
                       case LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case LogLevel.Warning:
                           console.warn(message);
                           return;
                   }
               },
           },
       },
   };
   

   Suchen Sie im Code den Platzhalter:

   • Enter_the_Application_Id_Here ersetzen Sie sie dann durch die Anwendungs-ID (Client) der App, die Sie zuvor registriert haben.

   • Enter_the_Tenant_Subdomain_Here ersetzen Sie sie dann durch die Mandantendomäne in Ihrem Microsoft Entra Admin Center. Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, finden Sie weitere Informationen unter Auslesen der Details Ihres Mandanten.

2. Erstellen Sie eine Datei namens "src/app/services/auth.service.ts", und fügen Sie dann den folgenden Code hinzu:

   import { Injectable } from '@angular/core';
   import { CustomAuthPublicClientApplication, ICustomAuthPublicClientApplication } from '@azure/msal-browser/custom-auth';
   import { customAuthConfig } from '../config/auth-config';
   
   @Injectable({ providedIn: 'root' })
   export class AuthService {
     private authClientPromise: Promise<ICustomAuthPublicClientApplication>;
     private authClient: ICustomAuthPublicClientApplication | null = null;
   
     constructor() {
       this.authClientPromise = this.init();
     }
   
     private async init(): Promise<ICustomAuthPublicClientApplication> {
       this.authClient = await CustomAuthPublicClientApplication.create(customAuthConfig);
       return this.authClient;
     }
   
     getClient(): Promise<ICustomAuthPublicClientApplication> {
       return this.authClientPromise;
     }
   }
   

Erstellen einer Registrierungskomponente

1. Erstellen Sie ein Verzeichnis namens "/app/components".

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

   cd components
   ng generate component sign-up
   

3. Öffnen Sie die Registrierungs-/sign-up.component.ts datei, und ersetzen Sie dann deren Inhalt durch den Inhalt in "sign-up.component".

4. Öffnen Sie die Registrierung/sign-up.component.html Datei, und fügen Sie den Code in der HTML-Datei hinzu.

   • Die folgende Logik in der datei sign-up.component.ts bestimmt, was der Benutzer als Nächstes tun muss, nachdem er den Registrierungsvorgang gestartet hat. Je nach Ergebnis wird entweder das Kennwortformular oder das Überprüfungscodeformular in sign-up.component.html angezeigt, damit der Benutzer den Registrierungsablauf fortsetzen kann:

        const attributes: UserAccountAttributes = {
                    givenName: this.firstName,
                    surname: this.lastName,
                    jobTitle: this.jobTitle,
                    city: this.city,
                    country: this.country,
                };
        const result = await client.signUp({
                    username: this.email,
                    attributes,
                });
     
        if (result.isPasswordRequired()) {
            this.showPassword = true;
            this.showCode = false;
        } else if (result.isCodeRequired()) {
            this.showPassword = false;
            this.showCode = true;
        }
     

     Die Instanzmethode signUp() des SDK startet den Registrierungsablauf.

   • Wenn der Benutzer den Anmeldeablauf unmittelbar nach Abschluss der Registrierung starten soll, verwenden Sie diesen Codeausschnitt:

     <div *ngIf="isSignedUp">
         <p>The user has been signed up, please click <a href="/sign-in">here</a> to sign in.</p>
     </div>
     

5. Öffnen Sie die Datei "src/app/app.component.scss" , und fügen Sie dann die folgende Formatvorlagendatei hinzu.

Automatische Anmeldung nach der Registrierung (optional)

Sie können sich nach einer erfolgreichen Registrierung automatisch bei Ihren Benutzern anmelden, ohne einen neuen Anmeldeablauf zu starten. Verwenden Sie dazu den folgenden Codeschnipsel. Ein vollständiges Beispiel finden Sie bei der Registrierung/sign-up.component.ts:

    if (this.signUpState instanceof SignUpCompletedState) {
        const result = await this.signUpState.signIn();
    
        if (result.isFailed()) {
            this.error = result.error?.errorData?.errorDescription || "An error occurred during auto sign-in";
        }
    
        if (result.isCompleted()) {
            this.userData = result.data;
            this.signUpState = result.state;
            this.isSignedUp = true;
            this.showCode = false;
            this.showPassword = false;
        }
    }

Wenn Sie ein Benutzer automatisch signieren, verwenden Sie den folgenden Codeausschnitt in Ihrer Anmelde-/sign-up.component.htmlHTML-Datei .

    <div *ngIf="userData && !isSignedIn">
        <p>Signed up complete, and signed in as {{ userData?.getAccount()?.username }}</p>
    </div>
    <div *ngIf="isSignedUp && !userData">
        <p>Sign up completed! Signing you in automatically...</p>
    </div>

Aktualisieren des App-Routings

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

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { SignUpComponent } from './components/sign-up/sign-up.component';
   import { AuthService } from './services/auth.service';
   import { AppComponent } from './app.component';
   
   export const routes: Routes = [
       { path: 'sign-up', component: SignUpComponent },
   ];
   
   @NgModule({
       imports: [
           RouterModule.forRoot(routes),
           SignUpComponent,
       ],
       providers: [AuthService],
       bootstrap: [AppComponent]
   })
   export class AppRoutingModule { }
   

Testen des Registrierungsablaufs

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

   npm run cors
   

2. Führen Sie zum Starten der Anwendung den folgenden Befehl in Ihrem Terminal aus:

   npm start
   

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

4. Wenn Sie sich für ein Konto registrieren möchten, geben Sie Ihre Details ein, wählen Sie die Schaltfläche " Weiter " aus, und folgen Sie dann den Eingabeaufforderungen.

Nächster Schritt