教程：如何将密钥集成到 Nuxt.js 中

介绍

在本教程中，我们将指导您完成将密钥身份验证集成到 Nuxt.js 应用程序中的过程。我们将涵盖从设置 Nuxt.js 项目到实现 Corbado UI 组件以实现无缝密钥登录体验的所有内容。

如果您想直接跳到代码中，可以在我们的 GitHub 存储库中找到完整的示例。

在此处阅读完整的博客文章

先决条件

在深入实施之前，请确保您对 Nuxt.js、HTML、CSS 和 JavaScript 有基本了解。此外，您需要在开发计算机上安装 Node.js 和 NPM。

项目结构

以下是我们 Nuxt.js 项目结构的快速概述：

.
├── .env
├── package.json
├── nuxt.config.ts
├── pages
|   ├── index.vue 
|   └── profile.vue
└── layouts 
    └── default.vue

此结构将作为实现密钥身份验证的基础。

设置 Nuxt.js 项目

首先，让我们初始化一个新的 Nuxt.js 项目

npx nuxi@latest init passkeys-demo-nuxtjs
cd passkeys-demo-nuxtjs
npm install
npm run dev

这将在 http://localhost:3000 上启动您的应用程序。

实施 Corbado 的密钥身份验证

设置您的 Corbado 帐户

首先，通过他们的开发者面板注册 Corbado 帐户。在设置过程中，选择“Corbado Complete”作为您的产品，并指定“Nuxt.js”作为您的框架。根据您本地的开发环境配置您的应用程序 URL 和依赖方 ID。
使用您的项目 ID 更新您的 .env 文件，您可以从 Corbado 开发者面板检索该文件：

VITE_CORBADO_PROJECT_ID=<your-project-id>
</your-project-id>

嵌入 Corbado UI 组件

安装 Corbado web-js 库：

npm i @corbado/web-js
npm i -D @corbado/types

接下来，在 /layouts/default.vue 中设置布局以初始化您的 Corbado 项目：

<script setup lang="ts">
  import Corbado from "@corbado/web-js"
  import { onMounted } from "vue";const isInitialized = useState('isInitialized', () => false);
  const projectId = import.meta.env.VITE_CORBADO_PROJECT_ID;
  onMounted(async () => {
    await Corbado.load({
      projectId: projectId,
      darkMode: "off"
    });
    isInitialized.value = true;
  });
</script>
<template>
  <div v-if="isInitialized">
    <slot></slot>
  </div>
</template>

此设置可确保 Corbado 项目在渲染任何组件之前初始化。

创建登录页面

现在，让我们在 /pages/index.vue 中创建登录页面：

<script setup lang="ts">
  import Corbado from "@corbado/web-js"
  import { onMounted } from "vue";const authElement = useState<HTMLDivElement | undefined>('authElement', () => undefined);
  onMounted(() => {
    if (authElement.value) {
      Corbado.mountAuthUI(authElement.value, {
        onLoggedIn: () => {
          navigateTo("/profile");
        },
      });
    }
  });
</script>
<template>
  <div ref="authElement"></div>
</template>

此代码片段设置身份验证 UI 并在成功登录后处理重定向。

设置个人资料页面

登录后，用户将被重定向到个人资料页面，我们将在 /pages/profile.vue 中创建该页面：

<script setup lang="ts">
  import Corbado from "@corbado/web-js"const user = Corbado.user;
  async function handleLogout() {
    await Corbado.logout();
    await navigateTo("/");
  }
</script>
<template>
  <div>
    <div v-if="user">
      <h1 id="Profile-Page">Profile Page</h1>
      <p>
        User-ID: {{ user.sub }}
        <br>
        Email: {{ user.email }}
      </p>
      <button>Logout</button>
    </div>
    <div v-else>
      <p>You're not logged in.</p>
      <p>
        Please go back to <nuxtlink href="/">home</nuxtlink> to log in.
      </p>
    </div>
  </div>
</template>

此页面显示身份验证成功后的用户信息，并包含注销按钮。
使用以下命令运行应用程序：

npm run dev

结论

在本指南中，我们演示了如何使用 Corbado 的 UI 组件在 Nuxt.js 应用程序中实现基于密码的身份验证。通过此设置，您可以在 Web 应用程序中提供安全且用户友好的登录体验。有关会话管理和其他功能的更多详细信息，请参阅 Corbado 文档或完整博客文章。
通过执行以下步骤，您可以通过现代的无密码身份验证来增强 Nuxt.js 应用程序的安全性。

以上是教程：如何将密钥集成到 Nuxt.js 中的详细内容。更多信息请关注PHP中文网其他相关文章！