パスキーを Svelte に統合する方法
Sep 10, 2024 am 11:06 AMこのチュートリアルでは、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>
後で 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>Profile Page</h1> <p>User-id: {user.sub}</p> <p>Name: {user.name}</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
アプリは http://localhost:5173 からアクセスできます。
結論
このチュートリアルでは、Corbado を使用して Svelte アプリケーションにパスキー認証を実装する方法について説明しました。この統合により、安全なパスワードなしのログインが可能になり、ユーザー エクスペリエンスとセキュリティの両方が向上します。 Corbado のセッション管理を使用すると、ユーザー データを簡単に取得し、アプリケーション全体でセッションを管理できます。
サーバー側でのユーザー データの取得など、より高度な実装については、Corbado のドキュメントを参照してください。
以上がパスキーを Svelte に統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









