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/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    function testAPI() {
      console.log('Wele!  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>

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/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    function testAPI() {
      console.log('Wele!  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>

Share Improve this question edited Jan 22, 2015 at 8:08 Sahil Mittal 20.8k12 gold badges67 silver badges91 bronze badges asked Jan 21, 2015 at 11:28 swapnil gandhi 8161 gold badge20 silver badges40 bronze badges

Are you able to get the email using Graph API Explorer? – Sahil Mittal Commented Jan 22, 2015 at 8:11

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

@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();">

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./docs/facebook-login/login-flow-for-web/v2.2#quickstart

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

email with facebook javascript api - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)