Zelfstudie: Gebruikers registreren in een Angular-single-page-app met de JavaScript SDK voor systeemeigen verificatie

Van toepassing op: Groene cirkel met een wit vinkje dat aangeeft dat de volgende inhoud van toepassing is op externe tenants. Externe tenants (meer informatie)

In deze zelfstudie leert u hoe u een Angular-app met één pagina bouwt waarmee gebruikers worden geregistreerd met behulp van de JavaScript SDK van systeemeigen verificatie.

In deze handleiding leert u:

  • Een Angular Next.js-project maken.
  • Voeg er MSAL JS SDK aan toe.
  • Ui-onderdelen van de app toevoegen.
  • Stel het project in om gebruikers te registreren.

Vereiste voorwaarden

Een React-project maken en afhankelijkheden installeren

Voer op een locatie naar keuze op uw computer de volgende opdrachten uit om een nieuw Angular-project te maken met de naam reactspa, navigeer naar de projectmap en installeer vervolgens pakketten:

ng new angularspa
cd angularspa

Nadat u de opdrachten hebt uitgevoerd, moet u een app met de volgende structuur hebben:

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

JavaScript SDK toevoegen aan uw project

Als u de JavaScript SDK voor systeemeigen verificatie in uw app wilt gebruiken, gebruikt u de terminal om deze te installeren met behulp van de volgende opdracht:

npm install @azure/msal-browser

De systeemeigen verificatiemogelijkheden maken deel uit van de azure-msal-browser bibliotheek. Als u systeemeigen verificatiefuncties wilt gebruiken, importeert u uit @azure/msal-browser/custom-auth. Voorbeeld:

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

Clientconfiguratie toevoegen

In deze sectie definieert u een configuratie voor een openbare clienttoepassing voor systeemeigen verificatie, zodat deze kan communiceren met de interface van de SDK. Dit doet u als volgt:

  1. Maak een bestand met de naam src/app/config/auth-config.ts en voeg vervolgens de volgende code toe:

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

    Zoek in de code de tijdelijke aanduiding:

    • Enter_the_Application_Id_Here vervang deze vervolgens door de toepassings-id (client) van de app die u eerder hebt geregistreerd.

    • Enter_the_Tenant_Subdomain_Here vervang dit vervolgens door het tenantsubdomein in uw Microsoft Entra-beheercentrum. Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Indien u uw tenantnaam niet hebt, leer dan hoe u de details van uw tenant kunt lezen.

  2. Maak een bestand met de naam src/app/services/auth.service.ts en voeg vervolgens de volgende code toe:

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

Een registratieonderdeel maken

  1. Maak een map met de naam /app/components.

  2. Gebruik Angular CLI om een nieuw onderdeel te genereren voor de registratiepagina in de map onderdelen door de volgende opdracht uit te voeren:

    cd components
ng generate component sign-up

  3. Open sign-up/sign-up.component.ts en vervang de inhoud met de inhoud van sign-up.component

  4. Open het aanmeldings-/sign-up.component.html-bestand en voeg de code toe aan het HTML-bestand.

    • De volgende logica in het sign-up.component.ts-bestand bepaalt wat de gebruiker moet doen na het starten van het registratieproces. Afhankelijk van het resultaat wordt het wachtwoordformulier of het verificatiecodeformulier in sign-up.component.html weergegeven, zodat de gebruiker kan doorgaan met de registratiestroom:

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

      De instantiemethode signUp() van de SDK start de registratiestroom.

    • Als u wilt dat de gebruiker de aanmeldingsstroom onmiddellijk start nadat de registratie is voltooid, gebruikt u dit codefragment:

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

  5. Open het bestand src/app/app.component.scss en voeg vervolgens het volgende stijlenbestand toe.

Een gebruikersnaam (alias) verzamelen tijdens het registreren

U kunt gebruikers zich laten registreren met een gebruikersnaam (alias) naast hun e-mailadres. De gebruikersnaam (alias) is een alternatieve aanmeldings-id, zoals een klant-id, accountnummer of een andere waarde die u kiest.

Tijdens het registreren is de gebruikersnaam (e-mail) altijd vereist als primaire id en vervangt de gebruikersnaam (alias) deze niet. De gebruikersnaam (alias) is standaard optioneel, hoewel een beheerder deze naar behoefte kan configureren. Uw app verzamelt altijd de gebruikersnaam (e-mail) en verzamelt de alias als een kenmerk naast de e-mail. Bij het aanmelden kan de gebruiker zich vervolgens aanmelden met de gebruikersnaam (e-mail) of de gebruikersnaam (alias). Zie Gebruikersinvoertypen en pagina-indeling configureren voor meer informatie over hoe het kenmerk Gebruikersnaam is geconfigureerd als optioneel of vereist.

Een gebruikersnaam (alias) verzamelen tijdens het registreren:

  1. Zorg ervoor dat het ingebouwde gebruikerskenmerk gebruikersnaam is ingeschakeld in de gebruikersstroom voor registratie. Zie Gebruikersnaam inschakelen in het aanmeldings-id-beleid voor de stappen.

  2. Voeg een flatUsername-veld toe aan de aanmeldcomponent en neem vervolgens het attribuut flatusername op in de UserAccountAttributes die u doorgeeft aan signUp():

    flatUsername = "";

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

  3. Voeg een aliasinvoer toe aan sign-up.component.html naast de bestaande velden:

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

  4. Omgaan met fouten met betrekking tot de gebruikersnaam (alias):

    • result.error?.isUserAlreadyExists() behandelt een dubbele e-mail of een dubbele gebruikersnaam (alias). Werk het bericht dienovereenkomstig bij, bijvoorbeeld een account met deze e-mail of gebruikersnaam bestaat al.
    • Een ongeldige gebruikersnaam (alias) wordt weergegeven via result.error?.isAttributesValidationFailed() in plaats van via result.error?.isInvalidUsername(). Vertak deze methode om een bericht weer te geven dat specifiek is voor een gebruikersnaam.

Automatisch aanmelden na aanmelding (optioneel)

U kunt uw gebruikers automatisch aanmelden na een geslaagde registratie zonder een nieuwe aanmeldingsstroom te starten. Gebruik hiervoor het volgende codefragment. Bekijk een volledig voorbeeld in 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;
        }
    }

Wanneer u een gebruiker automatisch aanmeldt, gebruikt u het volgende codefragment in uw aanmeldings-/sign-up.component.htmlHTML-bestand .

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

App-routering bijwerken

  1. Open het bestand src/app/app.route.ts en voeg vervolgens de route toe voor het registratieonderdeel:

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

De registratiestroom testen

  1. Voer de volgende opdracht uit in de terminal om de CORS-proxyserver te starten:

    npm run cors

  2. Voer de volgende opdracht uit in uw terminal om uw toepassing te starten:

    npm start

  3. Open een webbrowser en navigeer naar http://localhost:4200/sign-up. Er wordt een registratieformulier weergegeven.

  4. Als u zich wilt registreren voor een account, voert u uw gegevens in, selecteert u de knop Doorgaan en volgt u de aanwijzingen.

Volgende stap

Tutorial: Gebruikers inloggen bij een React-applicatie met één enkele pagina met behulp van native authenticatie JavaScript SDK

  • Last updated on