im trying create login/logout mechanism using facebook. far i've managed edit default javascript sdk (with basic js knowledge) display logout link if user logged in. login button persists regardless of whether user logged in or not. here code:
<!doctype html> <html> <head> <title>facebook login javascript example</title> <meta charset="utf-8"> </head> <body> <script> // called results from fb.getloginstatus(). function statuschangecallback(response) { console.log('statuschangecallback'); console.log(response); // response object returned status field lets // app know current login status of person. // full docs on response object can found in documentation // fb.getloginstatus(). if (response.status === 'connected') { // logged app , facebook. testapi(); } else if (response.status === 'not_authorized') { // person logged facebook, not app. document.getelementbyid('status').innerhtml = 'please log ' + 'into app.'; } else { // person not logged facebook, we're not sure if // logged app or not. document.getelementbyid('status').innerhtml = 'please log ' + 'into facebook.'; } } // function called when finishes login // button. see onlogin handler attached in sample // code below. function checkloginstate() { fb.getloginstatus(function(response) { statuschangecallback(response); }); } window.fbasyncinit = function() { fb.init({ appid : '1467517133547158', cookie : true, // enable cookies allow server access // session xfbml : true, // parse social plugins on page version : 'v2.2' // use version 2.2 }); // we've initialized javascript sdk, call // fb.getloginstatus(). function gets state of // person visiting page , can return 1 of 3 states // callback provide. can be: // // 1. logged app ('connected') // 2. logged facebook, not app ('not_authorized') // 3. not logged facebook , can't tell if logged // app or not. // // these 3 cases handled in callback function. fb.getloginstatus(function(response) { statuschangecallback(response); }); }; // load sdk asynchronously (function(d, s, id) { var js, fjs = d.getelementsbytagname(s)[0]; if (d.getelementbyid(id)) return; js = d.createelement(s); js.id = id; js.src = "//connect.facebook.net/en_us/sdk.js"; fjs.parentnode.insertbefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // here run simple test of graph api after login // successful. see statuschangecallback() when call made. function testapi() { console.log('welcome! fetching information.... '); fb.api('/me', function(response) { console.log('successful login for: ' + response.name); document.getelementbyid('status').innerhtml = 'thanks logging in, ' + response.name + '!'; document.getelementbyid('logout-button').innerhtml = '<span id="fblogout" onclick="fblogout()"><a href="#"><span class="fb_button_text">logout</span></a></span>'; }); } </script> <!-- below include login button social plugin. button uses javascript sdk present graphical login button triggers fb.login() function when clicked. --> <fb:login-button scope="public_profile,email" onlogin="checkloginstate();"> </fb:login-button> <div id="status"> </div> <div id="logout-button"></div> <script> function fblogout() { fb.logout(function (response) { //do ever want here when logged out reloading page window.location.reload(); }); } </script> </body> </html>
i found solution. removing logout div altogether added autologoutlink="true" login button (removing div login also):
<fb:login-button autologoutlink="true" scope="public_profile,email" onlogin="checkloginstate();"> </fb:login-button> 
Comments
Post a Comment