使用react-facebook-login实现Facebook OAuth时redirect_uri不匹配报错求解

问题本质是流程用混了：你现在用的react-facebook-login是基于Facebook JS SDK做的弹窗授权组件，这套组件从设计上就和标准服务端授权码流程不兼容：

• SDK压根不会把你传入的redirectUri当成OAuth请求的真实重定向地址，反而会把重定向地址替换成动态生成的跨域通信桥（就是链接里的xd_arbiter地址），这类地址会自动带随机帧ID后缀（比如你看到的/f370b6cb4b5a9c就是SDK随机生成的），根本没有固定值。
• 从你贴的实际授权请求链接就能看出来，SDK擅自把响应类型改成了response_type=token,signed_request,graph_domain，根本没理会你设置的responseType="code"参数，最终你拿到的所谓code，也不是标准授权码流程里能给服务端换token的合法code。

这种情况下，你在服务端传固定的http://localhost:3000/去换token，自然会因为和SDK动态生成的真实redirect地址对不上，被Facebook校验拦截。

方案1：切换到标准授权码流程（和你当前的服务端取数需求完全匹配，推荐） #

• 前端把现在的SDK弹窗组件的授权逻辑换掉，点击登录按钮时直接引导浏览器跳转到Facebook的授权地址，固定拼好以下参数：
  • client_id：你的Facebook应用ID
  • redirect_uri：你自己的前端回调路由（比如http://localhost:3000/auth/facebook/callback，注意这个字符串要在所有环节逐字符完全一致，差个末尾斜杠、改个协议、错个端口都会触发校验失败）
  • response_type=code
  • scope=public_profile,email
  • state：随机生成的CSRF校验值，存在前端本地，回调时比对防跨站攻击
• 授权完成后，Facebook会通过302重定向回到你设置的前端回调路由，路由从URL查询参数里取出code值，POST到你的后端接口就行。
• 后端拿到code后，再调用Graph接口换access_token，此时传的redirect_uri和前端跳转时用的字符串完全一致，就能绕过校验问题。
• 记得把这个实际用的redirect_uri，加到Facebook开放平台应用设置的「有效OAuth重定向URI」白名单里，不在白名单的地址就算字符串完全匹配也会被拦截。

方案2：保留现有SDK组件，调整后端逻辑适配SDK的客户端流程 #

如果你不想换掉现成的react-facebook-login弹窗体验，就别硬走服务端换授权码的流程：

• 等SDK的回调函数拿到完整授权响应，直接从response里取出accessToken，POST传给后端。
• 后端直接调用Facebook的token校验接口，传入拿到的accessToken做有效性验证，从返回值里就能直接拿到用户ID、姓名、邮箱等信息，根本不需要走code换token的步骤。
• 注意你之前从signedRequest里解析字段的逻辑，对这个流程来说没有实际换token的价值，直接用SDK返回的accessToken走验证链路就行。

• redirect_uri是严格逐字符匹配：带不带末尾斜杠、http/https差异、端口差异，都会直接触发报错，没有任何模糊匹配空间。
• 你看到的带随机帧ID的origin参数，只是SDK做跨域弹窗通信的内部实现，和你业务上配置的redirect_uri没有任何关系，别费劲去复刻这类动态生成的地址。
• 别把JS SDK的客户端流程和标准授权码流程的参数、返回值混着用，两套流程的规则完全独立，硬拼肯定会报这类redirect_uri不匹配的错。

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