Sdílet prostřednictvím

Kurz: Registrace uživatelů do jednostránka aplikace Angular pomocí nativní sady JavaScript SDK pro ověřování (Preview)

Platí pro: Zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro externí tenanty. Externí tenanti (další informace)

V tomto kurzu se dozvíte, jak vytvořit jednostráňovou aplikaci Angular, která zaregistruje uživatele pomocí sady JavaScript SDK nativního ověřování.

V tomto kurzu se naučíte:

  • Vytvořte projekt Next.js Angular.
  • Přidejte do ní sadu MSAL JS SDK.
  • Přidejte součásti uživatelského rozhraní aplikace.
  • Nastavte projekt pro registraci uživatelů.

Požadavky

Vytvoření projektu React a instalace závislostí

V umístění podle výběru v počítači spusťte následující příkazy, které vytvoří nový projekt Angular s názvem reactspa, přejděte do složky projektu a pak nainstalujte balíčky:

ng new angularspa
cd angularspa

Po úspěšném spuštění příkazů byste měli mít aplikaci s následující strukturou:

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

Přidání sady JavaScript SDK do projektu

Pokud chcete v aplikaci použít nativní sadu JavaScript SDK pro ověřování, pomocí terminálu ji nainstalujte pomocí následujícího příkazu:

npm install @azure/msal-browser

Nativní možnosti ověřování jsou součástí azure-msal-browser knihovny. Chcete-li použít nativní funkce ověřování, importujete z @azure/msal-browser/custom-auth. Například:

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

Přidání konfigurace klienta

V této části definujete konfiguraci nativní ověřovací veřejné klientské aplikace, která umožňuje interakci s rozhraním sady SDK. Postupujte takto:

  1. Vytvořte soubor s názvem src/app/config/auth-config.ts a přidejte následující kód:

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

    V kódu vyhledejte zástupný symbol:

    • Enter_the_Application_Id_Here pak ji nahraďte ID aplikace (klienta) aplikace, kterou jste zaregistrovali dříve.

    • Enter_the_Tenant_Subdomain_Here pak ho nahraďte subdoménou tenanta v Centru pro správu Microsoft Entra. Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud neznáte název svého tenanta, zjistěte, jak získat podrobnosti o tenantovi.

  2. Vytvořte soubor s názvem src/app/services/auth.service.ts a přidejte následující kód:

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

Vytvoření komponenty registrace

  1. Vytvořte adresář s názvem /app/components.

  2. Pomocí Angular CLI vygenerujte novou komponentu pro registrační stránku ve složce components spuštěním následujícího příkazu:

    cd components
ng generate component sign-up

  3. Otevřete soubor pro registraci/sign-up.component.ts a nahraďte jeho obsah obsahem v aplikaci sign-up.component.

  4. Otevřete soubor pro registraci nebosign-up.component.html a přidejte kód do souboru HTML.

    • Následující logika v souboru sign-up.component.ts určuje, co uživatel musí udělat dál po spuštění procesu registrace. V závislosti na výsledku se v sign-up.component.html zobrazí formulář hesla nebo ověřovací kód, aby uživatel mohl pokračovat v postupu registrace:

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

      Metoda signUp() instance sady SDK spustí tok registrace.

    • Pokud chcete, aby uživatel spustil tok přihlašování hned po dokončení registrace, použijte tento fragment kódu:

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

  5. Otevřete soubor src/app/app.component.scss a přidejte následující soubor stylů.

Automatické přihlášení po registraci (volitelné)

Po úspěšné registraci můžete uživatele automaticky přihlásit, aniž byste museli spustit nový tok přihlášení. K tomu použijte následující fragment kódu. Podívejte se na úplný příklad registrace nebo 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;
        }
    }

Když automaticky podepíšete uživatele, použijte následující fragment kódu v souboru HTML pro registraci/sign-up.component.html .

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

Aktualizace směrování aplikací

  1. Otevřete soubor src/app/app.route.ts a přidejte trasu pro součást registrace:

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

Otestování toku registrace

  1. Pokud chcete spustit proxy server CORS, spusťte v terminálu následující příkaz:

    npm run cors

  2. Aplikaci spustíte spuštěním následujícího příkazu v terminálu:

    npm start

  3. Otevřete webový prohlížeč a přejděte na http://localhost:4200/sign-up. Zobrazí se registrační formulář.

  4. Pokud se chcete zaregistrovat k účtu, zadejte podrobnosti, vyberte tlačítko Pokračovat a postupujte podle pokynů.

Další krok

Kurz: Přihlášení uživatelů k jednostráňové aplikaci React pomocí nativní sady JavaScript SDK pro ověřování

  • Last updated on