Facebook的JavaScript的使用Ajax的jQuery的登录(Facebook java

2019-10-29 04:38发布

我试图登录电子的JavaScript使用Ajax创建FB,PHP。 它的工作原理,并从Facebook获取所需的数据。 但是,一旦用户点击登录,然后登录完成后,页面重新加载得到两次beofre显示数据。 这里是我的代码。 任何人都可以指出哪里是错误或什么联系呢?

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

Answer 1:

尝试这个

更改

<div class="fb-login-button" onlogin="javascript:CallAfterLogin();" size="medium" scope="<?php echo $fbPermissions; ?>">Connect With Facebook</div>

<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;
    });  

}


文章来源: Facebook javascript login using ajax-jquery