CODEWITHSUNDEEP
facebook-graph-apifacebook-javascript-sdk
Visual
Visual

Reputation: 13

facebook authentication to auto popup instead click button

I've tried the fowlling code 

https://developers.facebook.com/blog/post/2011/07/21/updated-javascript-sdk-and-oauth-2-0-roadmap/

It works to authenticate now i want to auto popup once page is loaded instead of having people click ont he button again

I edited and was able to trigger the autopopup , but that only works if i keep the button How can i remove the button and still have it work?

this is what i've done: 

<!DOCTYPE html> 
<html xmlns:fb="https://www.facebook.com/2008/fbml">
  <head> 
    <title> 
      New JavaScript SDK
    </title> 
  </head> 
<body> 

<div id="fb-root"></div>
<h2>Updated JS SDK example</h2><br />
<div id="user-info"></div>
<p><button id="fb-auth">Login</button></p>

<script>
window.fbAsyncInit = function() {
  FB.init({ appId: 'xxx', 
        status: true, 
        cookie: true,
        xfbml: true,
        oauth: true});

  function updateButton(response) {
    var button = document.getElementById('fb-auth');

    if (response.authResponse) {
      //user is already logged in and connected
      var userInfo = document.getElementById('user-info');
      FB.api('/me', function(response) {
        userInfo.innerHTML = '<img src="https://graph.facebook.com/' 
      + response.id + '/picture">' + response.name;
        button.innerHTML = 'Logout';
      });
      button.onclick = function() {
        FB.logout(function(response) {
          var userInfo = document.getElementById('user-info');
          userInfo.innerHTML="";
    });
      };
    } else {
      //user is not connected to your app or logged out
      //button.innerHTML = 'Login';
     // button.onclick = function() {
      FB.login(function(response) {
      if (response.authResponse) {
            FB.api('/me', function(response) {
          var userInfo = document.getElementById('user-info');
          userInfo.innerHTML = 
                '<img src="https://graph.facebook.com/' 
            + response.id + '/picture" style="margin-right:5px"/>' 
            + response.name;
        });    
          } else {
            //user cancelled login or did not grant authorization
          }
        }, {scope:'email'});    
     }
     //}
  }

  // run once with current status and whenever the status changes
  FB.getLoginStatus(updateButton);
  FB.Event.subscribe('auth.statusChange', updateButton);    
};

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

</script>
</body> 
</html>

Upvotes: 0

Views: 1672

Answers (2)

ssi-anik
ssi-anik

Reputation: 3704

Here's the code. I think the above code should work too. 

<script>
window.fbAsyncInit = function(){
    FB.init({ 
        appId: '1486670758257443', 
        status: true, 
        cookie: true,
        xfbml: true,
        oauth: true,
        version    : 'v2.1'
    });
    fbLoginStatus();
};

(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'));


function fbLoginStatus(){
    FB.getLoginStatus(function(response) {
        console.log(response);
        if (response.status === 'connected') {
            var access_token =   FB.getAuthResponse()['accessToken'];
            console.log(access_token);
        } else {
            fblogin();
        }
    });
}

function fblogin(){
    FB.login(function(response) {
        if (response.authResponse) {
            var access_token =   FB.getAuthResponse()['accessToken'];
            console.log(access_token);
        } else {
            console.log('Authorization failed.');
        }
    },{ //permissions
        scope: 'email'
    });
}
</script>

and one thing to mention that, according to facebook doc, the popup should be opened by click event. Here's what they're saying.

Calling FB.login results in the JS SDK attempting to open a popup window. As such, this method should only be called after a user click event, otherwise the popup window will be blocked by most browsers.

Upvotes: 0

Jay Hardia
Jay Hardia

Reputation: 746

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


window.fbAsyncInit = function() {
  FB.init({ appId: 'xxx', 
    status: true, 
    cookie: true,
    xfbml: true,
    oauth: true});
fbLoginStatus();
});
function fbLoginStatus()
{
    FB.getLoginStatus(function(response) {
        console.log(response);
        if (response.status === 'connected') {
            access_token =   FB.getAuthResponse()['accessToken'];
                         myinfo();
        } else {
            fblogin();
        }
    });
}

function fblogin()
{
FB.login(function(response) {
    if (response.authResponse) {
        console.log(response);
         access_token =   FB.getAuthResponse()['accessToken'];
                     myinfo();

    } else {
        console.log('User cancelled login or did not fully authorize.');
    }
}, {scope: 'email'});
}
function myinfo()
{
 FB.api('/me', function(response) {
                userid = response.id ;
                alert(userid);
                user_name = response.name;
                alert(user_name);
            });
}
</script>

Try this code, it will work exactly what you want.

Upvotes: 1

Related Questions