# ✅ 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：使用部署脚本（推荐） ```bash cd /Users/lanmu/Desktop/xiaso bash deploy-auth.sh ``` 脚本会自动： 1. 配置服务器环境变量 2. 上传所有认证相关文件 3. 重新构建 Docker 容器 4. 启动服务 ### 方式2：手动部署 #### 步骤1：上传环境变量 ```bash 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：上传文件 ```bash # 从本地执行 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：重新构建 ```bash ssh root@45.249.208.118 cd /opt/flnxi-website docker-compose down docker-compose up -d --build ``` --- ## 🧪 测试步骤 ### 1. 访问网站 打开浏览器访问：https://scs.flnxi.com ### 2. 测试登录功能 #### 桌面端： 1. 点击右上角【登录】按钮 2. 进入登录页面 3. 输入账户信息： - 邮箱：`admin@flnxi.com` - 密码：`123456` 4. 点击【登录】按钮 5. 成功后会跳转到首页 6. 右上角显示用户名和退出按钮 #### 移动端： 1. 点击右上角菜单图标 2. 在底部看到【登录】按钮 3. 点击进入登录页面 4. 输入账户信息并登录 5. 返回后菜单中显示用户信息 ### 3. 测试退出功能 1. 点击右上角的退出图标（LogOut） 2. 自动退出并刷新页面 3. 重新显示登录按钮 --- ## 🎨 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`： ```typescript async authorize(credentials): Promise { // 替换为您的数据库查询 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 凭据 1. 访问 [Google Cloud Console](https://console.cloud.google.com/) 2. 创建项目 3. 启用 Google+ API 4. 创建 OAuth 2.0 凭据 5. 授权重定向 URI：`https://scs.flnxi.com/api/auth/callback/google` #### 更新配置 在 `.env.local` 中添加： ```env GOOGLE_CLIENT_ID=your-google-client-id GOOGLE_CLIENT_SECRET=your-google-client-secret ``` 在 `route.ts` 中添加： ```typescript 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 # ✅ 本文档 ``` --- ## ⚠️ 注意事项 ### 生产环境 1. **修改演示账户**: 当前账户是硬编码的，生产环境必须连接真实数据库 2. **密码加密**: 使用 bcrypt 或 argon2 加密密码 3. **环境变量安全**: 确保 `.env.local` 不被提交到 Git 4. **HTTPS**: NextAuth 要求生产环境使用 HTTPS 5. **密钥安全**: 不要泄露 `NEXTAUTH_SECRET` ### Docker 部署 确保 `docker-compose.yml` 包含环境变量： ```yaml services: web: environment: - NEXTAUTH_SECRET=${NEXTAUTH_SECRET} - NEXTAUTH_URL=${NEXTAUTH_URL} env_file: - .env.local ``` --- ## 🐛 故障排查 ### 问题1：登录后没反应 **原因**: Cookie 没有正确设置 **解决**: - 检查 `NEXTAUTH_URL` 是否正确 - 确保使用 HTTPS - 清除浏览器 Cookie ### 问题2：显示"配置错误" **原因**: `NEXTAUTH_SECRET` 未设置 **解决**: ```bash # 检查环境变量 cat .env.local # 重新生成密钥 openssl rand -base64 32 ``` ### 问题3：无法访问登录页面 **原因**: 文件上传不完整 **解决**: ```bash # 检查文件是否存在 ls -la app/auth/signin/page.tsx # 重新上传 scp app/auth/signin/page.tsx root@45.249.208.118:/opt/flnxi-website/app/auth/signin/ ``` --- ## 📚 相关文档 - [NextAuth.js 官方文档](https://next-auth.js.org/) - [AUTH_INTEGRATION_GUIDE.md](./AUTH_INTEGRATION_GUIDE.md) - 详细集成指南 - [Next.js 文档](https://nextjs.org/docs) --- ## ✅ 集成状态 | 功能 | 状态 | 说明 | |------|------|------| | 依赖安装 | ✅ | next-auth 已安装 | | 环境配置 | ✅ | .env.local 已创建 | | API 路由 | ✅ | [...nextauth] 已配置 | | 登录页面 | ✅ | 精美UI设计完成 | | Header 集成 | ✅ | 桌面+移动端完成 | | 会话管理 | ✅ | JWT + Cookie | | 演示账户 | ✅ | 2个测试账户 | | 部署脚本 | ✅ | deploy-auth.sh | | 文档 | ✅ | 完整文档齐全 | --- ## 🎯 下一步建议 1. **立即测试**: 运行 `bash deploy-auth.sh` 部署到服务器 2. **连接数据库**: 替换硬编码账户为真实数据库 3. **添加注册**: 创建用户注册页面 4. **第三方登录**: 配置 Google/GitHub OAuth 5. **忘记密码**: 添加密码重置功能 6. **邮箱验证**: 添加邮箱验证流程 --- **集成完成时间**: 2025-10-26 **集成时长**: 约40分钟 **技术栈**: Next.js 14 + NextAuth.js v5 + TypeScript 🎉 **恭喜！认证系统集成完成！**