问题
I am trying to create fb javascript loging using ajax, php. It works and fetch the required data from facebook. But once user click on login then page gets reloaded twice after login completes and beofre showing data. Here is my code. can anyone point out where is the bug or any link?
<?php
session_start();
$appId = '669340023079549';
$appSecret = '390c04c60d19f38e113ea44f268aca44'; // Facebook App Secret
$return_url = 'http://yoursite.com/connect_script/'; //path to script folder
$fbPermissions = 'publish_stream,email'; //more permissions : https://developers.facebook.com/docs/authentication/permissions/
?>
<!DOCTYPE html>
<html xmlns:f b="http://www.facebook.com/2008/fbml" xml:lang="en-gb" lang="en-gb" ><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<title>JS/Ajax Facebook Connect</title>
<script>
function AjaxResponse()
{
// alert("4");
var myData = 'connect=1'; //For demo, we will pass a post variable, Check process_facebook.php
$.ajax({
type: "POST",
url: "process_facebook.php",
dataType:"html",
data:myData,
success:function(response){
// alert(response);
$("#results").html('<fieldset style="padding:20px">'+response+'</fieldset>'); //Result
}, error:function (xhr, ajaxOptions, thrownError){
$("#results").html('<fieldset style="padding:20px;color:red;">'+thrownError+'</fieldset>'); //Error
} }); }
function LodingAnimate() //Show loading Image
{
//alert("3");
$("#LoginButton").hide(); //hide login button once user authorize the application
$("#results").html('<img src="ajax-loader.gif" /> Please Wait Connecting...'); //show loading image while we process user
}
</script></head><body>
<?php
if(!isset($_SESSION['logged_in']))
{
?>
<div id="results"> </div>
<div id="LoginButton">
<div class="fb-login-button" onlogin="return CallAfterLogin();" size="medium" scope="<?php echo $fbPermissions; ?>">Connect With Facebook</div>
</div>
<?php
}
?>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
// alert("1");
FB.init({
appId: '<?php echo $appId; ?>',
cookie: true,
xfbml: true,
channelUrl: '<?php echo $return_url; ?>channel.php',
oauth: true});};
(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);
}());
function CallAfterLogin(){
//alert("2");
FB.login(function(response) {
if (response.status === "connected")
{
LodingAnimate(); //Animate login
FB.api('/me', function(data) {
if(data.email == null)
{
//Facbeook user email is empty, you can check something like this.
alert("You must allow us to access your email id!");
ResetAnimate();
}else{
AjaxResponse();
}
});
}
return true;
});
}
</script>
</body>
</html>
回答1:
Try this
Change
<div class="fb-login-button" onlogin="javascript:CallAfterLogin();" size="medium" scope="<?php echo $fbPermissions; ?>">Connect With Facebook</div>
to
<div class="fb-login-button" onlogin="return CallAfterLogin();" size="medium" scope="<?php echo $fbPermissions; ?>">Connect With Facebook</div>
function CallAfterLogin(){
//alert("2");
FB.login(function(response) {
if (response.status === "connected")
{
LodingAnimate(); //Animate login
FB.api('/me', function(data) {
if(data.email == null)
{
//Facbeook user email is empty, you can check something like this.
alert("You must allow us to access your email id!");
ResetAnimate();
}else{
AjaxResponse();
}
});
}
return true;
});
}
来源：https://stackoverflow.com/questions/17827633/facebook-javascript-login-using-ajax-jquery