CODEWITHSUNDEEP
javascriptfacebookauthenticationoauth-2.0
Matthieu McLaren
Matthieu McLaren

Reputation: 224

Redirect URI using the Javascript SDK after authentication

So I've set up a basic login/authentication flow on the home page of my site. After the authentication dialog, I want to redirect them to another page on my site. I've tried several variations of the existing code, changing the site url under basic settings in the developer app, trying different oauth flows, and still, it simply redirects to the same homepage they logged in on. I know this sounds tremendously easy but there are so many different authentication flows and implementations that it's a bit confusing. 

   <div id="fb-root"></div>
   <script>
   window.fbAsyncInit = function() {
FB.init({
  appId      : 'XXXXXXXXXX', // App ID
  channelURL : '//localhost/dataweavr/channel.php', // Channel File
  status     : true, // check login status
  cookie     : true, // enable cookies to allow the server to access the session
  oauth      : true, // enable OAuth 2.0
  xfbml      : true  // parse XFBML
  });

  // Additional initialization code here
  };

 // Load the SDK Asynchronously
 (function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 d.getElementsByTagName('head')[0].appendChild(js);
 }(document));
 </script>

And then some more fun...

<div id="fb-root"></div>
<div id="user-info"></div>
<button id="fb-auth">Login</button>

<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXXXXXXXXXXXXXXXXXX', 
    status: true, 
    cookie: true,
    xfbml: true,
    oauth: true});

function updateButton(response) {
var button = document.getElementById('fb-auth');

if (response.authResponse) {
  //user is already logged in and connected
  var userInfo = document.getElementById('user-info');
  FB.api('/me', function(response) {
    userInfo.innerHTML = '<img src="https://graph.facebook.com/' 
  + response.id + '/picture">' + response.name;
    button.innerHTML = 'Logout';
  });
  button.onclick = function() {
    FB.logout(function(response) {
      var userInfo = document.getElementById('user-info');
      userInfo.innerHTML="";
});
  };
} else {
  //user is not connected to your app or logged out
  button.innerHTML = 'Login';
  button.onclick = function() {
    FB.login(function(response) {
  if (response.authResponse) {
        FB.api('/me', function(response) {
      var userInfo = document.getElementById('user-info');
      userInfo.innerHTML = 
            '<img src="https://graph.facebook.com/' 
        + response.id + '/picture" style="margin-right:5px"/>' 
        + response.name;
    });    
      } else {
        //user cancelled login or did not grant authorization
      }
    }, {scope:'email,user_birthday'});      
  }
}
}

  // run once with current status and whenever the status changes
  FB.getLoginStatus(updateButton);
  FB.Event.subscribe('auth.statusChange', updateButton);    
};

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

And another unrelated issue. Why do I only have a normal button popup? How can I get the SDK to render a Facebook login button rather than just a simple login button?

Upvotes: 4

Views: 12089

Answers (1)

chuysbz
chuysbz

Reputation: 1500

You should be able to redirect the user after the login response. Under these lines:

FB.login(function(response) {
  if (response.authResponse) {

Add something like this:

window.top.location = "http://page_to_redirect";

The button thing, hmm... well, you are writing a simple login button in the html, if you want a login button, change this: Login

To this:

<fb:login-button></fb:login-button>

Hope it helps.

Upvotes: 4

Related Questions