Why is FB.Login javascript call in iframe not showing Native Login in FB iOS app

Question

I am trying to use the following code (taken from the javascript FB.Login example) to call the native Popups in FB iOS app to allow a user to Login and authenticate our application. The mobile iOS application is the main use case for our web application page. We use frames to allow customers to embed our code on their sites.

The example below works fine (and shows the correct Native Facebook iOS popups) when it is directly accessed (fblogin.hml), but doesn't show any popups work when it is accessed via an iframe. Any calls to FB.ui do work fine when called through the iframe. Is this desired behaviour or a problem in the Facebook iOS application and/or Javascript SDK? Is there any other way we can call FB.Login from within an iFrame?

login page:

… 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>

embed page

… 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>

To Reproduce:

Make sure you Facebook profile has not authorised your APP_ID yet.
Create fblogin.html and host it somewhere. (remember to replace the APP_ID and THIS_URL with your own values)
Create fblogin_embed.html and host this somewhere (and ensure the iframe url points to the path of fblogin.html.
Post links to both fblogin.html and fblogin_embed.html on your FB timeline.
Open fblogin.html in your Facebook mobile iOS app and press the Login link or button to show the native dialog.. This should work correctly. Don't authorise your app yet and press Cancel.
Open fblogin_embed.html in your Facebook mobile iOS app and press the same Login link or button. This doesn't show the native dialog, nor does it return with any answer to the FB.Login response.

Answer 1

that's what we do. If it's unsupported browser we use manual web flow, if not Javascript SDK

Detect Chrome and Facebook in-app browser IOS.
FB.init set "status" = true
In FB.getLoginStatus check if it's unsupported browser use manual flow other sdk FB.login.

redirect_uri - pass GET parameter with parent location.

For example:

Parent: parent.com
Iframe: iframe.com

redirect_uri = encodeURI('http://iframe.com/YOUR_SERVER_SCRIPT?redirect_uri=http://parent.com');

Login manual:

var fb_s = "https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&scope=PERMISSIONS&response_type=token&redirect_uri=LOCATION_HREF_ENCODED;

Server script:

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

Why is FB.Login javascript call in iframe not showing Native Login in FB iOS app

Question

1 answers

solution1
0 2016-04-11 16:13:44

Why is FB.Login javascript call in iframe not showing Native Login in FB iOS app

Question

1 answers

solution1 0 2016-04-11 16:13:44

solution1
0 2016-04-11 16:13:44