Update Login with Facebook API V2

Key Summary

This article provides a step-by-step guide on implementing Facebook Login using the JavaScript SDK v2.1, enabling developers to integrate social login functionality into their applications. It includes code snippets and explanations for setting up the SDK, handling user authentication, and fetching user data. Key points include:

window.fbAsyncInit = function() {

 FB.init({

   appId: ‘YOUR_APP_ID’,

   cookie: true, // Enable cookies for session access

   xfbml: true, // Parse social plugins

   version: ‘v2.1’ // Use API 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);

function fb_login() {

 FB.login(function(response) {

   if (response.authResponse) {

     console.log(‘Welcome! Fetching your information…. ‘);

     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);

       // Store data in database

     });

   } else {

     console.log(‘User cancelled login or did not fully authorize.’);

   }

 }, {

   scope: ‘publish_stream,email,read_friendlists’ // Requested permissions

 });

Read More:

Update Why Startups Should Consider Flutter for Mobile App Development?

Login with Facebook API V2 is an article sent to you by the InApps editorial team. Hope readers will have more useful knowledge at www.inapps.net

You are viewing the article: 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.

Read More:

Update Scoped Storage in Android 10- All You Need to Know

Below is the full working code.

|

|

|

|

|

|

|

|

|

Contact us: www.inapps.net

Rate this post