如何将密钥集成到 SvelteKit 中

如何将密钥集成到 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 中的详细内容,更多请关注www.sxiaw.com其它相关文章!