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

このチュートリアルでは、パスキー認証を組み込んだサンプル SvelteKit アプリケーションを構築する手順を説明します。 Corbado のパスキー UI コンポーネントをシームレスに統合して、安全なパスワードなしの認証を実現する方法を説明します。その過程で、Corvado Node.js SDK を使用してサーバー上のユーザー データを取得する方法も説明します。

完全なオリジナルのチュートリアルはこちらからご覧ください

前提条件

本題に入る前に、Svelte、JavaScript、HTML、CSS について理解しておく必要があります。さらに、開発マシンに Node.js と NPM がインストールされている必要があります。

パスキーを使用した SvelteKit のプロジェクト構造

基本的な SvelteKit プロジェクト構造をセットアップすることから始めます。コードをコピー

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

これは、これから作業する重要なレイアウトです。他のほとんどのファイルは、このチュートリアルの目的では無視できます。

SvelteKit プロジェクトのセットアップ

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

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

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

• アプリテンプレート: スケルトンプロジェクト
• 型チェック: ここでは TypeScript を使用していますが、好みに応じて自由に選択してください。
• 追加オプション: コードの品質とフォーマットのために ESLint と Prettier をお勧めします。

次に、Corbado の web-js および node-sdk パッケージをインストールします。

npm i @corbado/web-js @corbado/node-sdk
npm i -D @corbado/types

プロジェクトをローカルで実行してセットアップを確認します:

npm run dev

デフォルトの Svelte スケルトン アプリは http://localhost:5173 で入手可能です。

Corbado を使用したパスキーの追加

ステップ 1: Corbado アカウントとプロジェクトをセットアップする

Corvado 開発者パネルにサインアップして、新しいプロジェクトを作成します。製品として「Corvado Complete」を選択し、フレームワークとして「Svelte」を指定します。アプリケーション URL を定義し、証明書利用者 ID を localhost に設定します。この後、プロジェクト ID と API シークレットを取得します。これらは環境変数に保存する必要があります。

プロジェクトの .env ファイルに追加します:

PUBLIC_CORBADO_PROJECT_ID=your-corbado-project-id
CORBADO_API_SECRET=your-corbado-api-secret

ステップ 2: パスキー UI コンポーネントを埋め込む

まず、サーバーサイド レンダリング (SSR) を無効にします。これは、現在 Corbado の web-js パッケージでサポートされていないためです。次の内容を含むlayout.server.tsファイルを作成します:

export const ssr = false;

次に、外部レイアウト コンポーネントで Corbado パスキー UI コンポーネントを初期化して、フロントエンドに埋め込みます。これにより、アプリの残りの部分は Corbado が初期化された後にのみレンダリングされるようになります。

<script lang="ts">
  import Corbado from "@corbado/web-js";
  import { onMount } from "svelte";
  import { PUBLIC_CORBADO_PROJECT_ID } from '$env/static/public';let isInitialized = false;
  onMount(async () => {
    await Corbado.load({
      projectId: PUBLIC_CORBADO_PROJECT_ID,
      darkMode: 'off',
      setShortSessionCookie: true,
    });
    isInitialized = true;
  });
</script>
<div>
  {#if isInitialized}
    <slot></slot>
  {/if}
</div>

ステップ 3: ホームページを変更する

src/routes/page.svelte で、サインアップおよびログイン UI コンポーネントを統合します。認証されたら、ユーザーを /profile ページにリダイレクトします。

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

ステップ 4: プロフィール ページを設定する

/profile ルートの下にプロファイル ページを作成します。ここで、Corvado の Node SDK を使用してユーザー情報を取得して表示します。

page.server.ts で、セッション Cookie を取得し、ユーザー データを返します。

import { SDK, Config } from '@corbado/node-sdk';
import { PUBLIC_CORBADO_PROJECT_ID } from '$env/static/public';
import { CORBADO_API_SECRET } from '$env/static/private';

const config = new Config(PUBLIC_CORBADO_PROJECT_ID, CORBADO_API_SECRET);
const sdk = new SDK(config);
export async function load({ request }) {
  const cookies = parseCookies(request.headers.get('Cookie') || '');
  const cbo_short_session = cookies.cbo_short_session;
  if (!cbo_short_session) return { user: undefined };
  try {
    const user = await sdk.sessions().getCurrentUser(cbo_short_session);
    if (!user.isAuthenticated()) return { user: undefined };
    return { user: { email: user.getEmail(), userID: user.getID() } };
  } catch {
    return { user: undefined };
  }
}
function parseCookies(cookieHeader) {
  return Object.fromEntries(
    cookieHeader.split(';').map(cookie => {
      const [name, ...rest] = cookie.trim().split('=');
      return [name, rest.join('=')];
    })
  );
}

対応するページはローダーのデータにアクセスし、ユーザーの名前とユーザー ID を表示し、ログアウトするボタンを提供します。ユーザーがログインしていない場合は、ホームページへのリンクが表示されます。

<script lang="ts">
    import type { PageData } from './$types';
    import Corbado from '@corbado/web-js';
    import { goto } from '$app/navigation';

    export let data: PageData

    async function handleLogout() {
        await Corbado.logout()
        await goto("/")
    }
</script>

<div>
    {#if (data.user)}
        <h1>
            Profile Page
        </h1>
        <p>
            User-id: {data.user.userID}
        </p>
        <p>
            Name: {data.user.email}
        </p>
        <button on:click={handleLogout}>
            Logout
        </button>
    {:else}
        <h1>
            You aren't logged in.
        </h1>
        <p>Go <a href="/">Home</a></p>
    {/if}
</div>

アプリケーションの実行

すべてのセットアップが完了したら、アプリケーションを実行します。

npm run dev

パスキー認証を備えた SvelteKit アプリが公開されました。ログインすると、ユーザーはプロフィール ページにリダイレクトされ、ID とメールアドレスが表示されます。

結論

このガイドでは、Corbado のパスキー認証を SvelteKit アプリに統合する方法を説明しました。このアプローチでは、実装が簡単な Corbado の UI コンポーネントを使用して、安全でパスワードのないエクスペリエンスを提供します。これを拡張して、セッション管理やマルチデバイスのサポートなどのより高度な機能を探索できるようになりました。

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