React使用react-facebook-login遇Invalid Scopes: email错误，求解决方案

错误原因 #

你遇到的「Invalid Scopes: email」错误，核心原因是单独请求email权限不符合Facebook Login API的规则。Facebook要求请求额外权限（如email）时，必须同时包含基础权限public_profile，仅单独请求email会被判定为无效范围。

解决步骤 #

1. 修正权限范围参数 #

将scope属性修改为同时包含public_profile和email，用空格分隔：

scope="public_profile email"

2. 显式指定需要获取的字段 #

Facebook Graph API v2.4+版本要求显式声明需要获取的用户字段，因此添加fields属性来指定email（可同时添加其他需要的字段如name）：

fields="name,email"

3. 确保库版本最新 #

运行以下命令更新react-facebook-login库，避免因版本兼容问题导致的异常：

npm update react-facebook-login
# 或使用yarn
yarn upgrade react-facebook-login

4. 检查Facebook应用配置 #

• 登录Facebook开发者控制台，进入你的应用
• 导航至「产品 > Facebook登录 > 设置」，确保「客户端OAuth登录」已启用
• 确认应用的域名和重定向URI已正确配置（即使使用隐式登录，也需设置为你的应用URL）

修正后的完整代码 #

import React from "react";
import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";

const FacebookSignInButton = () => {
  const responseFacebook = (response) => {
    console.log(response);
    // 登录成功后可通过response.email获取用户邮箱
  };

  return (
    <>
      <FacebookLogin
        appId="FACEBOOK_APP_ID" // 替换为你的实际应用ID
        autoLoad
        callback={responseFacebook}
        scope="public_profile email"
        fields="name,email"
        render={(renderProps) => (
          <div
            onClick={renderProps.onClick}
            className="w-14 h-14 text-center rounded-full bg-blue-500 text-white saturate-100 transition-all hover:bg-blue-600"
          >
            <button className="block mx-auto mt-4">
              <i className="fab fa-facebook-f fa-lg"></i>
            </button>
          </div>
        )}
      />
    </>
  );
};

export default FacebookSignInButton;

额外说明 #

• 修正后测试登录流程，错误应该会消失，且你能在返回的response对象中获取到用户邮箱
• 如果仍有问题，请确认你的应用处于开发模式（用于测试），或已通过应用审核获取email权限（线上应用需要）

内容的提问来源于stack exchange，提问作者Asad Ali