Självstudie: Logga in användare i Angular SPA med hjälp av inbyggd autentisering i JavaScript SDK

Gäller för: Externa klienter (läs mer)

I den här självstudien får du lära dig hur du loggar in användare i en Enkelsidig Angular-app (SPA) med hjälp av inbyggd autentisering med JavaScript SDK.

I den här handledningen kommer du att:

Förutsättningar

• Slutför stegen i Registrera användare i ensidesappen Angular med hjälp av inbyggd autentisering med JavaScript SDK.

Skapa en inloggningskomponent

1. Använd Angular CLI för att generera en ny komponent för inloggningssidan i komponentmappen genom att köra följande kommando:

   cd components
   ng generate component sign-in
   

2. Öppna inloggnings-/sign-in.component.ts-filen och ersätt innehållet med innehåll från sign-in.component.ts

3. Öppna filen för inloggning/sign-in.component.html och lägg till innehållet från sign-in.component.html.

   • Följande logik i sign-in.component.ts avgör nästa steg efter det första inloggningsförsöket. Beroende på resultatet visas antingen lösenordet eller engångskodformuläret i sign-in.component.html för att vägleda användaren genom lämplig del av inloggningsprocessen:

         const result: SignInResult = await client.signIn({ username: this.username });
     
         if (result.isPasswordRequired()) {
             this.showPassword = true;
             this.showCode = false;
         } else if (result.isCodeRequired()) {
             this.showPassword = false;
             this.showCode = true;
         } else if (result.isCompleted()) {
             this.isSignedIn = true;
             this.userData = result.data;
         }
     

     • SDK:ts instansmetod signIn() startar inloggningsflödet.

     • I filensign-in.component.html :

     <form *ngIf="showPassword" (ngSubmit)="submitPassword()">
         <input type="password" [(ngModel)]="password" name="password" placeholder="Password" required />
         <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Password' }}</button>
     </form>
     <form *ngIf="showCode" (ngSubmit)="submitCode()">
         <input type="text" [(ngModel)]="code" name="code" placeholder="OTP Code" required />
         <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Code' }}</button>
     </form>
     

4. Öppna filen sign-in/sign-in.component.scss och lägg till innehållet från sign-in.component.scss.

Uppdatera routningsmodulen

Öppna filen src/app/app.routes.ts och lägg sedan till vägen för inloggningskomponenten:

import { SignInComponent } from './components/sign-in/sign-in.component';

export const routes: Routes = [
    ...
    { path: 'sign-in', component: SignInComponent },
];

Testa inloggningsfunktionen

1. Starta CORS-proxyservern genom att köra följande kommando i terminalen:

   npm run cors
   

2. Starta Angular-appen genom att öppna ett annat terminalfönster och sedan köra följande kommando:

   npm start
   

3. Öppna en webbläsare och navigera till http://localhost:4200/sign-in. Ett inloggningsformulär visas.

4. Om du vill logga in på ett befintligt konto anger du din information, väljer knappen Logga in och följer sedan anvisningarna.

Nästa steg