Login with Facebook API V2

Sep 12th, 2014

Login with Facebook API V2

In this blog, we will explain how to implement login with facebook using Javascript SDK v2.1.

window.fbAsyncInit = function() {
FB.init({
appId : ‘YOUR_APP_ID’,
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : ‘v2.1’ // use version 2.1
});
};
(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’));

By help of above code, we can load sdk and initialize required parameters.

We have created a function which will call facebook login API, fetch response and allows developer to write code to handle different success/failure cases.

function fb_login(){
FB.login(function(response) {
if (response.authResponse) {
console.log(‘Welcome! Fetching your information…. ‘);
//console.log(response); // dump complete info
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api(‘/me?fields=id,name,friendlists’, function(response) {
user_email = response.email; //get user email
console.log(response);
alert(user_email);
// you can store this data into your database
});
} else {
//user hit cancel button
console.log(‘User cancelled login or did not fully authorize.’);
}
}, {
scope: ‘publish_stream,email,read_friendlists’
});
}

In the above example, we have passed a scope parameter, by which Facebook will identify and ask all required permissions to user.

Facebook by default gives access to email, public_profile and user_friends permission. If the developer wants to get other information, he has to get them reviewed from Facebook for the app using the App settings tab. Unless it is reviewed and approved by Facbook, this parameter will not work as expected.

In FB.api, we have passed query parameters. FB will only return these many values in response if passed.

Facebook has announced stable support for at least 2 years for API v2.

Below is the full working code.

<title>Facebook Login JavaScript Example</title>
<meta charset=”UTF-8″>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘572516629527309’,
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : ‘v2.1’ // use version 2.1
});
};
(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 fb_login(){
FB.login(function(response) {
if (response.authResponse) {
console.log(‘Welcome! Fetching your information…. ‘);
//console.log(response); // dump complete info
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api(‘/me?fields=id,name,friendlists’, function(response) {
user_email = response.email; //get user email
console.log(response);
alert(user_email);
// you can store this data into your database
});
} else {
//user hit cancel button
console.log(‘User cancelled login or did not fully authorize.’);
}
}, {
scope: ‘publish_stream,email,read_friendlists’
});
}
</script>
<a href=”#” onclick=”return fb_login();”>
<img src=”http://www.myclientpage.com/images/fb_login.gif”>
</a>
<div id=”status”></div>

32

Share

Let's Discuss Your Project

Get free consultation and let us know your project idea to turn
it into an amazing digital product.

Let’s talk

NEWS & BLOG

Releted Blogs

Seven Wearable App Technology Trends to Watch Out for in 2022

Hire Developer Dec 28th, 2020

Seven Wearable App Technology Trends to Watch Out for i...

Read more
How On-demand Grocery Delivery App Benefits Your Store and Expands Business

Hire Developer Jun 9th, 2020

How On-demand Grocery Delivery App Benefits Your Store ...

Read more
How On-demand Food Delivery App Help Your Restaurant Business to Grow

Hire Developer May 20th, 2020

How On-demand Food Delivery App Help Your Restaurant Bu...

Read more

INQUIRY

Let's get in touch

UNITED STATES

31236 Meadowview Square,
Delmar, DE 19940, USA

Sales: +1 (732) 927-5544

UNITED KINGDOM

13 Layton Road, Hounslow,
London, TW3 1YJ

Sales: +44 7404 607567

AHMEDABAD

A-201, The Capital, Science City Rd, Ahmedabad, Gujarat 380060.

Sales: +91 635-261-6164