PWA 空白页面 Facebook

Question

我有一个 PWA 应用程序，其中您必须登录的选项之一是 Facebook，一切顺利，如果您在浏览器中，登录效果非常好。当您将网站添加到您的手机并在 PWA 中打开并单击从 Facebook 登录时会出现问题，它会打开一个空白页面并且它不会重定向到应用程序，如果您关闭页面，请返回应用程序并再次点击 facebook 用户已登录，但有谁知道如何摆脱白色/空白页面？

我尝试了“redirect_uri”和“display: touch”，但这些似乎都不起作用了。

Answer 1

使用 Facebook 作为登录方法时，登录后出现空白页面是一个常见问题，尤其是在我们处于开发模式时。

这是因为您已经登录并授权了该应用，所以当它再次尝试登录时，它会变为空白。

解决此问题的最直接方法是在调用 .login() 函数之前首先检查用户是否已登录并授权您的应用。

幸运的是，Facebook 提供了一个功能，他们可以为您处理（几乎）所有事情。

getLoginStatus() 函数

getLoginStatus() 函数确定 1) 用户是否已登录 Facebook，以及 2) 用户是否已授权您的应用。

用户有三种可能的状态：

• 用户已登录 Facebook 并已授权您的应用，此时该函数将返回：已连接。
• 用户已登录 Facebook，但尚未对您的应用程序进行身份验证，在这种情况下，该函数将返回：not_authorized。
• 用户要么未登录 Facebook，要么明确退出您的应用程序，在这种情况下，我们不知道是哪一个，这就是它返回的原因：未知。

例如：

当我们调用 getLoginStatus() 时，我们会得到一个类似这样的对象：

    {
  authResponse: {
    userID: '12345678912345',
    accessToken: 'kgkh3h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn',
    session_Key: true,
    expiresIn: '5183738',
    sig: '...'
  },
  status: 'connected'
}

你可以看到有一个 authResponse 对象和一个 status 对象。我们将首先关注状态对象，检查三个可能的响应中的每一个。

    this.facebookProvider.getLoginStatus(response => {
  if (response.status === 'connected') {
    // User Authenticated and your App is authorized

  } else if (response.status === 'not_authorized') {
    // User authenticated but your app isn't authorized yet.
  } else {
    // the user isn't logged in to Facebook.
  }
});

试试这个，并在从 PWA 拨打电话之前先尝试从 Facebook 注销。