首页 > web前端 > js教程 > 正文

如何将密钥集成到 Svelte 中

WBOY
发布: 2024-09-10 11:06:00
原创
991 人浏览过

在本教程中,我们将逐步介绍在 Svelte 应用程序中实现基于密码的身份验证的过程。您将学习如何集成 Corbado 的密钥 UI 组件以获得无缝且安全的登录体验。本指南假设您基本熟悉 Svelte、JavaScript、HTML 和 CSS。

如果您准备好按照代码进行操作,可以在 GitHub 存储库中找到完整的示例。

在这里阅读原始的完整教程

先决条件

开始之前,请确保您的计算机上安装了 Node.js 和 NPM。此外,Svelte 的基础知识以及 TypeScript 将有助于学习本教程。

How To Integrate Passkeys into Svelte

项目结构概览

此示例的项目结构如下所示:

.
├── .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 访问。

How To Integrate Passkeys into Svelte

结论

在本教程中,我们介绍了如何使用 Corbado 在 Svelte 应用程序中实现密钥身份验证。这种集成允许安全、无密码登录,从而提高用户体验和安全性。通过使用 Corbado 的会话管理,我们可以轻松检索用户数据并管理应用程序中的会话。

有关更高级的实现,例如在服务器端检索用户数据,请参阅 Corbado 文档。

以上是如何将密钥集成到 Svelte 中的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!