Samouczek: rejestrowanie użytkowników w aplikacji jednostronicowej Angular przy użyciu natywnego zestawu SDK języka JavaScript do uwierzytelniania (wersja zapoznawcza)

Dotyczy: Dzierżawy zewnętrzne (dowiedz się więcej)

Z tego samouczka dowiesz się, jak utworzyć jednostronicową aplikację Angular, która zarejestruje użytkowników przy użyciu natywnego zestawu SDK do uwierzytelniania w JavaScript.

W tym samouczku nauczysz się następujących rzeczy:

• Utwórz projekt platformy Angular Next.js.
• Dodaj do niego zestaw MSAL JS SDK.
• Dodaj składniki interfejsu użytkownika aplikacji.
• Skonfiguruj projekt, aby zarejestrować użytkowników.

Wymagania wstępne

• Wykonaj kroki opisane w przewodniku Szybki start: Logowanie użytkowników w jednostronicowej aplikacji Angulara za pomocą natywnego zestawu SDK JavaScript do uwierzytelniania. W tym szybkim przewodniku pokazano, jak uruchomić przykładowy kod w Angular.
• Wykonaj kroki opisane w temacie Konfigurowanie serwera proxy CORS w celu zarządzania nagłówkami CORS na potrzeby uwierzytelniania natywnego.
• Visual Studio Code lub inny edytor kodu.
• Node.js.
• Angular CLI (interfejs wiersza polecenia).

Tworzenie projektu React i instalowanie zależności

W wybranej lokalizacji na komputerze uruchom następujące polecenia, aby utworzyć nowy projekt Angular o nazwie reactspa, przejdź do folderu projektu, a następnie zainstaluj pakiety:

ng new angularspa
cd angularspa

Po pomyślnym uruchomieniu poleceń należy mieć aplikację z następującą 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

Dodawanie zestawu JAVAScript SDK do projektu

Aby użyć natywnego JavaScript SDK w swojej aplikacji, zainstaluj go w terminalu przy użyciu następującego polecenia:

npm install @azure/msal-browser

Możliwości uwierzytelniania natywnego są częścią azure-msal-browser biblioteki. Aby użyć funkcji uwierzytelniania natywnego, importujesz z @azure/msal-browser/custom-auth. Przykład:

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

Dodawanie konfiguracji klienta

W tej sekcji zdefiniujesz konfigurację dla natywnej publicznej aplikacji klienckiej uwierzytelniania, aby umożliwić jej interakcję z interfejsem zestawu SDK. W tym celu:

1. Utwórz plik o nazwie src/app/config/auth-config.ts, a następnie dodaj następujący 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;
                   }
               },
           },
       },
   };
   

   W kodzie znajdź symbol zastępczy:

   • Enter_the_Application_Id_Here następnie zastąp go identyfikatorem aplikacji (klienta) tej aplikacji, którą zarejestrowałeś wcześniej.

   • Enter_the_Tenant_Subdomain_Here następnie zastąp je poddomeną dzierżawcy w centrum administracyjnym Microsoft Entra. Na przykład, jeśli podstawowa domena najemcy to contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz nazwy najemcy, dowiedz się, jak sprawdzić szczegóły najemcy.

2. Utwórz plik o nazwie src/app/services/auth.service.ts, a następnie dodaj następujący 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;
     }
   }
   

Utwórz komponent rejestracji

1. Utwórz katalog o nazwie /app/components.

2. Użyj interfejsu wiersza polecenia platformy Angular, aby wygenerować nowy składnik strony rejestracji wewnątrz folderu components , uruchamiając następujące polecenie:

   cd components
   ng generate component sign-up
   

3. Otwórz plik sign-up/sign-up.component.ts , a następnie zastąp jego zawartość zawartością w pliku sign-up.component

4. Otwórz plik sign-up/sign-up.component.html i dodaj kod w plik HTML.

   • Poniższa logika w pliku sign-up.component.ts określa, co użytkownik musi zrobić dalej po rozpoczęciu procesu rejestracji. W zależności od wyniku zostanie wyświetlony formularz hasła lub formularz kodu weryfikacyjnego w sign-up.component.html , aby użytkownik mógł kontynuować przepływ rejestracji:

        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 instancji zestawu SDK signUp() uruchamia przepływ rejestracji.

   • Jeśli chcesz, aby użytkownik uruchamiał przepływ logowania natychmiast po zakończeniu rejestracji, użyj tego fragmentu kodu:

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

5. Otwórz plik src/app/app.component.scss, a następnie dodaj następujący plik stylów.

Automatyczne logowanie po utworzeniu konta (opcjonalnie)

Możesz automatycznie zalogować użytkowników po pomyślnej rejestracji bez konieczności uruchamiania nowego przepływu logowania. W tym celu użyj następującego fragmentu kodu. Zapoznaj się z kompletnym przykładem w 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;
        }
    }

Gdy logujesz użytkownika automatycznie, użyj poniższego fragmentu kodu w pliku HTML sign-up/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>

Aktualizowanie routingu aplikacji

1. Otwórz plik src/app/app.route.ts , a następnie dodaj trasę dla składnika rejestracji:

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

Testowanie przepływu rejestracji

1. Aby uruchomić serwer proxy CORS, uruchom następujące polecenie w terminalu:

   npm run cors
   

2. Aby uruchomić aplikację, uruchom następujące polecenie w terminalu:

   npm start
   

3. Otwórz przeglądarkę internetową i przejdź pod adres http://localhost:4200/sign-up. Zostanie wyświetlony formularz rejestracji.

4. Aby utworzyć konto, wprowadź szczegóły, wybierz przycisk Kontynuuj , a następnie postępuj zgodnie z monitami.

Następny krok

Samouczek: logowanie użytkowników do jednostronicowej aplikacji React przy użyciu natywnego zestawu SDK uwierzytelniania JavaScript