Login with Facebook, the pure flow.
Jul 30, 2017 · 1 min read
Step #1: Include the Facebook SDK for JavaScript:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.10'
});
FB.AppEvents.logPageView();
};
(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'));
</script>Step #2: Display a “Facebook Login Button”:
<div class="fb-login-button" data-size="large" data-button-type="continue_with" data-scope="public_profile,email" data-onlogin="checkLoginState();"></div>Step #3: Implement “checkLoginState” function, send the “authResponse.accessToken” to server-side:
function checkLoginState() {
FB.getLoginStatus(function (response) {
console.log(response.authResponse.accessToken);
});
}Step #4: In server-side, send a request to Facebook to verify the access token:
GET https://graph.facebook.com/me/?access_token={accessToken}{
"name": "Nguyên Đinh",
"id": "747778795402188"
}
Step #5: (Optional) In server-side, request an access token from Facebook for the server-side itself.
GET https://graph.facebook.com/oauth/access_token?client_id={APP_ID}&client_secret={APP_SECRET}&redirect_uri={APP_DOMAIN}&grant_type=client_credentials{
"access_token": {access_token},
"token_type": "bearer"
}
Step #6: Gathering information of the user in step #4 with access token in step #5:
GET https://graph.facebook.com/{user_id}?access_token={access_token}&fields=email,name,pictureThat’s it!
