Geek Answers Handbook

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

I am trying to use the following code (taken from the javascript FB.Login example) to bring up my own pop-ups in an FB iOS application so that the user can login and authenticate our application. The iOS mobile app 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 iOS pop-ups for Facebook) when it is directly accessible (fblogin.hml), but does not show pop-ups when it is accessible through an iframe. Any calls to FB.ui really work fine when called through an iframe. Is this the desired behavior or problem in the iOS app for Facebook and / or the Javascript SDK? Is there any other way that we can call FB.Login from 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>

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

Playback:

  • Make sure your Facebook profile has not yet allowed your APP_ID.
  • Create fblogin.html and post it somewhere. (remember to replace APP_ID and THIS_URL with your own values)
  • fblogin_embed.html - ( , URL- iframe fblogin.html.
  • fblogin.html fblogin_embed.html FB.
  • fblogin.html iOS Facebook "" , . . "".
  • fblogin_embed.html iOS Facebook . FB.Login.
+4
1

. , , Javascript SDK

  • Chrome Facebook IOS.

  • FB.init "status" = 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');

:

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

script:

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

More articles:


All Articles