如何將密鑰整合到 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 帳戶和項目

存取 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>

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

運行應用程式

一切設定完畢後，執行下列指令啟動開發伺服器：

npm run dev

該應用程式可透過 http://localhost:5173 存取。

結論

在本教學中，我們介紹如何使用 Corbado 在 Svelte 應用程式中實作金鑰驗證。這種整合允許安全、無密碼登錄，從而提高用戶體驗和安全性。透過使用 Corbado 的會話管理，我們可以輕鬆檢索使用者資料並管理應用程式中的會話。

有關更高級的實現，例如在伺服器端檢索使用者數據，請參閱 Corbado 文件。

以上是如何將密鑰整合到 Svelte 中的詳細內容。更多資訊請關注PHP中文網其他相關文章！