TypeScript를 사용하여 Angular에서 패스키 인증 구현

이 가이드에서는 TypeScript를 사용하여 패스키 인증을 Angular 애플리케이션에 통합하는 과정을 안내합니다. 암호키는 사용자 인증을 관리하는 안전하고 확장 가능한 방법을 제공하므로 기존 암호가 필요하지 않습니다.

여기에서 원본 블로그 게시물의 전체 튜토리얼 보기

전제 조건

시작하기 전에 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 Complete”를 선택하여 Corbado 내에서 프로젝트를 생성합니다. 애플리케이션 유형을 "웹 앱"으로 지정하고, 프레임워크는 Angular를 선택합니다. 애플리케이션 설정에서 다음 세부정보를 사용하세요.

• 애플리케이션 URL: http://localhost:4200
• 신뢰당사자 ID: localhost

2. Corbado UI 구성요소 삽입

다음으로 Corbado 통합에 필요한 패키지를 설치해야 합니다. 프로젝트의 루트 디렉터리로 이동하여 필요한 패키지를 설치합니다:

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

애플리케이션이 시작될 때 Corbado를 초기화하도록 app.comComponent.ts를 수정합니다.

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. 로그인 및 프로필 구성 요소 생성

두 개의 구성 요소를 생성합니다. 하나는 암호 키 로그인 UI를 표시하기 위한 것이고 다른 하나는 성공적인 인증 시 기본 사용자 정보를 표시하기 위한 것입니다.

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에서 암호 키 인증 UI를 설정하고 로그인 성공 후 동작을 정의합니다.

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. 프로필 페이지 설정

프로필 페이지에는 기본 사용자 정보(사용자 ID 및 이메일)가 표시되고 로그아웃 버튼이 제공됩니다. 사용자가 로그인하지 않은 경우 홈 페이지로 돌아가라는 메시지가 페이지에 표시됩니다.

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에 접속하시면 로그인 화면을 보실 수 있으며, 인증 성공 후 프로필 페이지로 이동하게 됩니다.

결론

이 튜토리얼에서는 Corbado를 사용하여 패스키 인증을 Angular 애플리케이션에 통합하는 방법을 보여주었습니다. Corbado의 도구를 사용하면 비밀번호 없는 인증을 구현하는 것이 간단하고 안전합니다. 세션 관리 및 기타 고급 기능에 대한 자세한 내용은 Corbado 설명서를 참조하거나 자세한 블로그 게시물을 확인하세요.