繁体   English   中英

Facebook登录JS - FB.Event.subscribe('auth.login')触发器没有登录按钮点击

[英]Facebook login JS - FB.Event.subscribe('auth.login') triggers without login button click

我正在尝试在我的网站上实现,真的需要你的登录与Facebook功能的帮助。

基本上,我正在努力实现以下目标:

  • 如果用户之前已确认该应用并点击我网站上的FB登录按钮,则会登录该网站(该网站的用户帐户与Facebook用户ID相关联)

  • 如果用户之前没有确认该应用程序,则在FB登录(和订阅应用程序)时,他们会被重定向到网站的注册页面。 这里的表格预先填入了来自Facebook的用户数据,注册过程变得更加容易和快捷。

我正在使用下面的代码。

<body>

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
          appId: 'xxxxxxxx',
          status: true,
          cookie: true, 
          xfbml: true,
          oauth: true
        });

        FB.Event.subscribe('auth.login', function(response) {
              if (response.status === 'connected') {
                    var uid = response.authResponse.userID;
                    var accessToken = response.authResponse.accessToken;

                    if ((parseFloat(uid) == parseInt(uid)) && !isNaN(uid)) {
                        $.ajax({
                            url: '/user_actions/prep_facebook_registration',
                            cache: false,
                            type: 'POST',
                            data: { 'uid': uid, 'token': accessToken },
                            dataType: 'json',
                            success: function(data) {
                                if (data.success=='true') {
                                    if ((typeof(data.redirect) != 'undefined')) {
                                        window.location=data.redirect;
                                    }
                                }
                            }
                        });
                    }
              }
        });

        FB.Event.subscribe('auth.logout', function(response) {
            FB.getLoginStatus(function(res) {
                if (!res.authResponse) {
                    window.location='/access/logout';
                }
            });
        });

        FB.getLoginStatus(function(response) {
          if (response.status === 'connected') {
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            //not doing anything so far
          }
        });
      };
            (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
</script>

登录按钮在网站中进一步向下:

<div class="fb-login-button" autologoutlink="true" data-show-faces="false" data-width="166" data-max-rows="1" style="position: absolute; top: 5px; right: 0;" scope="email"></div>

这里的问题是FB.Event.subscribe('auth.login')不仅在FB登录按钮点击时触发,而且如果用户登录到Facebook并且仅在到达我的网站之后触发。 这导致重定向到注册页面或当前页面重新加载,即使用户没有单击登录按钮!

'/ user_actions / prep_facebook_registration'包含一个脚本,该脚本检查是否必须将成员重定向到注册页面或应该使用本地帐户登录。 它返回重定向的URL。

我究竟做错了什么? 如何避免在登录按钮单击之外触发FB.Event.subscribe('auth.login')?

实际上,有一个更好的解决方案。

有两件事你可以做得更好:

  1. FB.init方法中,您将设置status: true 这告诉页面它应该检查用户是否在页面加载后立即登录facebook。 在您的情况下,它不仅仅是您不需要它 - 它将需要您的访客的一些带宽用于往返于您实际上不需要的Facebook。
  2. 您不需要记住uid和accessToken变量,因为您可以使用FB.getLoginStatus方法按需获取它们。

基于示例代码的完整解决方案将是:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR APP ID',
      status     : false,
      cookie     : true,
      xfbml      : true
    });
  };

  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

   function Facebook_login () {
      FB.getLoginStatus(function(response) {
         if (response.status === 'connected') {
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            if ((parseFloat(uid) == parseInt(uid)) && !isNaN(uid)) {
               $.ajax({
                   url: '/user_actions/prep_facebook_registration',
                   cache: false,
                   type: 'POST',
                   data: { 'uid': uid, 'token': accessToken },
                   dataType: 'json',
                   success: function(data) {
                      if (data.success=='true') {
                          if ((typeof(data.redirect) != 'undefined')) {
                              if (data.redirect=='current') {
                                  location.reload();
                              } else {
                                  window.location=data.redirect;
                              }
                          }
                      }
                   }
               });
            }
         }
      }
   }
</script>

<div class="fb-login-button" onlogin="Facebook_login()" autologoutlink="true" [parameters]></div>

=====================

编辑:好的,我觉得这里有一点进步:)

我已经使用onlogin事件扩展了FB登录按钮, 事件调用了JS函数Facebook_login()

<div class="fb-login-button" onlogin="Facebook_login()" autologoutlink="true" [parameters]></div>

我在window.fbAsyncInit函数之外导出了uidaccessToken变量,所以我可以从其他地方访问它们:

var uid;
var accessToken;

window.fbAsyncInit = function() {
   FB.init({
      your parameters
   });
});

然后,我得到FB.Event.subscribe('auth.login')只为我的uidaccessToken变量赋值,但不执行任何重定向。

FB.Event.subscribe('auth.login', function(response) {
  if (response.status === 'connected') {
    uid = response.authResponse.userID;
    accessToken = response.authResponse.accessToken;
  }
});

最后,我的自定义函数Facebook_login()获取uid和accessToken值并执行其余操作。 这次只有在单击登录按钮时才会发生。 请注意,此函数在window.fbAsyncInit()之外

function Facebook_login () {
          if ((parseFloat(uid) == parseInt(uid)) && !isNaN(uid)) {
                $.ajax({
                    url: '/user_actions/prep_facebook_registration',
                    cache: false,
                    type: 'POST',
                    data: { 'uid': uid, 'token': accessToken },
                    dataType: 'json',
                    success: function(data) {
                        if (data.success=='true') {
                            if ((typeof(data.redirect) != 'undefined')) {
                                if (data.redirect=='current') {
                                    location.reload();
                                } else {
                                    window.location=data.redirect;
                                }
                            }
                        }
                    }
                });
            }
      }

这似乎对我有用。 如果有人有任何更好的解决方案,您的意见将不胜感激:)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM