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 de inicio de sesión o sign-in.component.ts y reemplace su contenido por contenido de sign-in.component.ts

3. Abra el archivo de inicio de sesión osign-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.

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

Habilitación del inicio de sesión con un alias o un nombre de usuario

Puede permitir que los usuarios que inicien sesión con una dirección de correo electrónico y una contraseña también inicien sesión con un nombre de usuario y una contraseña. El nombre de usuario también denominado identificador de inicio de sesión alternativo puede ser un identificador de cliente, un número de cuenta u otro identificador que elija usar como nombre de usuario.

Puede asignar nombres de usuario a la cuenta de usuario manualmente a través del Centro de administración de Microsoft Entra o automatizarlo en la aplicación a través de Microsoft Graph API.

Siga los pasos descritos en el artículo Iniciar sesión con un alias o nombre de usuario para permitir que los usuarios inicien sesión con un nombre de usuario en su aplicación.

1. Habilite el nombre de usuario en el inicio de sesión.
2. Crea usuarios con nombre de usuario en el centro de administración o actualiza a los usuarios existentes añadiendo un nombre de usuario. Como alternativa, también puede automatizar la creación y actualización de usuarios en la aplicación mediante Microsoft Graph API.

Paso siguiente