パスキーを Svelte に統合する方法

このチュートリアルでは、Svelte アプリにパスキーベースの認証を実装するプロセスを順を追って説明します。 Corbado のパスキー UI コンポーネントを統合して、シームレスで安全なログイン エクスペリエンスを実現する方法を学びます。このガイドは、Svelte、JavaScript、HTML、CSS に関する基本的な知識があることを前提としています。

コードに従う準備ができている場合は、完全な例が GitHub リポジトリで入手できます。

オリジナルの完全なチュートリアルをここで読んでください

前提条件

始める前に、マシンに Node.js と NPM がインストールされていることを確認してください。さらに、Svelte と TypeScript の基本的な知識は、このチュートリアルを進めるのに役立ちます。

プロジェクト構造の概要

この例のプロジェクト構造は次のようになります:

.
├── .env
├── package.json
└── src
    ├── app.html
    └── routes
        ├── +layout.svelte
        ├── +layout.server.ts
        ├── +page.svelte
        └── profile
            └── +page.svelte

パスキーを実装するために必要なファイルのみに焦点を当てます。追加ファイルについては、完全な GitHub リポジトリを自由に参照してください。

新しい Svelte プロジェクトのセットアップ

まず、次のコマンドを実行して新しい Svelte プロジェクトを初期化します。

npm create svelte@latest example-passkeys-svelte
cd example-passkeys-svelte

セットアップ中に、次のオプションを選択します:

• アプリテンプレート: スケルトンプロジェクト
• 型チェック: TypeScript を使用します
• 追加オプション: コード品質チェック用に ESLint と Prettier を含める セットアップが完了したら、必要な依存関係をインストールします。

npm install @corbado/web-js

TypeScript を使用している場合は、開発を強化するために Corbado タイプをインストールすることもできます。

npm install -D @corbado/types

Corbado アカウントとプロジェクトのセットアップ

Corvado 開発者パネルにアクセスし、新しいアカウントを作成します。プロジェクト セットアップ ウィザードで、まずプロジェクトの適切な名前を選択します。製品の選択では、「Corvado Complete」を選択してください。次に、テクノロジー スタックを指定し、「DEV」と「Corvado セッション管理」オプションを選択します。その後、さらに基本的なセットアップのガイダンスが表示されます。

アプリケーション設定で、アプリケーション URL と証明書利用者 ID を次のように定義します。

• アプリケーションURL: http://localhost:5173
• レイリング パーティー ID: localhost 最後に、開発者パネルからプロジェクト ID を取得し、環境ファイルに保存します。 Corbado API アクセスの下にあります。

環境ファイルは次のようになります:

VITE_CORBADO_PROJECT_ID=<your-project-id>

</your-project-id>

後で Corbado UI コンポーネントを Svelte アプリに埋め込むために必要になります。

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

次に、パスキー認証用の Corbado UI コンポーネントを Svelte アプリに統合します。まず、Corbado の現在のパッケージ バージョンではサーバーサイド レンダリング (SSR) がサポートされていないため、サーバーサイド レンダリング (SSR) を無効にします。

+layout.server.ts に次の内容を追加します:

export const ssr = false;

+layout.server で、アプリのマウント時に Corbado を初期化します。

<script lang="ts">
    import Corbado from "@corbado/web-js";
    import { onMount } from "svelte";

    const PROJECT_ID = import.meta.env.VITE_CORBADO_PROJECT_ID;
    let isInitialized = false;onMount(async () => {
        await Corbado.load({
            projectId: PROJECT_ID,
            darkMode: 'off'
        });
        isInitialized = true;
    });
</script>
<div>
    {#if isInitialized}
        <slot></slot>
    {/if}
</div>

このコードにより、プロジェクトで Corbado が初期化された後にのみ UI が読み込まれることが保証されます。

認証 UI のセットアップ

次に、+page.svelte ファイルにサインアップとログインの機能を追加します。このページはユーザー認証を処理し、ログイン後にプロフィール ページにリダイレクトします

<script lang="ts">
    import Corbado from '@corbado/web-js';
    import { onMount } from 'svelte';let authElement: HTMLDivElement;
    onMount(() => {
        Corbado.mountAuthUI(authElement, {
            onLoggedIn: () => window.location.href = "/profile"
        });
    });
</script>
<div bind:this="{authElement}"></div>

このコードは、ログイン コンポーネントを初期化し、それを authElement div にバインドし、ユーザーのログイン後のリダイレクトを処理します。

プロフィールページ

ログインに成功すると、プロフィール ページに基本的なユーザー情報が表示されます。セッションを終了するためのログアウト ボタンも提供されます。

<script lang="ts">
    import Corbado from "@corbado/web-js";
    import { onMount } from "svelte";let user = undefined;
    onMount(() => {
        user = Corbado.user;
    });
    async function handleLogout() {
        await Corbado.logout();
        window.location.href = "/";
    }
</script>
<div>
    {#if user}
        <h1 id="Profile-Page">Profile Page</h1>
        <p>User-id: {user.sub}</p>
        <p>Name: {user.name}</p>
        <button on:click="{handleLogout}">Logout</button>
    {:else}
        <h1 id="You-aren-t-logged-in">You aren't logged in.</h1>
        <p>Go <a href="/">Home</a></p>
    {/if}
</div>

このページでは、ユーザーが認証されているかどうかを確認し、詳細を表示し、ログアウトするオプションを提供します。

アプリケーションの実行

すべてのセットアップが完了したら、次のコマンドを実行して開発サーバーを起動します。

npm run dev

アプリは http://localhost:5173 からアクセスできます。

結論

このチュートリアルでは、Corbado を使用して Svelte アプリケーションにパスキー認証を実装する方法について説明しました。この統合により、安全なパスワードなしのログインが可能になり、ユーザー エクスペリエンスとセキュリティの両方が向上します。 Corbado のセッション管理を使用すると、ユーザー データを簡単に取得し、アプリケーション全体でセッションを管理できます。

サーバー側でのユーザー データの取得など、より高度な実装については、Corbado のドキュメントを参照してください。

以上がパスキーを Svelte に統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。