如何將密鑰整合到 Svelte 中-js教程-PHP中文網

如何將密鑰整合到 Svelte 中

WBOY

發布： 2024-09-10 11:06:00

原創

991 人瀏覽過

在本教程中，我們將逐步介紹在 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 帳戶和項目

存取 Corbado 開發者面板並建立新帳戶。在專案設定精靈中，首先為您的專案選擇適當的名稱。對於產品選擇，請選擇“Corbado Complete”。隨後，指定您的技術堆疊並選擇“DEV”以及“Corbado 會話管理”選項。之後，您將獲得更多基礎設定指導。

在應用程式設定中，定義您的應用程式 URL 和依賴方 ID，如下所示：

應用程式網址：http://localhost:5173
Reyling 派對 ID：本地主機最後，從開發人員面板檢索您的專案 ID 並將其儲存在您的環境文件中。您可以在 Corbado API 存取下找到它。

您的環境文件應如下所示：

VITE_CORBADO_PROJECT_ID=<your-project-id>

登入後複製

稍後您將需要它來將 Corbado UI 元件嵌入到您的 Svelte 應用程式中。

嵌入 Corbado 的 Passkey UI 元件

接下來，我們將把用於金鑰驗證的 Corbado UI 元件整合到我們的 Svelte 應用程式中。首先，停用伺服器端渲染（SSR），因為 Corbado 目前的軟體包版本不支援它。

在 +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>

登入後複製

此頁面檢查使用者是否已通過身份驗證，顯示其詳細信息，並提供登出選項。