Реализация аутентификации по паролю в Angular с помощью TypeScript

В этом руководстве мы рассмотрим процесс интеграции аутентификации по ключу доступа в приложение Angular с использованием TypeScript. Ключи доступа обеспечивают безопасный и масштабируемый способ управления аутентификацией пользователей, устраняя необходимость в традиционных паролях.

Полное руководство можно посмотреть в исходной записи нашего блога здесь

Предварительные условия

Перед началом убедитесь, что вы знакомы с Angular, HTML, CSS и TypeScript. Кроме того, убедитесь, что на вашем компьютере установлены Node.js и NPM. Для этого руководства рекомендуется установить Angular CLI:

npm install -g @angular/cli

Настройка проекта Angular

Сначала давайте создадим новый проект Angular. В этом примере мы используем Angular версии 15.2.9:

ng new passkeys-demo-angular

Во время настройки выберите следующие параметры:

• Поделиться данными об использовании под псевдонимом: Нет
• Угловая маршрутизация: Да
• Формат таблицы стилей: CSS
• Включить SSR: Нет (выберите «Да», если ваше приложение требует рендеринга на стороне сервера)

После завершения настройки запустите приложение, чтобы убедиться, что все работает:

ng serve

Интеграция Corbado для аутентификации по паролю

1. Настройте свою учетную запись Corbado

Для начала создайте учетную запись на панели разработчика Corbado. Этот шаг позволит вам лично испытать регистрацию с использованием пароля. После регистрации создайте проект в Corbado, выбрав «Corbado Complete» в качестве продукта. В качестве типа приложения укажите «Веб-приложение», а в качестве платформы выберите Angular. В настройках вашего приложения используйте следующие данные:

• URL-адрес приложения: http://localhost:4200
• Идентификатор проверяющей стороны: localhost

2. Встраивание компонента пользовательского интерфейса Corbado

Далее вам необходимо установить необходимые пакеты для интеграции с Corbado. Перейдите в корневой каталог вашего проекта и установите необходимые пакеты:

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

Измените файл app.comComponent.ts, чтобы Corbado инициализировался при запуске приложения:

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. Создание компонентов входа и профиля

Сгенерируйте два компонента: один для отображения пользовательского интерфейса входа в систему с ключом доступа, а другой для отображения основной информации о пользователе после успешной аутентификации:

ng generate component login
ng generate component profile

Обновите файл app-routing.module.ts, чтобы определить маршруты для компонентов входа и профиля:

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

В файле login.comComponent.ts настройте пользовательский интерфейс аутентификации по ключу доступа и определите поведение после успешного входа в систему:

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

И в файле login.comComponent.html добавьте следующее:

4. Настройка страницы профиля

На странице профиля будет отображаться основная информация о пользователе (идентификатор пользователя и адрес электронной почты), а также кнопка выхода из системы. Если пользователь не вошел в систему, страница предложит ему вернуться на домашнюю страницу:

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(['/']);
    }
}

В файле Profile.comComponent.html условно визуализируйте информацию о пользователе в зависимости от его состояния аутентификации:

    

            
Profile Page
            

                

                    User-ID: {{user.sub}}
                    

                    Email: {{user.email}}
                
            
            Logout
        
    

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

Запуск приложения

После того как все настроено, запустите приложение:

ng serve

Посетите http://localhost:4200, чтобы просмотреть экран входа в систему, и после успешной аутентификации вы будете перенаправлены на страницу профиля.

Заключение

В этом руководстве показано, как интегрировать аутентификацию по ключу доступа в приложение Angular с помощью Corbado. С помощью инструментов Corbado реализация аутентификации без пароля становится простой и безопасной. Более подробную информацию об управлении сеансами и других расширенных функциях можно найти в документации Corbado или в подробном сообщении в блоге.