Tutorial: Inicio de sesión de usuarios en Angular SPA mediante el SDK de JavaScript de autenticación nativa

Se aplica a: Inquilinos externos (más información)

En este tutorial, aprenderá a iniciar sesión de usuarios en una aplicación de página única (SPA) de Angular mediante el SDK de JavaScript de autenticación nativa.

En este tutorial, usted hará lo siguiente:

Prerrequisitos

• Complete los pasos descritos en Registro de usuarios en una aplicación de página única de Angular mediante el SDK de JavaScript de autenticación nativa.

Creación de un componente de inicio de sesión

1. Use la CLI de Angular para generar un nuevo componente para la página de inicio de sesión dentro de la carpeta components mediante la ejecución del comando siguiente:

   cd components
   ng generate component sign-in
   

2. Abra el archivo sign-in/sign-in.component.ts y reemplace su contenido con el contenido de sign-in.component.ts

3. Abra el archivo sign-in/sign-in.component.html y agregue el contenido de sign-in.component.html.

   • La siguiente lógica de sign-in.component.ts determina el siguiente paso después del intento de inicio de sesión inicial. Según el resultado, muestra la contraseña o el formulario de código de un solo uso en sign-in.component.html para guiar al usuario a través de la parte adecuada del proceso de inicio de sesión:

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

     • El método de instancia del SDK inicia signIn() el flujo de inicio de sesión.

     Nota:

     El username parámetro acepta la dirección de correo electrónico del usuario o su nombre de usuario (alias) cuando el atributo de usuario integrado Username está habilitado en el flujo de usuario del inquilino. El usuario puede escribir cualquier valor para iniciar sesión. Para habilitar el atributo, consulte Habilitación del nombre de usuario en la directiva de identificador de inicio de sesión.

     • En el archivo 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>
     

Actualización del módulo de enrutamiento

Abra el archivo src/app/app.routes.ts y agregue la ruta para el componente de inicio de sesión:

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

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

Prueba de la funcionalidad de inicio de sesión

1. Para iniciar el servidor proxy CORS, ejecute el siguiente comando en el terminal:

   npm run cors
   

2. Para iniciar la aplicación angular, abra otra ventana de terminal y, a continuación, ejecute el siguiente comando:

   npm start
   

3. Abra un explorador web y vaya a http://localhost:4200/sign-in. Aparece un formulario de inicio de sesión.

4. Para iniciar sesión en una cuenta existente, escriba los detalles, seleccione el botón Iniciar sesión y siga las indicaciones.

Paso siguiente