Facebook api gives facility to login on single click. In todays fast life, very less people want to fill credential everytime on any website. So now a days, social login generates maximum market.
Facebook make it very simple to use. To create facebook login in your website, we must have facebook developer account. After it you have to create an app in facebook. In app dashboard you will get an appId, it will be used for facebook login code.
Facebook api gives facility to login on single click. In todays fast life, very less people want to fill credential everytime on any website. So now a days, social login generates maximum market.
Facebook make it very simple to use. To create facebook login in your website, we must have facebook developer account. After it you have to create an app in facebook. In app dashboard you will get an appId, it will be used for facebook login code.
Previously, facebook donot have review policy so whenever your works gets completed, you can make it live, but now facebook has many restrictions. When you give facebook login, you have to set permission for your app. If you ask for basic permission, you can make it live without review. Basic permission includes public profile, email and user_friends. But if you ask for more permission, you have to send it for review to facebook. You can see list of permissions.
Here we use facebook javascript sdk for facebook login through its button
Note: Generally this code will not work with localhost. You need to have server, to test this code.
Follow following steps to implement it.
1. Firstly we load facebook javascript asynchronously, after body tag in html file
<body>
<script>
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
2. Provide facebook appId to use particular app permissions
window.fbAsyncInit = function() {
FB.init({
appId : '201794826616225', //Your appId comes here
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.5' // use graph api version 2.5
});
3. We have already initialized javascript sdk. We need to know the login status of person visiting our website. Following function give its details
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
4. On button click, check for login, whether it is already logged in or not.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
5. Function used in login status. It can be
i. Logged into your app ('connected')
ii. Logged into Facebook, but not your app ('not_authorized')
iii. Not logged into Facebook and can't tell if they are logged into your app or not.
//This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log(response);
// The response object is returned with a status field that lets the app know the current login status of the person.
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
}
}
}
6. Fetch information and put it in db
// Here we run a very simple test of the Graph API after login is successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML ='Thanks for logging in, ' + response.name + '!';
});
}
</script>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>
<div id="status"></div>