Быстрый и грязный пример Facebook JS oAuth

Это очень простой код FB oAuth, который я использовал в проекте, над которым недавно работал. Это действительно простая работа, но это может помочь кому-то начать что-то большое. Это в основном будет аутентифицировать пользователя и импортировать пользовательские данные, такие как электронная почта, в текстовое поле.

Добавьте их в тело с помощью тегов ‹script›.

window.fbAsyncInit = function () {
    // init the FB JS SDK
    FB.init({
        appId: 'YOUR APP ID',
        // App ID from the app dashboard
        channelUrl: '//mysite.local/',
        // Channel file for x-domain comms
        status: true,
        // Check Facebook Login status
        xfbml: true // Look for social plugins on the page
    });
    // Additional initialization code such as adding Event Listeners goes here
};

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

Это будет включать библиотеку JS и сделает объект FB доступным для использования.

Далее создайте div.

<p><div class="user-info"></div><a class="import-facebook" href="#">Import E-mail from Facebook</a></p>

Теперь добавьте ниже JS, чтобы эта ссылка работала.

$('.import-facebook').click(function () {
    FB.login(function (response) {
        if (response.authResponse) {
            console.log('Welcome!  Fetching your information.... ');
            FB.api('/me', function (response) {
                console.log('Good to see you, ' + response.name + '.');
                console.log(response);
                var profile_pic = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
                $('.user-info').html(profile_pic);
                $('.import-facebook').hide();
            });
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    }, {
        scope: 'email'
    });
    return false;
});

Первоначально опубликовано на www.heididev.com.