Compartir a través de

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

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 de registro o sign-up.component.ts y reemplace su contenido por el contenido en sign-up.component.

  4. Abra el archivo de registro osign-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.

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. Consulte un ejemplo completo en registro o 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;
        }
    }

Al realizar la firma automática en un usuario, use el siguiente fragmento de código en el archivo html de registro osign-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>

Actualización del enrutamiento de aplicaciones

  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