编辑“︁Next.js 社交登录”︁

{{DISPLAYTITLE:Next.js 社交登录}}

== 概述 ==
'''Next.js 社交登录'''是一种通过第三方身份提供商（如 Google、Facebook、GitHub 等）实现用户认证的机制。它允许用户使用现有的社交媒体账户快速登录应用，避免手动注册的繁琐流程，同时为开发者提供安全的身份验证解决方案。Next.js 提供了多种方式实现社交登录，包括基于 [[OAuth]] 协议的集成和现成的身份验证库（如 [[NextAuth.js]]）。

== 工作原理 ==
社交登录的核心流程遵循 [[OAuth 2.0]] 或 [[OpenID Connect]] 协议。以下是典型流程：

<mermaid>
sequenceDiagram
    participant 用户
    participant 应用
    participant 身份提供商(如Google)
    用户->>应用: 点击"使用Google登录"
    应用->>身份提供商: 重定向到授权页面
    身份提供商->>用户: 显示登录/授权界面
    用户->>身份提供商: 输入凭据并授权
    身份提供商->>应用: 返回授权码或令牌
    应用->>身份提供商: 交换访问令牌
    身份提供商->>应用: 返回用户数据
    应用->>用户: 登录成功
</mermaid>

== 实现方式 ==

=== 使用 NextAuth.js ===
[[NextAuth.js]] 是 Next.js 生态中流行的身份验证库，支持 50+ 社交登录提供商。以下是配置示例：

<syntaxhighlight lang="javascript">
// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token
      }
      return token
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken
      return session
    }
  }
})
</syntaxhighlight>

'''环境变量配置'''（.env.local）：
<syntaxhighlight lang="bash">
GOOGLE_CLIENT_ID=your_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your_client_secret
NEXTAUTH_URL=http://localhost:3000
</syntaxhighlight>

=== 手动实现 OAuth 流程 ===
对于需要更精细控制的场景，可直接实现 OAuth 流程：

<syntaxhighlight lang="javascript">
// 示例：GitHub OAuth
export async function getGitHubToken(code) {
  const response = await fetch('https://github.com/login/oauth/access_token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify({
      client_id: process.env.GITHUB_CLIENT_ID,
      client_secret: process.env.GITHUB_CLIENT_SECRET,
      code,
    }),
  })
  return await response.json()
}
</syntaxhighlight>

== 安全注意事项 ==
* '''CSRF 防护'''：必须使用 [[state]] 参数验证请求
* '''令牌存储'''：访问令牌应存储在 [[HTTP-only]] cookie 中
* '''范围限制'''：只请求必要的作用域（如 `email profile`）
* '''PKCE'''：移动端应用必须使用 [[PKCE]] 扩展

== 实际案例 ==
'''电子商务网站集成社交登录'''：
1. 用户选择"使用Facebook登录"
2. 获取用户基本资料和邮箱地址
3. 在数据库中创建/更新用户记录
4. 返回自定义 JWT 包含用户角色信息

<syntaxhighlight lang="javascript">
// 用户数据示例
{
  "id": "facebook|123456789",
  "name": "John Doe",
  "email": "john@example.com",
  "image": "https://graph.facebook.com/123456789/picture",
  "role": "customer" // 自定义业务逻辑
}
</syntaxhighlight>

== 常见问题 ==

=== 如何选择身份提供商？ ===
考虑因素：
* 目标用户群体偏好
* 提供商的数据可靠性
* API 调用限制
* 合规要求（如 GDPR）

=== 处理多提供商账户合并 ===
当同一用户使用不同提供商登录时，可通过邮箱地址关联账户：

<syntaxhighlight lang="sql">
-- 数据库设计示例
CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  email VARCHAR(255) UNIQUE,
  name VARCHAR(255),
  providers JSONB -- 存储多个提供商信息
);
</syntaxhighlight>

== 性能优化 ==
* '''缓存策略'''：缓存用户信息减少数据库查询
* '''批量请求'''：使用 [[OpenID Connect]] 的 `userinfo` 端点获取完整数据
* '''服务端会话'''：使用数据库会话而非 JWT 减少令牌大小

== 数学基础 ==
OAuth 2.0 的安全性基于以下假设：
<math>
P(\text{安全}) = 1 - \prod_{i=1}^{n}(1 - P(\text{控制因素}_i))
</math>
其中控制因素包括：
* 令牌有效期
* 加密强度
* 重定向URI验证

== 进阶主题 ==
* '''自定义登录界面'''：覆盖默认的提供商页面
* '''多因素认证集成'''：结合社交登录和短信/邮箱验证
* '''无密码登录'''：使用 [[WebAuthn]] 与社交登录结合

[[Category:Next.js]]
[[Category:身份验证]]
[[Category:Web开发]]

[[Category:后端框架]]
[[Category:Next.js身份验证与授权]]