Tutorial: Registro de usuarios en una aplicación de página única de Angular mediante el SDK de JavaScript de autenticación nativa

Se aplica a: Círculo verde con un símbolo de marca de verificación blanca que indica que el siguiente contenido se aplica a los inquilinos externos. Inquilinos externos (más información)

En este tutorial, aprenderá a crear una aplicación de página única de Angular que registra a los usuarios mediante el SDK de JavaScript de la autenticación nativa.

En este tutorial, usted hará lo siguiente:

  • Cree un proyecto de Next.js de Angular.
  • Agregue el SDK de MSAL JS a él.
  • Agregue componentes de interfaz de usuario de la aplicación.
  • Configure el proyecto para registrar usuarios.

Prerrequisitos

Creación de un proyecto de React e instalación de dependencias

En una ubicación que prefiera en el equipo, ejecute los siguientes comandos para crear un nuevo proyecto de Angular con el nombre reactspa, vaya a la carpeta del proyecto y, a continuación, instale paquetes:

ng new angularspa
cd angularspa

Después de ejecutar correctamente los comandos, debe tener una aplicación con la estructura siguiente:

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

Adición del SDK de JavaScript al proyecto

Para usar el SDK de JavaScript de autenticación nativa en la aplicación, use el terminal para instalarlo mediante el comando siguiente:

npm install @azure/msal-browser

Las funcionalidades de autenticación nativas forman parte de la azure-msal-browser biblioteca. Para usar características de autenticación nativas, importe desde @azure/msal-browser/custom-auth. Por ejemplo:

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

Agregar configuración de cliente

En esta sección, definirá una configuración para la aplicación cliente pública de autenticación nativa para permitir que interactúe con la interfaz del SDK. Para ello:

  1. Cree un archivo denominado src/app/config/auth-config.ts y agregue el código siguiente:

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

    En el código, busque el marcador de posición:

    • Enter_the_Application_Id_Here después, reemplácela por el identificador de aplicación (cliente) de la aplicación que registró anteriormente.

    • Enter_the_Tenant_Subdomain_Here después, reemplácela por el subdominio del inquilino en el Centro de administración de Microsoft Entra. Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.

  2. Cree un archivo denominado src/app/services/auth.service.ts y agregue el código siguiente:

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

Creación de un componente de registro

  1. Cree un directorio denominado /app/components.

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

    cd components
ng generate component sign-up

  3. Abra el archivo sign-up/sign-up.component.ts y, a continuación, sustituya su contenido con el contenido de sign-up.component

  4. Abra el archivo sign-up/sign-up.component.html y agregue el código en el archivo HTML.

    • La siguiente lógica del archivo sign-up.component.ts determina lo que el usuario debe hacer después de iniciar el proceso de registro. Según el resultado, muestra el formulario de contraseña o el formulario de código de verificación en sign-up.component.html para que el usuario pueda continuar con el flujo de registro:

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

      El método de instancia del SDK inicia signUp() el flujo de registro.

    • Si desea que el usuario inicie el flujo de inicio de sesión inmediatamente después de completar el registro, use este fragmento de código:

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

  5. Abra el archivo src/app/app.component.scss y agregue el siguiente archivo de estilos.

Recopilar un nombre de usuario (alias) durante el registro

Puede permitir que los usuarios se registren con un nombre de usuario (alias) además de su correo electrónico. El nombre de usuario (alias) es un identificador de inicio de sesión alternativo, como un identificador de cliente, un número de cuenta u otro valor que elija.

Durante el registro, el nombre de usuario (correo electrónico) siempre es necesario, ya que el identificador principal y el nombre de usuario (alias) no lo reemplaza. De forma predeterminada, el nombre de usuario (alias) es opcional, aunque un administrador puede configurarlo según sea necesario. La aplicación siempre recopila el nombre de usuario (correo electrónico) y recopila el alias como un atributo junto con el correo electrónico. Al iniciar sesión, el usuario puede iniciar sesión con su nombre de usuario (correo electrónico) o con su nombre de usuario (alias). Para obtener información sobre cómo el atributo Username está configurado como opcional o necesario, consulte Configuración de los tipos de entrada de usuario y el diseño de página.

Para recopilar un nombre de usuario (alias) durante el registro:

  1. Asegúrese de que el atributo de usuario integrado Nombre de usuario está habilitado en el flujo de usuario de registro. Para conocer los pasos, consulte Habilitación del nombre de usuario en la directiva de identificador de inicio de sesión.

  2. Añada un campo flatUsername al componente de registro y, a continuación, incluya el atributo flatusername en el UserAccountAttributes que pasa a signUp():

    flatUsername = "";

const attributes: UserAccountAttributes = {
    givenName: this.firstName,
     //...
    flatusername: this.flatUsername,
};

  3. Agregue una entrada de alias a sign-up.component.html junto con los campos existentes:

    <input type="text" [(ngModel)]="flatUsername" name="flatUsername" placeholder="Username (alias)" />

  4. Control de errores relacionados con el nombre de usuario (alias):

    • result.error?.isUserAlreadyExists() cubre un correo electrónico duplicado o un nombre de usuario duplicado (alias). Actualice el mensaje en consecuencia, por ejemplo, Ya existe una cuenta con este correo electrónico o nombre de usuario.
    • Se muestra un nombre de usuario (alias) no válido en result.error?.isAttributesValidationFailed() lugar de result.error?.isInvalidUsername(). Use este método para mostrar un mensaje personalizado según el nombre de usuario.

Iniciar sesión automáticamente después del registro (opcional)

Puede iniciar sesión automáticamente a los usuarios después de un registro correcto sin iniciar un flujo de inicio de sesión nuevo. Para ello, usa el siguiente fragmento de código. Vea un ejemplo completo en 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;
        }
    }

Cuando inicies automáticamente la sesión de un usuario, usa el siguiente fragmento de código en tu archivo 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>

Actualizar el enrutamiento de la aplicación

  1. Abra el archivo src/app/app.route.ts y agregue la ruta para el componente de registro:

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

Prueba del flujo de registro

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

    npm run cors

  2. Para iniciar la aplicación, ejecute el siguiente comando en el terminal:

    npm start

  3. Abra un explorador web y vaya a http://localhost:4200/sign-up. Aparece un formulario de registro.

  4. Para registrarse en una cuenta, escriba los detalles, seleccione el botón Continuar y siga las indicaciones.

Paso siguiente

Tutorial: Inicio de sesión de usuarios en una aplicación de página única de React mediante el SDK de JavaScript de autenticación nativa

  • Last updated on