为什么 iframe 中的 FB.Login javascript 调用未在 FB iOS 应用程序中显示本机登录

Nea*_*ail 5 iframe facebook ios facebook-javascript-sdk facebook-login

我正在尝试使用以下代码(取自 javascript FB.Login 示例)来调用 FB iOS 应用程序中的本机弹出窗口,以允许用户登录并验证我们的应用程序。移动 iOS 应用程序是我们 Web 应用程序页面的主要用例。我们使用框架来允许客户在他们的网站上嵌入我们的代码。

下面的示例在直接访问 (fblogin.hml) 时工作​​正常(并显示正确的 Native Facebook iOS 弹出窗口),但在通过 iframe 访问时不显示任何弹出窗口工作。通过 iframe 调用时,对 FB.ui 的任何调用都可以正常工作。这是 Facebook iOS 应用程序和/或 Javascript SDK 中所需的行为还是问题?我们还有其他方法可以从 iFrame 中调用 FB.Login 吗?

登录页面:

... fblogin.html ..

<html>
  <head>
    <title>FB.Login example</title>
  </head>
  <body>
    <!-- Load the Facebook JavaScript SDK -->
    <script src = "//connect.facebook.net/en_US/all/debug.js"></script>

    <div id="fb-root"></div>

    <script type="text/javascript">

      FB.init({
        appId: 'YOUR_FACEBOOK_APP_ID',
        xfbml: true,
        status: true,
        cookie: true,
      });

      // Check if the current user is logged in and has authorized the app
      FB.getLoginStatus(checkLoginStatus);

      // Login in the current user via Facebook and ask for email permission
      function authUser() {
        FB.login(function(response) {
          console.info('FB.login callback', response);
          if (response.status === 'connected') {
            console.info('User is logged in');
          } else {
            console.info('User is logged out');
          }
        }, {scope:'email'});
      }


      // Check the result of the user status and display login button if necessary
      function checkLoginStatus(response) {
        conole.log(response);
        if(response && response.status == 'connected') {
          alert('User is authorized');

          // Hide the login button
          document.getElementById('loginButton').style.display = 'none';

          // Now Personalize the User Experience
          console.log('Access Token: ' + response.authResponse.accessToken);
        } else {
          alert('User is not authorized');

          // Display the login button
          document.getElementById('loginButton').style.display = 'block';
        }
      }
    </script>

    <a href="https://www.facebook.com/dialog/oauth?client_id=YOUR_FACEBOOK_APP_ID&redirect_uri=http://THIS_URL">Login Using oauth URL</a>
    <input id="loginButton" type="button" value="Login Using Javascript SDK" onclick="authUser();" />

  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

嵌入页面

… fblogin_embed.html

<html> 
<head><title>Facebook embed test</title>
</head>
<body>  
<iframe src="fblogin.html"
    frameborder="0" 
    scrolling="no" 
    width="100%" 
    height="100%">
 </iframe>
</body>
Run Code Online (Sandbox Code Playgroud)

重现:

  1. 确保您的 Facebook 个人资料尚未授权您的 APP_ID。
  2. 创建 fblogin.html 并将其托管在某处。(记得将 APP_ID 和 THIS_URL 替换为您自己的值)
  3. 创建 fblogin_embed.html 并将其托管在某处(并确保 iframe url 指向 fblogin.html 的路径。
  4. 在您的 FB 时间线上发布指向 fblogin.html 和 fblogin_embed.html 的链接。
  5. 在您的 Facebook 移动 iOS 应用程序中打开 fblogin.html,然后按登录链接或按钮以显示本机对话框。这应该可以正常工作。尚未授权您的应用程序,然后按取消。
  6. 在您的 Facebook 移动 iOS 应用程序中打开 fblogin_embed.html,然后按相同的登录链接或按钮。这不会显示本机对话框,也不会返回对 FB.Login 响应的任何答案。

小智 0

这就是我们所做的。如果浏览器不受支持,我们将使用手动 Web 流程,如果不是 Javascript SDK

  1. 检测 Chrome 和 Facebook 应用内浏览器 IOS。

  2. FB.init 设置“状态”= true

    在 FB.getLoginStatus 中检查是否是不支持的浏览器使用手动流程其他 sdk FB.login。

redirect_uri - 传递带有父位置的 GET 参数。

例如:

Parent: parent.com
Iframe: iframe.com

redirect_uri = encodeURI('http://iframe.com/YOUR_SERVER_SCRIPT?redirect_uri=http://parent.com');
Run Code Online (Sandbox Code Playgroud)

登录手册:

var fb_s = "https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&scope=PERMISSIONS&response_type=token&redirect_uri=LOCATION_HREF_ENCODED;
Run Code Online (Sandbox Code Playgroud)

服务器脚本:

if (empty($_GET['redirect_uri'])) {
    header("HTTP/1.1 301 Moved Permanently"); 
    header("Location: " . $_GET['redirect_uri']);
}
Run Code Online (Sandbox Code Playgroud)