Your Name b1eab32c75 初始提交: FLNXI电商素材系统官方网站

- Next.js 项目框架
- 完整的认证系统集成
- 数据库配置和部署脚本
- 产品价格体系和文档
- Docker 部署配置

2025-12-13 21:38:32 +08:00

8.8 KiB

Raw Permalink Blame History

✅ NextAuth.js 认证系统集成完成

🎉 已完成的工作

1. 本地开发环境 ✅

已安装依赖

✅ next-auth@latest - NextAuth.js v5
✅ 16个依赖包已安装

已创建文件

认证配置：

✅ .env.local - 环境变量配置
- NEXTAUTH_SECRET: kvYYTKxn3uR4WIaZIZdRmf+VzHP/WufQM4db5Agw7pQ=
- NEXTAUTH_URL: https://scs.flnxi.com

API 路由：

✅ app/api/auth/[...nextauth]/route.ts - NextAuth API 配置
- 支持邮箱密码登录
- 演示账户已配置
- JWT 会话管理

组件文件：

✅ components/SessionProvider.tsx - 会话提供者
✅ components/Header.tsx - 已更新，添加登录状态显示
- 桌面端：用户信息 + 退出按钮
- 移动端：用户信息 + 退出按钮

页面文件：

✅ app/auth/signin/page.tsx - 精美的登录页面
- 现代化UI设计
- 表单验证
- 错误提示
- 演示账户提示

布局文件：

✅ app/layout.tsx - 已添加 SessionProvider

📝 演示账户

系统内置两个演示账户用于测试：

管理员账户

邮箱: admin@flnxi.com
密码: 123456

测试账户

邮箱: test@flnxi.com
密码: 123456

🚀 部署方法

方式1：使用部署脚本（推荐）

cd /Users/lanmu/Desktop/xiaso
bash deploy-auth.sh

脚本会自动：

配置服务器环境变量
上传所有认证相关文件
重新构建 Docker 容器
启动服务

方式2：手动部署

步骤1：上传环境变量

ssh root@45.249.208.118
cd /opt/flnxi-website

cat > .env.local << 'EOF'
NEXTAUTH_SECRET=kvYYTKxn3uR4WIaZIZdRmf+VzHP/WufQM4db5Agw7pQ=
NEXTAUTH_URL=https://scs.flnxi.com
EOF

步骤2：上传文件

# 从本地执行
cd /Users/lanmu/Desktop/xiaso

# 上传 API 路由
scp -r app/api/auth root@45.249.208.118:/opt/flnxi-website/app/api/

# 上传组件
scp components/SessionProvider.tsx root@45.249.208.118:/opt/flnxi-website/components/
scp components/Header.tsx root@45.249.208.118:/opt/flnxi-website/components/

# 上传登录页面
ssh root@45.249.208.118 "mkdir -p /opt/flnxi-website/app/auth/signin"
scp app/auth/signin/page.tsx root@45.249.208.118:/opt/flnxi-website/app/auth/signin/

# 上传 Layout
scp app/layout.tsx root@45.249.208.118:/opt/flnxi-website/app/
scp package.json root@45.249.208.118:/opt/flnxi-website/

步骤3：重新构建

ssh root@45.249.208.118
cd /opt/flnxi-website
docker-compose down
docker-compose up -d --build

🧪 测试步骤

1. 访问网站

打开浏览器访问：https://scs.flnxi.com

2. 测试登录功能

桌面端：

点击右上角【登录】按钮
进入登录页面
输入账户信息：
- 邮箱：admin@flnxi.com
- 密码：123456
点击【登录】按钮
成功后会跳转到首页
右上角显示用户名和退出按钮

移动端：

点击右上角菜单图标
在底部看到【登录】按钮
点击进入登录页面
输入账户信息并登录
返回后菜单中显示用户信息

3. 测试退出功能

点击右上角的退出图标（LogOut）
自动退出并刷新页面
重新显示登录按钮

🎨 UI 特点

登录页面

✅ 苹果风格设计
✅ 渐变背景
✅ 圆角卡片设计
✅ 平滑动画过渡
✅ 响应式布局
✅ Logo 展示
✅ 错误提示
✅ 演示账户提示卡片

Header 集成

✅ 登录前：显示蓝色边框登录按钮
✅ 登录后：显示用户名 + 退出按钮
✅ 加载状态：骨架屏动画
✅ 桌面和移动端都完美支持

📊 技术实现

认证流程

用户访问 → 未登录 → 显示登录按钮
         ↓
    点击登录按钮
         ↓
    跳转登录页面 (/auth/signin)
         ↓
    输入邮箱密码
         ↓
    提交到 /api/auth/callback/credentials
         ↓
    验证用户信息（当前是演示账户）
         ↓
    生成 JWT Token
         ↓
    保存到 Cookie
         ↓
    跳转回首页
         ↓
    Header 读取 Session
         ↓
    显示用户信息

会话管理

策略: JWT（无需数据库）
有效期: 30天
存储: HTTP-only Cookie
安全: HTTPS Only

🔧 自定义配置

1. 连接真实数据库

修改 app/api/auth/[...nextauth]/route.ts：

async authorize(credentials): Promise<User | null> {
  // 替换为您的数据库查询
  const user = await prisma.user.findUnique({
    where: { email: credentials?.email }
  })
  
  // 验证密码（使用 bcrypt）
  const isValid = await bcrypt.compare(
    credentials?.password, 
    user.password
  )
  
  if (user && isValid) {
    return {
      id: user.id,
      name: user.name,
      email: user.email,
    }
  }
  
  return null
}

2. 添加 Google 登录

获取 OAuth 凭据

访问 Google Cloud Console
创建项目
启用 Google+ API
创建 OAuth 2.0 凭据
授权重定向 URI：https://scs.flnxi.com/api/auth/callback/google

更新配置

在 .env.local 中添加：

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

在 route.ts 中添加：

import GoogleProvider from "next-auth/providers/google"

providers: [
  GoogleProvider({
    clientId: process.env.GOOGLE_CLIENT_ID!,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
  }),
]

3. 添加注册功能

创建 app/auth/signup/page.tsx（类似登录页面）

📁 文件清单

核心文件

xiaso/
├── .env.local                              # ✅ 环境变量
├── app/
│   ├── api/
│   │   └── auth/
│   │       └── [...nextauth]/
│   │           └── route.ts                # ✅ NextAuth 配置
│   ├── auth/
│   │   └── signin/
│   │       └── page.tsx                    # ✅ 登录页面
│   └── layout.tsx                          # ✅ 已更新
├── components/
│   ├── SessionProvider.tsx                 # ✅ 会话提供者
│   └── Header.tsx                          # ✅ 已更新
├── deploy-auth.sh                          # ✅ 部署脚本
├── AUTH_INTEGRATION_GUIDE.md               # ✅ 集成指南
└── AUTH_INTEGRATION_COMPLETE.md            # ✅ 本文档

⚠️ 注意事项

生产环境

修改演示账户: 当前账户是硬编码的，生产环境必须连接真实数据库
密码加密: 使用 bcrypt 或 argon2 加密密码
环境变量安全: 确保 .env.local 不被提交到 Git
HTTPS: NextAuth 要求生产环境使用 HTTPS
密钥安全: 不要泄露 NEXTAUTH_SECRET

Docker 部署

确保 docker-compose.yml 包含环境变量：

services:
  web:
    environment:
      - NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
      - NEXTAUTH_URL=${NEXTAUTH_URL}
    env_file:
      - .env.local

🐛 故障排查

问题1：登录后没反应

原因: Cookie 没有正确设置解决:

检查 NEXTAUTH_URL 是否正确
确保使用 HTTPS
清除浏览器 Cookie

问题2：显示"配置错误"

原因: NEXTAUTH_SECRET 未设置解决:

# 检查环境变量
cat .env.local

# 重新生成密钥
openssl rand -base64 32

问题3：无法访问登录页面

原因: 文件上传不完整解决:

# 检查文件是否存在
ls -la app/auth/signin/page.tsx

# 重新上传
scp app/auth/signin/page.tsx root@45.249.208.118:/opt/flnxi-website/app/auth/signin/

📚 相关文档

✅ 集成状态

功能	状态	说明
依赖安装	✅	next-auth 已安装
环境配置	✅	.env.local 已创建
API 路由	✅	[...nextauth] 已配置
登录页面	✅	精美UI设计完成
Header 集成	✅	桌面+移动端完成
会话管理	✅	JWT + Cookie
演示账户	✅	2个测试账户
部署脚本	✅	deploy-auth.sh
文档	✅	完整文档齐全

🎯 下一步建议

立即测试: 运行 bash deploy-auth.sh 部署到服务器
连接数据库: 替换硬编码账户为真实数据库
添加注册: 创建用户注册页面
第三方登录: 配置 Google/GitHub OAuth
忘记密码: 添加密码重置功能
邮箱验证: 添加邮箱验证流程

集成完成时间: 2025-10-26
集成时长: 约40分钟
技术栈: Next.js 14 + NextAuth.js v5 + TypeScript

🎉 恭喜！认证系统集成完成！

8.8 KiB Raw Permalink Blame History Unescape Escape