Nuxt Auth Utils 使用教程

Nuxt Auth Utils 使用教程

nuxt-auth-utils Add Authentication to Nuxt applications with secured & sealed cookies sessions. nuxt-auth-utils 项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-auth-utils

1. 项目介绍

Nuxt Auth Utils 是一个为 Nuxt 应用程序提供认证功能的工具库。它支持多种认证方式,包括 OAuth、密码哈希和 WebAuthn 等。此工具库使得在 Nuxt 应用中添加认证功能变得简单快捷。它具有以下特点:

  • 支持服务端渲染(SSR)、客户端渲染(CSR)、静态网站生成(SSG)等多种渲染方式。
  • 内置 30+ OAuth 提供商支持。
  • 支持密码哈希。
  • 支持 WebAuthn(passkey)认证。
  • 提供了 Vue 可组合函数 useUserSession,方便在 Vue 组件中访问用户会话。
  • 提供了服务端工具,用于管理用户会话。
  • 支持WebSocket。

2. 项目快速启动

以下是快速启动 Nuxt Auth Utils 的步骤:

  1. 在 Nuxt 项目中安装 Nuxt Auth Utils 模块:
npx nuxi@latest module add auth-utils
  1. 在项目根目录下的 .env 文件中添加环境变量 NUXT_SESSION_PASSWORD,该密码至少包含 32 个字符:
NUXT_SESSION_PASSWORD=password-with-at-least-32-characters

如果是在开发环境中首次运行 Nuxt 而没有设置该环境变量,Nuxt Auth Utils 会自动生成一个密码。

  1. 使用 Vue 可组合函数 useUserSession 在 Vue 组件中访问用户会话:
<template>
  <div v-if="loggedIn">
    <h1>Welcome {{ user.login }}!</h1>
    <p>Logged in since {{ session.loggedInAt }}</p>
    <button @click="clear">Logout</button>
  </div>
  <div v-else>
    <h1>Not logged in</h1>
    <a href="/auth/github">Login with GitHub</a>
    <!-- 或者在一个弹出窗口中打开 OAuth 路由 -->
    <button @click="openInPopup('/auth/github')">Login with GitHub</button>
  </div>
</template>

<script setup>
const { loggedIn, user, session, fetch, clear, openInPopup } = useUserSession()
</script>
  1. 配置 OAuth 提供商,例如 GitHub,在 nuxt.config.ts 中设置相应的 runtimeConfig
export default defineNuxtConfig({
  runtimeConfig: {
    oauth: {
      github: {
        clientId: 'YOUR_GITHUB_CLIENT_ID',
        clientSecret: 'YOUR_GITHUB_CLIENT_SECRET'
      }
    }
  }
})

确保在 OAuth 应用的设置中将回调 URL 设置为 <your-domain>/auth/github

3. 应用案例和最佳实践

应用案例

  • 用户认证:使用 Nuxt Auth Utils 实现用户登录、登出和会话管理。
  • 第三方认证:集成 OAuth 提供商,如 GitHub、Google 等,允许用户使用第三方账号登录。

最佳实践

  • 安全配置:确保 NUXT_SESSION_PASSWORD 环境变量的值安全且唯一。
  • 数据存储:由于会话数据存储在 Cookie 中,应避免存储敏感信息,并注意 Cookie 的大小限制。

4. 典型生态项目

  • Nuxt.js:Nuxt Auth Utils 专为 Nuxt.js 设计,可以与 Nuxt.js 项目无缝集成。
  • UnJS:Nuxt Auth Utils 依赖于 UnJS 的一些库,如 defu 用于合并对象。

以上是 Nuxt Auth Utils 的基本使用教程,希望对你有所帮助!

nuxt-auth-utils Add Authentication to Nuxt applications with secured & sealed cookies sessions. nuxt-auth-utils 项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-auth-utils

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高喻尤King

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值