使用ajax-jquery登录Facebook javascript [英] Facebook javascript login using ajax-jquery

查看:143
本文介绍了使用ajax-jquery登录Facebook javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用ajax,php创建fb javascript日志.它可以正常工作并从Facebook获取所需的数据.但是,一旦用户单击登录名,登录完成后页面就会重新加载两次,并且会显示数据.这是我的代码.谁能指出错误或链接在哪里?

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>

推荐答案

尝试一下

更改

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

}

这篇关于使用ajax-jquery登录Facebook javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆