在本教程中，我们将引导您构建一个包含密钥身份验证的示例 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-sveltecd example-passkeys-sveltenpm install
在设置过程中，您可以选择以下选项：
应用程序模板： 骨架项目类型检查：我们正在使用 typescript，但请根据您的喜好随意选择。其他选项：我们建议使用 eslint 和 prettier 来提高代码质量和格式。
接下来，安装corbado的web-js和node-sdk包：
npm i @corbado/web-js @corbado/node-sdknpm 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-idcorbado_api_secret=your-corbado-api-secret
第 2 步：嵌入 passkey ui 组件
首先，禁用服务器端渲染（ssr），因为 corbado 的 web-js 包当前不支持它。创建一个包含以下内容的 +layout.server.ts 文件：
export const ssr = false;
然后，通过在外部布局组件中初始化 corbado 密钥 ui 组件来将其嵌入到前端中。这确保了应用程序的其余部分仅在 corbado 初始化后才会呈现。
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; }); {#if isinitialized} {/if}
第三步：修改主页
在 src/routes/+page.svelte 中，集成注册和登录 ui 组件。通过身份验证后，将用户重定向到 /profile 页面。
import corbado from '@corbado/web-js'; import { onmount } from 'svelte';let authelement; onmount(() => { corbado.mountauthui(authelement, { onloggedin: () => window.location.href = "/profile", }); });
第 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，并提供一个注销按钮。如果用户未登录，我们将显示返回主页的链接。
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("/") } {#if (data.user)} profile page
user-id: {data.user.userid}
name: {data.user.email}
{:else} you aren't logged in.
go home
{/if}
运行应用程序
一切设置完毕后，运行您的应用程序：
npm run dev
您的带有密钥身份验证的 sveltekit 应用程序现已上线。登录后，用户将被重定向到显示其 id 和电子邮件的个人资料页面。
结论
在本指南中，我们展示了如何将 corbado 的密钥身份验证集成到 sveltekit 应用程序中。这种方法使用 corbado 易于实现的 ui 组件提供安全、无密码的体验。您现在可以对此进行扩展并探索更高级的功能，例如会话管理或多设备支持。
以上就是如何将密钥集成到 SvelteKit 中的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491360.html
微信扫一扫 
支付宝扫一扫 
