如何將金鑰整合到 SvelteKit 中

在本教學中，我們將引導您建立一個包含金鑰驗證的範例 SvelteKit 應用程式。我們將向您展示如何無縫整合 Corbado 的金鑰 UI 元件以實現安全、無密碼的身份驗證。在此過程中，我們還將示範如何使用 Corbado 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 帳戶和項目

在 Corbado 開發者面板上註冊並建立一個新專案。為產品選擇“Corbado Complete”，並指定“Svelte”作為框架。定義您的應用程式 URL 並將依賴方 ID 設為 localhost。之後，檢索您的專案 ID 和 API 金鑰，您需要將其儲存在環境變數中。

將它們新增至專案中的 .env 檔案：

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

第 2 步：嵌入 Passkey 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>

第三步：修改首頁

在 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 路徑下建立個人資料頁面，您將使用 Corbado 的 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中文網其他相關文章！