Implementación de autenticación de clave de acceso en Angular con TypeScript

En esta guía, recorreremos el proceso de integración de la autenticación de clave de acceso en una aplicación Angular usando TypeScript. Las claves de acceso brindan una forma segura y escalable de administrar la autenticación de usuarios, eliminando la necesidad de contraseñas tradicionales.

Vea el tutorial completo en nuestra publicación de blog original aquí

Requisitos previos

Antes de comenzar, asegúrese de estar familiarizado con Angular, HTML, CSS y TypeScript. Además, asegúrese de tener Node.js y NPM instalados en su máquina. Se recomienda instalar Angular CLI para este tutorial:

npm install -g @angular/cli

Configurando el proyecto angular

Primero, creemos un nuevo proyecto Angular. En este ejemplo, utilizamos la versión 15.2.9 de Angular:

ng new passkeys-demo-angular

Durante la configuración, elige las siguientes opciones:

• Compartir datos de uso seudónimos: No
• Enrutamiento angular: Sí
• Formato de hoja de estilo: CSS
• Habilitar SSR: No (elija Sí si su aplicación requiere renderizado del lado del servidor)

Una vez completada la configuración, ejecuta la aplicación para asegurarte de que todo esté funcionando:

ng serve

Integración de Corbado para la autenticación de clave de acceso

1. Configure su cuenta Corbado

Para comenzar, crea una cuenta en el panel de desarrollador de Corbado. Este paso le permite experimentar el registro con clave de acceso de primera mano. Después de registrarse, cree un proyecto dentro de Corbado seleccionando “Corbado Complete” como su producto. Especifique "Aplicación web" como tipo de aplicación y, para el marco, seleccione Angular. En la configuración de tu aplicación, utiliza los siguientes detalles:

• URL de la aplicación: http://localhost:4200
• ID de usuario de confianza: localhost

2. Incrustar el componente de interfaz de usuario de Corbado

A continuación, deberá instalar los paquetes necesarios para la integración de Corbado. Navegue hasta el directorio raíz de su proyecto e instale los paquetes necesarios:

npm i @corbado/web-js
npm i -D @corbado/types @types/react @types/ua-parser-js

Modifique app.component.ts para inicializar Corbado cuando se inicie la aplicación:

import { Component, OnInit } from '@angular/core';
import Corbado from "@corbado/web-js";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'passkeys-demo-angular';
    isInitialized = false;

    constructor() {
    }

    ngOnInit(): void {
        this.initialize();
    }

    async initialize() {
        try {
            await Corbado.load({
                projectId: "",
                darkMode: 'off'
            });
            this.isInitialized = true;
        } catch (error) {
            console.error('Initialization failed:', error);
        }
    }
}

3. Creación de componentes de inicio de sesión y perfil

Genere dos componentes: uno para mostrar la interfaz de usuario de inicio de sesión con clave de acceso y otro para mostrar información básica del usuario tras una autenticación exitosa:

ng generate component login
ng generate component profile

Actualice su app-routing.module.ts para definir rutas para los componentes de inicio de sesión y perfil:

// src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { ProfileComponent } from "./profile/profile.component";
import { RouterModule, Routes } from "@angular/router";
import { LoginComponent } from "./login/login.component";

const routes: Routes = [
    { path: 'profile', component: ProfileComponent },
    { path: 'login', component: LoginComponent },
    { path: '', component: LoginComponent },
    { path: '**', redirectTo: '/' }
]

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

En login.component.ts, configure la interfaz de usuario de autenticación de clave de acceso y defina el comportamiento después de un inicio de sesión exitoso:

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import Corbado from "@corbado/web-js";

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, AfterViewInit {
    @ViewChild('authElement', { static: false }) authElement!: ElementRef;  // Access the element

    constructor(private router: Router) {
    }

    ngOnInit() {
        if (Corbado.user) {
            this.router.navigate(['/profile']);
        }
    }

    ngAfterViewInit() {
        // Mount the Corbado auth UI after the view initializes
        Corbado.mountAuthUI(this.authElement.nativeElement, {
            onLoggedIn: () => this.router.navigate(['/profile']), // Use Angular's router instead of window.location
        });
    }
}

Y en login.component.html, agregue lo siguiente:

4. Configurar la página de perfil

La página de perfil mostrará información básica del usuario (ID de usuario y correo electrónico) y proporcionará un botón para cerrar sesión. Si el usuario no ha iniciado sesión, la página le pedirá que regrese a la página de inicio:

import { Component } from '@angular/core';
import { Router } from "@angular/router";
import Corbado from "@corbado/web-js";

@Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html',
    styleUrls: ['./profile.component.css']
})
export class ProfileComponent {
    user = Corbado.user

    constructor(private router: Router) {
    }

    async handleLogout() {
        await Corbado.logout()
        await this.router.navigate(['/']);
    }
}

En perfil.component.html, renderiza condicionalmente la información del usuario según su estado de autenticación:

    

            
Profile Page
            

                

                    User-ID: {{user.sub}}
                    

                    Email: {{user.email}}
                
            
            Logout
        
    

            
You're not logged in.
            
Please go back to home to log in.
        
    

Ejecutando la aplicación

Una vez que todo esté configurado, ejecuta la aplicación:

ng serve

Visite http://localhost:4200 para ver la pantalla de inicio de sesión y, después de una autenticación exitosa, será redirigido a la página de perfil.

Conclusión

Este tutorial demostró cómo integrar la autenticación de clave de acceso en una aplicación Angular usando Corbado. Con las herramientas de Corbado, implementar la autenticación sin contraseña es sencillo y seguro. Para obtener más detalles sobre la gestión de sesiones y otras funciones avanzadas, consulte la documentación de Corbado o consulte la publicación detallada del blog.