Flutter Facebook Login网页端无法跳转至Facebook认证求助

我之前也碰到过Flutter Facebook Login包在Web端无法跳转认证的问题，折腾了好一阵才搞定，给你几个亲测有效的排查方向和解决方案：

• 先核对Facebook开发者平台的Web应用配置
  这是最容易踩坑的地方：
  • 登录Facebook for Developers，找到你的应用，进入「Settings > Basic」，确认「Site URL」和你Web端运行的地址完全一致（比如本地开发的http://localhost:5000，线上部署的话填你的域名）
  • 开启「Facebook Login」产品后，在其「Settings」页面的「Valid OAuth Redirect URIs」里，必须添加你的回调地址——本地开发通常是http://localhost:5000/facebook_login（具体路径可以查你用的包的官方文档，有些包的回调路径是/auth/facebook/callback）
• 确认Web端的初始化代码没遗漏
  很多人会忽略Web端的SDK注入，要在web/index.html里加入Facebook的SDK脚本并完成初始化：

  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '你的FB应用ID',
        cookie     : true,
        xfbml      : true,
        version    : 'v18.0' // 建议用最新的稳定版本号
      });
    };
  </script>
  

  同时在Flutter代码里初始化登录实例时，要确保传入Web端所需的配置：

  final facebookLogin = FacebookLogin(
    webSdkVersion: 'v18.0',
    appId: '你的FB应用ID',
  );
  

• 检查浏览器的弹窗拦截设置
  Web端Facebook登录是通过弹窗完成跳转的，如果浏览器开启了弹窗拦截，会直接阻止这个跳转。可以先把当前开发站点加入浏览器的弹窗白名单，测试是否能正常唤起Facebook登录页面。
• 排查包版本的兼容性问题
  有些旧版本的Flutter Facebook Login包对Web端的支持存在bug，建议先更新到最新的稳定版，也可以去包的GitHub仓库看看issue区，有没有其他用户遇到类似问题的解决方案。
• 测试HTTPS环境下的表现
  本地开发用HTTP的话，部分浏览器会限制Facebook的OAuth跳转逻辑，你可以用ngrok把本地服务转发成HTTPS地址测试，或者直接部署到测试服务器上验证是否正常。

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