在本教程中，我们将引导您构建一个包含密钥身份验证的示例 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
登录后复制
在本地运行项目以验证设置：
默认的 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>
登录后复制
运行应用程序
一切设置完毕后，运行您的应用程序：
您的带有密钥身份验证的 SvelteKit 应用程序现已上线。登录后，用户将被重定向到显示其 ID 和电子邮件的个人资料页面。
结论
在本指南中，我们展示了如何将 Corbado 的密钥身份验证集成到 SvelteKit 应用程序中。这种方法使用 Corbado 易于实现的 UI 组件提供安全、无密码的体验。您现在可以对此进行扩展并探索更高级的功能，例如会话管理或多设备支持。
以上是如何将密钥集成到 SvelteKit 中的详细内容。更多信息请关注PHP中文网其他相关文章！
