Esercitazione: Accedere agli utenti in Angular SPA usando JavaScript SDK per l'autenticazione nativa

Si applica a: Tenant esterni (maggiori informazioni)

Questa esercitazione illustra come consentire agli utenti di accedere a un'app a pagina singola Angular usando JavaScript SDK per l'autenticazione nativa.

In questa esercitazione, farai:

Prerequisiti

• Completare la procedura descritta in Iscrivere gli utenti all'app a pagina singola Angular usando JavaScript SDK per l'autenticazione nativa.

Creare un componente di accesso

1. Usare l'interfaccia della riga di comando di Angular per generare un nuovo componente per la pagina di accesso all'interno della cartella dei componenti eseguendo il comando seguente:

   cd components
   ng generate component sign-in
   

2. Apri il file sign-in/sign-in.component.ts e sostituirne il contenuto con quello di sign-in.component.ts

3. Apri il file accesso/sign-in.component.html e aggiungi i contenuti da sign-in.component.html.

   • La logica seguente in sign-in.component.ts determina il passaggio successivo dopo il tentativo di accesso iniziale. A seconda del risultato, visualizza la password o il modulo di codice monouso in sign-in.component.html per guidare l'utente nella parte appropriata del processo di accesso:

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

     • Il metodo signIn() di istanza dell'SDK avvia il flusso di accesso.

     Note

     Il username parametro accetta l'indirizzo di posta elettronica dell'utente o il nome utente (alias) quando l'attributo utente predefinito Username è abilitato nel flusso utente del tenant. L'utente può immettere uno dei due valori per accedere. Per abilitare l'attributo, vedere Abilitare il nome utente nei criteri di identificatore di accesso.

     • Nel file sign-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>
     

Aggiornare il modulo di routing

Aprire il file src/app/app.routes.ts , quindi aggiungere la route per il componente di accesso:

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

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

Testare la funzionalità di accesso

1. Per avviare il server proxy CORS, eseguire il comando seguente nel terminale:

   npm run cors
   

2. Per avviare l'app Angular, aprire un'altra finestra del terminale, quindi eseguire il comando seguente:

   npm start
   

3. Aprire un Web browser e passare a http://localhost:4200/sign-in. Viene visualizzato un modulo di accesso.

4. Per accedere a un account esistente, immettere i dettagli, selezionare il pulsante Accedi e quindi seguire le istruzioni.

Passo successivo