React应用使用react-twitter-login时Twitter登录API运行异常

问题表现 #

• 项目中引入react-twitter-login组件对接Twitter登录API，点击登录按钮固定触发错误
• 已在Twitter开发者平台对应项目下配置localhost、本地IP两类回调地址，点击按钮可正常唤起授权弹窗，但弹窗内加载为空白页面
• 相关参考截图：
  • 错误截图：
  • Twitter开发者平台配置截图：

现有实现代码 #

import TwitterLogin from "react-twitter-login";

export default (props) => {
  const authHandler = (err, data) => {
    console.log(err, data);
  };

  return (
    <TwitterLogin
      authCallback={authHandler}
      consumerKey={CONSUMER_KEY}
      consumerSecret={CONSUMER_SECRET}
    />
  );
};

问题根因与修复步骤 #

这个问题核心是配置和组件依赖的授权版本不匹配导致，按以下步骤排查即可：

• 确认授权版本匹配
  react-twitter-login底层实现的是Twitter OAuth 1.0a的3步授权流程，现在Twitter开发者平台新建项目默认只开启OAuth2.0授权，两个版本的密钥、校验逻辑完全不通用。先进入项目的「User authentication settings」页面，手动开启OAuth 1.0a开关。
• 回调地址必须完全匹配
  Twitter对OAuth1.0a的回调地址校验是严格全字符串匹配，不支持路径前缀匹配、通配符匹配：
  • 不要只填根路径，比如本地服务跑在http://localhost:3000，必须把组件默认的回调路径http://localhost:3000/oauth/twitter完整加入回调地址列表，只填http://localhost:3000会被Twitter的安全策略拦截，直接返回空白页
  • 地址的协议（http/https）、端口、路径必须和前端实际访问地址完全一致，比如用本地局域网IP192.168.1.5访问3000端口服务，就要加http://192.168.1.5:3000/oauth/twitter到回调列表
• 密钥不要填错
  代码里传入的consumerKey和consumerSecret，必须是平台「Keys and tokens」板块下OAuth 1.0a对应的API Key和API Key Secret，不要误用OAuth2.0的Client ID和Client Secret。
• 显式指定回调地址（可选兜底）
  如果按上面步骤配置完还是有问题，可以给组件传入callbackUrl参数，显式指定和后台配置完全一致的回调地址，避免组件自动拼接的路径和预期不符，修改后代码示例：

<TwitterLogin
  authCallback={authHandler}
  consumerKey={CONSUMER_KEY}
  consumerSecret={CONSUMER_SECRET}
  callbackUrl="http://localhost:3000/oauth/twitter"
/>

内容的提问来源于stack exchange，提问作者Kishan Dholakiya