在HTML页面中加载我的facebook用户名和图片

时间:2014-09-22 13:37:18

标签: android facebook cordova

我使用phonegap进行开发和Android应用程序。我正在学习本教程https://github.com/phonegap-build/FacebookConnect/tree/962eb0a1c07935ff813e28aa9eaa5581f2e10416,并成功连接到Phonegap中的Facebook,我在我的(Index.html)中显示我的Facebook用户名和图片,并将我的信息发送到服务器。 在这个页面(index.html)中,我有一个按钮,可以让我转到另一个HTML页面(Profile.html)。我试图在这个页面(Profile.html)以及(Index.html)

上显示我的facebook信息

以下是我的JS文件中的代码,让我在Indx.HTML页面连接到Facebook后显示我的信息,让我也将这些信息发送到服务器:

function handleStatusChange(session) 
{
 console.log('Got the user\'s session: ' + JSON.stringify(session));
 alert('Got the user\'s session: ' + JSON.stringify(session));

if (session.authResponse) 
 {
//document.body.className = 'connected';

//Fetch user's id, name, and picture
FB.api('/me', 
{
  fields: 'name, picture,first_name,last_name,email'
},
function(response) 
{
  if (!response.error) 
  {
    document.body.className = 'connected';

    user = response;

    console.log('Got the user\'s name and picture: ' + JSON.stringify(response));
    console.log('FB name, ' + response.name);
    console.log(('FB picture, ' + response.picture.data.url));
   // alert('Fb Id,'+response.id);
    //alert('Email'+response.email);
   // alert('FB Last name'+response.first_name);
   // alert('FB name, ' + response.last_name);



    //Update display of user name and picture
    if (document.getElementById('user-name')) 
    {
      document.getElementById('user-name').innerHTML = user.name;
    }
    if (document.getElementById('user-picture')) 
    {
      document.getElementById('user-picture').src = user.picture.data.url;
    }

    var callDataLogin = JSON.stringify({'serviceName':"global_functions", 'methodName':'login',"parameters":[response.id,response.last_name,response.first_name,response.email]});
    $.post('Server URL', callDataLogin, function(resp){}).done(function(data) 
    {               
        console.log(data);
        //alert(data);
        //alert(" Send User Facebook info to server , Login");
    });               
  }
  else 
  {
    document.body.className = 'not_connected';
    console.log('Error getting user info: ' + JSON.stringify(response.error));

    if (response.error.error_subcode && response.error.error_subcode == "458") 
    {
      setTimeout(function() 
              {
        alert("The app was removed. Please log in again.");
      }, 0);              
    }
    logout();         
  }

  clearAction();
});
}
else  {
 document.body.className = 'not_connected';

 clearAction();
 }   
 }

这是我的Index.html页面中的代码,让我显示我的Facebook用户信息:

<div id="page-root" class="page">
    <div class="show_when_connected">
    <div id="welcome"><img id="user-picture" /><br /><span id="user-name"></span></div>
    </div> 

我还将此代码添加到我的Profile.html页面以显示我的Facebook用户信息

<div id="page-root" class="page">
    <div class="show_when_connected">
    <div id="welcome"><img id="user-picture" /><br /><span id="user-name"></span></div>
    </div>  

但它在我的Profile.html中没有像在我的Index.html中那样显示任何内容 谢谢你的帮助

//////////////////////////////////////// UPDATE ////// ///////////////////////////////////////

在我的js文件中这里是我放的代码

<script>
  //get the id
    var getFbId=sessionStorage.getItem('Fbid');
   //set the id html 
   document.getElementById('idget').innerHTML =getFbId;

   var getFbName=sessionStorage.getItem('FBName');
   //set the Name html 
   document.getElementById('Nameget').innerHTML =getFbName;

  var getFbPicture=sessionStorage.getItem('FBPicture');
  //set the Picture html 
  document.getElementById('Pictureget').innerHTML =getFbPicture;

 </script>

在我的Profile.html中这里是我使用的代码:

<div id="idget"></div>
<div id="Nameget"></div>
<img id="Pictureget">

1 个答案:

答案 0 :(得分:0)

您只需在本地存储/会话存储中设置您的fb凭据,然后就可以在任何您想要的页面中进行检索。

功能(响应)     {

    if (!response.error) 
      {
        document.body.className = 'connected';

        user = response;

        console.log('Got the user\'s name and picture: ' + JSON.stringify(response));
        console.log('FB name, ' + response.name);
        console.log(('FB picture, ' + response.picture.data.url));
       //set the id in session storage/localstorage
       sessionStorage.setItem('Fbid',response.id);
      //For localstorage
      window.localStorage.setItem( 'Fbid', response.id);
       }
}

通过这种方式在另一个html页面中获取此值

    //get the id from session
     var getFbId=sessionStorage.getItem('Fbid');
   //get the id from localstorage
   var fromLocalStorage=window.localStorage.getItem( 'Fbid' );
    //set the id html 
    document.getElementById('idget').innerHTML =getFbid;