ホームページ ウェブフロントエンド jsチュートリアル パスキーを Svelte に統合する方法

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

Sep 10, 2024 am 11:06 AM

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

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

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

前提条件

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

How To Integrate Passkeys into Svelte

プロジェクト構造の概要

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

.
├── .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 からアクセスできます。

How To Integrate Passkeys into Svelte

結論

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

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

10 jQuery構文蛍光物 10 jQuery構文蛍光物 Mar 02, 2025 am 12:32 AM

10 jQuery構文蛍光物

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

' this' JavaScriptで?

10 JavaScript&JQuery MVCチュートリアル 10 JavaScript&JQuery MVCチュートリアル Mar 02, 2025 am 01:16 AM

10 JavaScript&JQuery MVCチュートリアル

See all articles