Självstudie: Registrera användare i en enkelsidig Angular-app med inbyggd autentisering med JavaScript SDK

Gäller för: Grön cirkel med en vit bockmarkeringssymbol som anger att följande innehåll gäller för externa klienter. 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:

  • Skapa ett Angular-Next.js projekt.
  • Lägg till MSAL JS SDK i det.
  • Lägg till UI-komponenter i appen.
  • Konfigurera projektet för att registrera användare.

Förutsättningar

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 install @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 src/app/app.component.scss och lägg sedan till följande formatfil.

Samla in ett användarnamn (alias) under registreringen

Du kan låta användare registrera sig med ett användarnamn (alias) utöver sin e-post. Användarnamnet (aliaset) är en alternativ inloggningsidentifierare, till exempel ett kund-ID, kontonummer eller ett annat värde som du väljer.

Under registreringen krävs användarnamnet (e-postmeddelandet) alltid som primär identifierare och användarnamnet (aliaset) ersätter det inte. Som standard är användarnamnet (aliaset) valfritt, även om en administratör kan konfigurera det efter behov. Din app samlar alltid in användarnamnet (e-postmeddelandet) och samlar in aliaset som ett attribut tillsammans med e-postmeddelandet. Vid inloggningen kan användaren sedan logga in med antingen användarnamnet (e-postmeddelandet) eller användarnamnet (aliaset). Information om hur attributet Användarnamn är konfigurerat som valfritt eller obligatoriskt finns i Konfigurera användarens indatatyper och sidlayout.

Så här samlar du in ett användarnamn (alias) under registreringen:

  1. Kontrollera att det inbyggda användarattributet Användarnamn är aktiverat i ditt registreringsanvändarflöde. Stegen finns i Aktivera användarnamn i inloggningsidentifierarprincipen.

  2. Lägg till ett flatUsername-fält i registreringskomponenten och inkludera sedan attributet flatusername i UserAccountAttributes som du skickar till signUp():

    flatUsername = "";

const attributes: UserAccountAttributes = {
    givenName: this.firstName,
     //...
    flatusername: this.flatUsername,
};

  3. Lägg till ett inmatningsfält för alias i sign-up.component.html bredvid de befintliga fälten:

    <input type="text" [(ngModel)]="flatUsername" name="flatUsername" placeholder="Username (alias)" />

  4. Hantera fel som rör användarnamnet (alias):

    • result.error?.isUserAlreadyExists() omfattar ett duplicerat e-postmeddelande eller ett duplicerat användarnamn (alias). Uppdatera meddelandet i enlighet med detta, till exempel finns det redan ett konto med det här e-postmeddelandet eller användarnamnet.
    • Ett ogiltigt användarnamn (alias) visas i result.error?.isAttributesValidationFailed() stället för result.error?.isInvalidUsername(). Förgrena den här metoden för att visa ett användarnamnsspecifikt meddelande.

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

Självstudie: Logga in användare i en React-enkelsidig app med hjälp av inbyggd autentisering med JavaScript SDK

  • Last updated on