求助：Angular JS开发的PWA独立模式下Facebook登录失效

嘿，这个问题我之前帮同事排查过好几次，本质是PWA的独立模式（standalone）运行环境和普通浏览器不一样，Facebook的JS SDK默认的登录回调逻辑没适配这种场景。咱们一步步来解决：

问题根源 #

当PWA以standalone模式启动时，它是运行在一个独立的应用容器里，没有浏览器的地址栏和标签页，和普通浏览器窗口的上下文是隔离的。FB.login默认的弹窗登录完成后，回调无法正确回到这个独立容器，反而可能打开了一个新的浏览器标签，或者因为上下文差异导致回调函数根本触发不了，就出现了空白页的情况。

解决方案：改用手动OAuth授权流 #

相比依赖FB JS SDK的弹窗回调，手动构造OAuth授权流程更适配PWA独立模式，步骤如下：

1. 先检查Facebook开发者后台设置 #

• 把你的PWA域名（比如https://your-pwa-domain.com）添加到有效OAuth跳转域名列表里（在FB应用的「设置」→「基本」→「添加平台」→「网站」里配置）。
• 确认你有一个专门的回调页面，比如https://your-pwa-domain.com/fb-callback，这个页面要能处理FB返回的授权信息。

2. 修改登录逻辑（替代原来的doBrowserLogin） #

咱们自己构造授权URL，用window.open打开登录窗口，然后通过postMessage来传递登录结果：

var doBrowserLogin = function() {
  var deferred = $q.defer();
  // 替换成你的FB应用ID和回调地址
  var fbAppId = '你的Facebook应用ID';
  var redirectUri = 'https://your-pwa-domain.com/fb-callback';
  var authUrl = `https://www.facebook.com/v18.0/dialog/oauth?client_id=${fbAppId}&redirect_uri=${redirectUri}&scope=email,public_profile&response_type=token`;

  // 打开登录弹窗
  var authWindow = window.open(authUrl, '_blank', 'width=600,height=600');

  // 定时检查窗口状态，同时监听回调页面的消息
  var checkWindowInterval = setInterval(() => {
    if (authWindow.closed) {
      clearInterval(checkWindowInterval);
      deferred.reject('登录窗口已关闭');
    }
  }, 1000);

  // 监听来自回调页面的消息
  window.addEventListener('message', function(event) {
    // 验证消息来源，防止恶意请求
    if (event.origin !== 'https://your-pwa-domain.com') return;

    if (event.data.type === 'FB_LOGIN_SUCCESS') {
      clearInterval(checkWindowInterval);
      authWindow.close();
      deferred.resolve(event.data.authResponse);
    } else if (event.data.type === 'FB_LOGIN_FAILURE') {
      clearInterval(checkWindowInterval);
      authWindow.close();
      deferred.reject(event.data.error);
    }
  });

  return deferred.promise;
};

3. 创建回调页面fb-callback.html #

这个页面负责从FB的回调URL中提取授权信息，然后把结果发送回PWA主窗口：

<!DOCTYPE html>
<html>
<head>
  <script>
    // 从URL哈希中解析FB返回的授权参数
    function parseAuthResponse() {
      const hashParams = {};
      window.location.hash.substring(1).split('&').forEach(part => {
        const [key, value] = part.split('=');
        hashParams[key] = decodeURIComponent(value);
      });
      return hashParams;
    }

    const authResponse = parseAuthResponse();
    // 发送消息给主窗口
    if (authResponse.access_token) {
      window.opener.postMessage({
        type: 'FB_LOGIN_SUCCESS',
        authResponse: authResponse
      }, window.opener.origin);
    } else {
      window.opener.postMessage({
        type: 'FB_LOGIN_FAILURE',
        error: authResponse.error || '登录失败'
      }, window.opener.origin);
    }
    // 自动关闭窗口
    window.close();
  </script>
</head>
<body></body>
</html>

4. 额外的小检查 #

• 确认你的manifest.json里的start_url是正确的，比如"/"或者你的应用首页，确保PWA启动后处于正确的上下文。
• 如果还是想用FB JS SDK，可以试试在FB.login的参数里加上display: 'popup'，不过这个方法在部分浏览器的独立模式下可能还是有问题，手动OAuth流更可靠。

这样调整后，登录完成后回调页面会直接把结果传给PWA主窗口，然后自动关闭，就不会出现空白页的情况了。

内容的提问来源于stack exchange，提问作者SANGEETH KUMAR S G