facebook - Redirect URI using the Javascript SDK after authentication - Stack Overflow

admin管理员组

文章数量:1334133

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/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="/' 
  + 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="/' 
        + 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/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?

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/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./' 
  + 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./' 
        + 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/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?

• javascript
• facebook
• authentication
• oauth-2.0

Share Improve this question Follow edited Oct 23, 2011 at 11:10 ifaour 38.1k1212 gold badges7373 silver badges7979 bronze badges asked Oct 23, 2011 at 0:10 Matthieu McLarenMatthieu McLaren 22411 gold badge44 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.

本文标签： facebookRedirect URI using the Javascript SDK after authenticationStack Overflow