程序员经验分享-hwhale

Facebook 登录 JS - FB.Event.subscribe('auth.login') 无需点击登录按钮即可触发

2023-12-23

我真的需要您帮助我尝试在我的网站上实现“使用 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. In your FB.init方法，你正在设置status: true。这告诉页面应该在页面加载后立即检查用户是否登录了 Facebook。就您而言，这不仅是您不需要它，而且还会占用访问者的一些带宽来往返 Facebook，而您实际上并不需要它。
  2. 您不需要记住 uid 和 accessToken 变量，因为您可以通过使用按需获取它们FB.getLoginStatus method.

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

<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

facebook

facebookjavascriptsdk

Facebook 登录 JS - FB.Event.subscribe('auth.login') 无需点击登录按钮即可触发 的相关文章

随机推荐

  • 类类型非类型模板参数初始化不编译

    我的印象是 在新的 C 20 标准下 以下内容应该成为有效代码 struct Foo int a b template

  • Java 日志记录与 Log4J [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 是否仍然值得将 log4j 库添加到 Java 5 项目中只是为了记录日志 假设文件有一些例外 并有一些不错的翻转设置 或者标准的 util l

  • 使用 SQLite 获取本周的数据

    我试图在 sqlite 中获取本周的数据 但似乎我错过了一些东西 因为我得到了错误的信息 更具体地说 我想检索数据库中具有时间戳的所有数据 其日期属于本周 本周可能从周日或周一开始 即 26 2 12 03 03 12 目前我正在使用这样的

  • 即使有垂直滚动，如何将绝对定位的项目保留在网站底部？

    我有一个具有绝对位置的页脚 footer position absolute bottom 0 height 43px padding 0 background color 333333 width 100 color 737373 tex

  • Django 密码问题

    我正在为用户使用模型 如下所示 class UserForm forms ModelForm class Meta model User fields username password email 但密码字段显示为常规文本字段 而不是密码

  • 如何使用 OpenXml 2.0 将任何文件类型嵌入到 Microsoft Word 中

    我花了很多时间试图找到一种使用 OpenXml 2 0 将任何文件嵌入 Microsoft Word 的好方法 Office 文档相当简单 但其他文件类型 例如 PDF TXT GIF JPG HTML 等 又如何呢 在 C 中 让它适用于

  • 如何使用 Bouncy Castle 将私钥附加到证书

    我有两个 PEM 文件需要在 Bouncy Castle 中加载 一个文件是证书 另一个文件是私钥 使用本文答案中的代码 如何读取 Pem 证书和私钥文件并创建 Bouncy Castle X509Certificate 和 Bouncy

  • Python 中的重试函数 [重复]

    这个问题在这里已经有答案了 前段时间 我需要一个retryR 中的函数处理缓慢的服务器响应 该函数将具有以下行为 尝试一个操作 函数或方法 如果失败 请稍等一下 然后重试 x10 我想出了以下几点 retry lt function fun

  • Ant + 类路径问题

    我已经编写了一个 ANT 脚本 最后正在构建 jar 这是 jar 部分的建筑

  • 使用内联脚本时在 Python 中将 unicode 字符打印到控制台的正确方法

    我正在寻找一种使用 Python 2 x 将 unicode 字符打印到支持 UTF 8 的 Linux 控制台的方法print method 我得到的是 python2 7 c print u 我想要的是 python2 7 c prin

  • Ipython 笔记本 - 无法打开

    我尝试打开 ipython 笔记本但没有成功 不知道为什么 当我输入命令 ipython notebook 时 我收到的输出是 bash usr local bin ipython usr local opt python bin pyth

  • 图片框位图缩放

    我有一个Picturebox和一大堆Bitmaps可以在其中显示 位图与其他位图相比的相对大小对用户来说很重要 他们需要能够看出一张图像比另一张图像小或大 位图还必须完全适合图片框 并且图片框不能调整大小 当简单地在一个巨大的图片框中显示未

  • 将 d3.js SVG 代码转换为独立程序 - 有什么建议吗？

    我有一些用 d3 js 编写的脚本 可以生成 SVG 图表 我想使用独立程序生成这些图表 将这些脚本转换为在批处理模式下运行而不需要浏览器的最简单方法是什么 你可以 将其转换为node js http nodejs org程序 您可以访问文

  • 在 Excel-VBA 中使用 RegEx 替换文本

    我在 Excel 中有如下数据 此处一行 Excel 中的一个单元格 07 July 2015 12 02 14 July 2015 17 02 12 August 2015 22 02 01 September 2015 11 02 我想

  • jQuery 移动选项卡和锚点

    我想使用 jQuery Mobile 创建一个选项卡式移动页面 我已经掌握了创建选项卡 例如 Tab1 Tab2 Tab3 Tab4 以及让每个选项卡加载新内容页面的基础知识 我将如何在特定选项卡中使用锚点 例如 如果有人想要为一个链接添加

  • 如何使用 NodeJS 验证 Hmac？

    我可以使用以下代码通过 NodeJS 成功创建 Hmac 稍微改变示例 https nodejs org api crypto html cryptocreatehmacalgorithm key options https nodejs

  • 如何通过 ssh 连接到 docker 容器

    我正在运行容器hypriot rpi busybox httpd 我正在尝试 ssh 到 docker 容器 但出现以下错误 pi raspberrypi docker exec it cc55da85b915 bash rpc error

  • 将键码的字符串表示形式转换为 Qt::Key （或任何 int）并返回

    我想将代表键盘上的键的字符串转换为键码枚举 例如Qt Key http doc qt digia com 4 7 qt html Key enum 或其他任何东西 转换示例如下 Ctrl to Qt Key Control Up to Qt

  • 远程处理 - 有关客户端的信息。 C＃

    在 net 2 0 上使用远程处理时是否可以找到 获取有关连接客户端的一些信息 我想知道有关服务器端连接客户端的一些信息 以便我可以采取相应的行动 这是一个小型且非常本地化的应用程序 同时连接 请求的客户端数量最多不会超过 10 个 在每个

  • Facebook 登录 JS - FB.Event.subscribe('auth.login') 无需点击登录按钮即可触发

    我真的需要您帮助我尝试在我的网站上实现 使用 Facebook 登录 功能 基本上 我正在努力实现以下目标 如果用户之前已确认该应用程序并单击 FB 登录按钮 在我的网站上 他们登录到该网站 使用网站的用户 与 Facebook 用户 ID

热门标签