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 アカウントをセットアップする

まず、Corvado 開発者パネルでアカウントを作成します。このステップでは、パスキーのサインアップを直接体験できます。登録後、製品として「Corvado Complete」を選択して Corbado 内にプロジェクトを作成します。アプリケーションの種類として「Web アプリ」を指定し、フレームワークとして Angular を選択します。アプリケーション設定で、次の詳細を使用します:

• アプリケーションURL: http://localhost:4200
• 証明書利用者 ID: localhost

2. Corbado UI コンポーネントの埋め込み

次に、Corvado 統合に必要なパッケージをインストールする必要があります。プロジェクトのルート ディレクトリに移動し、必要なパッケージをインストールします:

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

アプリケーションの起動時に Corbado を初期化するように app.component.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. ログインおよびプロファイルコンポーネントの作成

2 つのコンポーネントを生成します。1 つはパスキー ログイン UI を表示するためのもので、もう 1 つは認証成功時に基本的なユーザー情報を表示するためのものです。

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.component.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.component.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.component.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 のドキュメントを参照するか、詳細なブログ投稿を確認してください。