时间戳

首页 > 解决方案 > PWA 空白页面 Facebook

javascript - PWA 空白页面 Facebook

问题描述

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

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

标签： javascriptfacebookfacebook-loginprogressive-web-apps

解决方案

使用 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 对象和一个状态对象。我们将首先关注状态对象，检查三个可能的响应中的每一个。

    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 注销。

推荐阅读