个人中心
gpt4 book ai didi

angularjs - 如果应用程序处于独立状态，Facebook 登录在 PWA 应用程序中不起作用

转载 作者：行者123 更新时间：2023-12-03 13:37:07 25 4
gpt4 key购买 nike

我正在建立一个 PWA 网站。我正在使用 Angular JS，并在我的网站中使用了 javascript facebook 登录。但是，如果我在浏览器中查看我的应用程序，则 Facebook 登录正在工作。但是当我将快捷方式添加到主屏幕并从主屏幕启动应用程序时，FB 登录不起作用。 Facebook 页面正在加载。但输入凭据后，它显示空白页。任何人都可以帮忙吗？

这是我的FB登录代码

var doBrowserLogin = function(){
  var deferred = $q.defer();
  FB.login(
    function(response){
      if (response.authResponse) {
              deferred.resolve(response);
            }else{
              deferred.reject(response);
            }
          },
          {scope:'email,public_profile'}
       );
  return deferred.promise;
}


它正在打开 facebook 登录屏幕，输入凭据后，它显示为空白。不回到应用程序。
Blank page
在我的 manifest.json 文件中，显示属性设置为独立。
请帮忙。

最佳答案

不要使用 facebook javascript 插件，编写自己的流程:

1) 创建一个将接收 fb 登录响应的静态 html(例如:/fb-login-receiver.html)
它将使用 postMessage 将登录结果发送回应用程序。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    Facebook login completed.
    <script type="text/javascript">
    window.opener.postMessage(window.location.toString(), window.location.href);
    window.close();
  </script>
</body>
</html>

2)在您的应用程序中编写一个函数，该函数将在弹出窗口中打开 fb 登录页面

此 typescript 示例返回访问 token 的 promise 并检查用户是否允许电子邮件访问: 
async loginFacebook(): Promise<string> {
    let popup = window.open("https://www.facebook.com/v3.1/dialog/oauth?client_id=**<YOUR_CLIENT_ID>**&display=popup&scope=email&response_type=token,granted_scopes&auth_type=rerequest&redirect_uri=" + window.location.origin + "/fb-login-receiver.html", 'Facebook Login', 'width=500,height=500');
    var promise = new Promise<string>((resolve, reject) => {
      let finished = false;
      let listener = (e: MessageEvent) => {
        finished = true;
        let url = new URL(e.data);
        let hash = url.hash.substring(1);
        let splitted = hash.split('&');
        let dct: { [key: string]: string } = {};
        for (let s of splitted) {
          var spltd = s.split('=');
          dct[spltd[0]] = spltd[1];
        }

        if (dct['granted_scopes'].indexOf('email') < 0) {
          reject("Email required");
          return;
        }
        resolve(dct['access_token']);
      };
      addEventListener('message', listener);

      let intervalChecker = setInterval(() => {
        if (popup.closed) {
          clearInterval(intervalChecker);
          removeEventListener('message', listener);
          if (!finished) {
            reject('Login canceled');
          }
        }
      }, 10);
    });
    return promise;
}

关于angularjs - 如果应用程序处于独立状态，Facebook 登录在 PWA 应用程序中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48112300/

25 4 0
文章推荐： logging - ZooKeeper不断获取EndOfStreamException，从而导致崩溃
文章推荐： reactjs - React PropTypes 对 arrayOf 必需元素的验证无法正常工作
文章推荐： reactjs - 如何在 react 中动态显示/隐藏项目列表
文章推荐： cocos2d-x - 为什么调用 setFlipped(true) 时动画没有水平翻转？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com