Delen via

Zelfstudie: Gebruikers registreren bij een Angular-app met één pagina met behulp van de JavaScript SDK voor systeemeigen verificatie (preview)

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.

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