如何解决NextAuth.js Facebook Provider移动端账号无法返回邮箱问题

1. 先搞定Facebook开发者后台的权限配置 #

Facebook移动端对权限管控更严格，必须明确请求邮箱权限：

• 登录Facebook开发者后台，找到你的应用，进入「Facebook Login」产品设置，把email权限添加到权限列表中。
• 别忽略移动端平台的配置：在「Facebook Login」的「Settings」里，针对iOS/Android平台，确认email已经包含在默认请求的权限范围内。
• 如果用户之前拒绝过邮箱权限，后续登录不会自动弹出请求，这时候得强制重新触发权限申请。

2. 调整NextAuth.js的Facebook Provider配置 #

在你的NextAuth配置代码里，必须显式指定权限范围，同时处理权限重新请求的逻辑：

import NextAuth from "next-auth";
import FacebookProvider from "next-auth/providers/facebook";

export default NextAuth({
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
      // 显式声明要请求邮箱和公开资料权限
      scope: "email public_profile",
      authorization: {
        params: {
          // 强制重新请求权限，覆盖用户之前的拒绝设置
          auth_type: "rerequest",
          scope: "email public_profile"
        }
      }
    })
  ],
  // 确保邮箱能被同步到token和session中
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.email = user.email;
      return token;
    },
    async session({ session, token }) {
      session.user.email = token.email;
      return session;
    }
  }
})

3. 移动端特殊情况的补救方案 #

有时候就算配置了权限，Facebook移动端还是可能返回null邮箱，这时候可以主动调用Graph API拉取：

• 先写个方法用accessToken调用Graph API获取邮箱：

async function getFacebookEmail(accessToken) {
  const res = await fetch(`https://graph.facebook.com/me?fields=email&access_token=${accessToken}`);
  const data = await res.json();
  return data.email;
}

• 然后在NextAuth的signIn回调里调用这个方法，补上缺失的邮箱：

callbacks: {
  async signIn({ user, account, profile }) {
    if (account.provider === "facebook" && !user.email) {
      const email = await getFacebookEmail(account.access_token);
      if (email) {
        user.email = email;
        // 这里可以直接把邮箱写入你的数据库
      }
    }
    return true;
  }
}

如果以上步骤都试过还是拿不到邮箱，大概率是用户的Facebook账号未绑定邮箱，或者用户坚决拒绝了权限请求，这种情况只能引导用户手动填写邮箱来完善信息。

内容的提问来源于stack exchange，提问作者Alona Abukhouska