Självstudie: Registrera användare i ett Angular single-page app med JavaScript SDK för inbyggd autentisering (beta)

Gäller för: Externa klienter (läs mer)

I den här självstudien får du lära dig hur du skapar en enkelsidig Angular-app som registrerar användare med hjälp av den interna autentiseringens JavaScript SDK.

I den här handledningen kommer du att:

Förutsättningar

• Slutför stegen i Snabbstart: Logga in användare i en enkelsidig Angular-app med hjälp av inbyggd autentisering med JavaScript SDK. Den här snabbstarten visar hur du kör ett exempel på Angular-kodexempel.
• Slutför stegen i Konfigurera CORS-proxyserver för att hantera CORS-huvuden för intern autentisering.
• Visual Studio Code eller någon annan kodredigerare.
• Node.js.
• Angular CLI.

Skapa ett React-projekt och installera beroenden

På valfri plats på datorn kör du följande kommandon för att skapa ett nytt Angular-projekt med namnet reactspa, navigera till projektmappen och installera paket:

ng new angularspa
cd angularspa

När du har kört kommandona bör du ha en app med följande struktur:

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

Lägga till JavaScript SDK i projektet

Om du vill använda javascript-SDK för inbyggd autentisering i din app använder du terminalen för att installera den med hjälp av följande kommando:

npm intall @azure/msal-browser

De inbyggda autentiseringsfunktionerna ingår i azure-msal-browser biblioteket. Om du vill använda inbyggda autentiseringsfunktioner importerar du från @azure/msal-browser/custom-auth. Till exempel:

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

Lägga till klientkonfiguration

I det här avsnittet definierar du en konfiguration för offentligt klientprogram för intern autentisering så att det kan interagera med SDK:ts gränssnitt. För att göra detta:

1. Skapa en fil med namnet src/app/config/auth-config.ts och lägg sedan till följande kod:

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

   Leta rätt på platshållaren i koden:

   • Enter_the_Application_Id_Here ersätt den sedan med program-ID:t (klient) för den app som du registrerade tidigare.

   • Enter_the_Tenant_Subdomain_Here ersätt den sedan med klientunderdomänen i administrationscentret för Microsoft Entra. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har namnet på din hyresgäst, lär hur du kan läsa detaljerna om din hyresgäst.

2. Skapa en fil med namnet src/app/services/auth.service.ts och lägg sedan till följande kod:

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

Skapa en registreringskomponent

1. Skapa en katalog med namnet /app/components.

2. Använd Angular CLI för att generera en ny komponent för registreringssidan i komponentmappen genom att köra följande kommando:

   cd components
   ng generate component sign-up
   

3. Öppna registrerings-/sign-up.component.ts-filen och ersätt innehållet med innehållet i sign-up.component

4. Öppna registrerings-/sign-up.component.html-fil och lägg till koden i html-filen.

   • Följande logik i filen sign-up.component.ts avgör vad användaren behöver göra härnäst när registreringen har startats. Beroende på resultatet visas antingen lösenordsformuläret eller verifieringskodformuläret i sign-up.component.html så att användaren kan fortsätta med registreringsflödet:

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

     SDK:ts instansmetod signUp() startar registreringsflödet.

   • Om du vill att användaren ska starta inloggningsflödet direkt efter att registreringen har slutförts använder du det här kodfragmentet:

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

5. Öppna filen sign-up/sign-up.component.scss och lägg sedan till följande formatfil.

Logga in automatiskt efter registrering (valfritt)

Du kan automatiskt logga in dina användare efter en lyckad registrering utan att starta ett nytt inloggningsflöde. Om du vill göra det använder du följande kodfragment. Se ett fullständigt exempel på sign-up/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;
        }
    }

När du automatiskt loggar in en användare, använder du följande kodfragment i din registrering/sign-up.component.html-fil.

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

Uppdatera approutning

1. Öppna filen src/app/app.route.ts och lägg sedan till vägen för registreringskomponenten:

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

Testa registreringsflödet

1. Starta CORS-proxyservern genom att köra följande kommando i terminalen:

   npm run cors
   

2. Starta programmet genom att köra följande kommando i terminalen:

   npm start
   

3. Öppna en webbläsare och navigera till http://localhost:4200/sign-up. Ett registreringsformulär visas.

4. Om du vill registrera dig för ett konto anger du din information, väljer knappen Fortsätt och följer sedan anvisningarna.

Nästa steg