CODEWITHSUNDEEP
javascriptajaxfacebook
Umair A.
Umair A.

Reputation: 6873

AJAX with Facebook Authentication

I have built an completely AJAX based application which has no page refresh and load everything using AJAX. Now I want to embed facebook authentication in a way it won't redirect the user to make page refresh.

Currently the facebook works this way:

User is being redirected to Facebook by clicking Facebook Connect button https://graph.facebook.com/oauth/authorize?client_id=xxxxxxxxxxxxxx&redirect_uri=http://www.xxxxxxxxxx.com/JoinFB.html?&type=user_agent&display=popup&scope=offline_access,publish_stream,sms,email,user_birthday,user_photos,user_photo_video_tags,user_checkins,friends_checkins

It will after user action whether "Allow" or "Disallow" redirect to http://www.xxxxxxxxxx.com/JoinFB.html and I can then use Javascript to read user information.

The problem is that can I overcome this page redirection process somehow using IFRAME or anything?

How will I detect IFRAME as user allowed or not?

Upvotes: 2

Views: 9000

Answers (1)

ifaour
ifaour

Reputation: 38135

I would use the JS-SDK, a perfect example is the Facebook PHP-SDK example itself: 

<?php

require '../src/facebook.php';

$facebook = new Facebook(array(
  'appId'  => '344617158898614',
  'secret' => '6dc8ac871858b34798bc2488200e503d',
));

// See if there is a user from a cookie
$user = $facebook->getUser();

if ($user) {
  try {
    // Proceed knowing you have a logged in user who's authenticated.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
    $user = null;
  }
}

?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <?php if ($user) { ?>
      Your user profile is
      <pre>
        <?php print htmlspecialchars(print_r($user_profile, true)) ?>
      </pre>
    <?php } else { ?>
      <fb:login-button></fb:login-button>
    <?php } ?>
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId: '<?php echo $facebook->getAppID() ?>',
          cookie: true,
          xfbml: true,
          oauth: true
        });
        FB.Event.subscribe('auth.login', function(response) {
          window.location.reload();
        });
        FB.Event.subscribe('auth.logout', function(response) {
          window.location.reload();
        });
      };
      (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>
  </body>
</html>

Now clicking the fb:login-button: 

<fb:login-button scope="offline_access,publish_stream,sms,email,user_birthday,user_photos,user_photo_video_tags,user_checkins,friends_checkins"></fb:login-button>

Will open a facebook pop-up and after the authorization process the pop-up will close automatically and the auth.login event will be triggered, I would change the reload method window.location.reload(); to an ajax call to do whatever you are doing.

Upvotes: 4

Related Questions