Nuxt Auth Utils 安装与配置指南

Nuxt Auth Utils 安装与配置指南

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

1. 项目基础介绍

Nuxt Auth Utils 是一个用于为 Nuxt 应用程序添加认证功能的工具库。它支持使用安全的、密封的 cookies 会话来实现用户认证。项目主要使用 TypeScript 编写，确保了类型安全和良好的开发体验。

2. 关键技术和框架

• Nuxt.js: 项目基于 Nuxt.js 框架，这是一个构建服务端渲染的 Vue.js 应用程序的框架。
• TypeScript: 提供类型检查和编译时优化，增加代码的可维护性和安全性。
• Vue.js: 前端框架，用于构建用户界面。
• OAuth: 支持多种 OAuth 提供商，实现社交账号登录。
• WebAuthn: 支持密码（passkey）认证。

3. 安装和配置准备工作

在开始安装之前，请确保您的环境中已经安装了以下依赖：

• Node.js（LTS 版本推荐）
• npm 或 yarn 包管理器

此外，您应该有一个 Nuxt.js 的项目基础结构。

详细安装步骤

步骤 1: 安装 Nuxt Auth Utils

在您的 Nuxt 项目的根目录下打开终端，运行以下命令来安装 Nuxt Auth Utils 模块：

npm install @atinux/nuxt-auth-utils
# 或者使用 yarn
# yarn add @atinux/nuxt-auth-utils

步骤 2: 配置环境变量

在项目根目录中创建一个 .env 文件，并设置一个环境变量 NUXT_SESSION_PASSWORD，这个密码至少要有 32 个字符长，用于加密会话：

NUXT_SESSION_PASSWORD=password-with-at-least-32-characters

步骤 3: 修改 Nuxt 配置

在 nuxt.config.ts 文件中，引入 Nuxt Auth Utils 模块：

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  modules: [
    '@atinux/nuxt-auth-utils'
  ]
})

步骤 4: 使用 Vue Composable

在你的 Vue 组件中，你可以使用 useUserSession composable 来获取和操作用户会话：

<script setup lang="ts">
import { useUserSession } from '@atinux/nuxt-auth-utils'

const { loggedIn, user, session, fetch, clear, openInPopup } = useUserSession()
</script>

步骤 5: 配置 OAuth 提供商

在 nuxt.config.ts 中配置 OAuth 提供商的信息：

export default defineNuxtConfig({
  runtimeConfig: {
    oauth: {
      github: {
        clientId: 'YOUR_GITHUB_CLIENT_ID',
        clientSecret: 'YOUR_GITHUB_CLIENT_SECRET'
      }
      // 添加其他 OAuth 提供商配置...
    }
  }
})

确保在 OAuth 提供商的配置页面中设置了正确的回调 URL，通常是 https://<your-domain>/auth/<provider>。

完成以上步骤后，您的项目就应该已经集成了 Nuxt Auth Utils，并且可以开始实现用户认证功能了。

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