Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

email with facebook javascript api

I am trying to fetch facebook user email for my app. But when I query, the email address is returned as undefined. I am not getting how to deal with it.

Here is my code-

<body>
  <script>
    function statusChangeCallback(response) {
      console.log('statusChangeCallback');
      console.log(response);

      if (response.status === 'connected') {

        testAPI();
      } else if (response.status === 'not_authorized') {

        FB.login(function(response) {}, {
          scope: 'email'
        });
        document.getElementById('status').innerHTML = 'Please log ' +
          'into this app.';
      } else {
        FB.login(function(response) {}, {
          scope: 'email'
        });
        document.getElementById('status').innerHTML = 'Please log ' +
          'into Facebook.';
      }
    }

    function checkLoginState() {
      FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });
    }

    window.fbAsyncInit = function() {
      FB.init({
        appId: 'app id',
        cookie: true, // enable cookies to allow the server to access 

        xfbml: true, // parse social plugins on this page
        version: 'v2.1' // use version 2.1
      });

      FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });

    };

    (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 testAPI() {
      console.log('Welcome!  Fetching your information.... ');
      FB.api('/me', function(response) {
        alert(response.name);
        alert(response.email);
        console.log('Successful login for: ' + response.name);
        document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';
      });
    }
  </script>
  <fb:login-button perms="email" autologoutlink="true" onlogin="checkLoginState();">
  </fb:login-button>
  <div id="status">
  </div>
</body>
like image 548
swapnil gandhi Avatar asked Jan 10 '23 01:01

swapnil gandhi


2 Answers

@Tobi this really saved my day :

FB.api('/me

Replaced by

FB.api('/me?fields=id,name,email,permissions', function(response) {
        console.log(response.name);
        console.log(response.email);
    });

However, I don't understand why the scope of the following code (which is in the facebook documentation) isn't working

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">

like image 69
Kilowog Avatar answered Jan 11 '23 14:01

Kilowog


You should use the scope attribute instead of perms in the Login Button, so the permission cannot be fetched. Try

<fb:login-button scope="public_profile,email" autologoutlink="true" onlogin="checkLoginState();">
</fb:login-button>

See:

  • https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.2#quickstart
like image 22
Tobi Avatar answered Jan 11 '23 14:01

Tobi