Login using Facebook

What You'll Need

Backbench account - Sign Up, the personal account will always remain free to use.

Facebook Developer account - Create an App on Facebook Developer account.

Demo

Prerequisites for the app

  1. Setting up Facebook Login: Inside Facebook App click on Setup button below Facebook Login dialog. Now choose Web, for next prompt you'll be needing a Site URL. For that you can copy paste the URL mentioned in endpoint section of backbench.

  2. Customizing Login Settings: Click on settings on Facebook app page, now it is required to put a valid redirect Oauth for the login. (This is the URI, where you'll be redirecting after successful sign in to Facebook) For the time being, you can put the endpoint that you copied above with /fb. Then you can paste it in the field given on Facebook. The Oauth redirect URI will look like https://USERID-BENCHID.backbench.io/fb

  3. Making Facebook App Live: To switch from development to production mode, there is a toggle switch on the top of the app, you can switch it to on, to allow login from multiple accounts.

  4. Make a note of variables: Have of a note of following variables from your apps Basic Settings. APP-ID, APP-SECRET AND REDIRECT-URI.

Frontend

  1. Select +, in the upper right corner of File manager to create a html file . For example, say fb.html and select CREATE or hit Enter.

  2. Copy and paste the code module from below.

  3. Replace APP_ID, REDIRECT_URI then hit save. (step-4 in prerequisites)

<!doctype html>
<html>
<head>
</head>
<body>
    <h1>Login using Facebook</h1><br><br>
    <a href="https://www.facebook.com/v2.12/dialog/oauth?app_id=APP_ID&reponse_type=token&redirect_uri=REDIRECT_URI&auth_type=rerequest&scope=email">Login with Facebook </a>
</body>
</html>

Backend

  1. Select +, in the upper right corner to create a Module. For example, say "fb.js" and select CREATE or hit Enter.

  2. Copy and paste the code module from below.

  3. Replace APP_ID, APP_SECRET, REDIRECT_URI then hit save.

  4. Now map this saved module, to an endpoint name /fb. (in endpoint section)

const request = require("request");
module.exports.endpoint = function(req, cb) {
    request("https://graph.facebook.com/v2.12/oauth/access_token?app_id=APP_ID&redirect_uri=REDIRECT_URI&app_secret=APP_SECRET&code="+req.query.code,
        function(error, response, body) {
            if (error) {
                cb({code: error});
            } else {
             var token = JSON.parse(body).access_token; 
             request("https://graph.facebook.com/v2.11/me?fields=name&access_token="+token,
                function(error, reponse, body) {
                    if (error) {
                        cb(error);
                    } else {
                        var info = JSON.parse(body);
                        bb.log(info.name + " logged in!");
                        cb(undefined, {
                            access_token: token,
                            username: info.name
                        });
                    }
                });
        }
    });
};

For Node.js App:

  1. Select +, in the upper right corner to create a Module. For example, say "package.json" and select CREATE or hit Enter.

  2. Copy and paste the code module from below.

{
    "dependencies": { 
        "request": "^2.88.0"
    }
}

A package.json file lists the packages that your project depends on. allows you to specify the versions of a package that your project can use using semantic versioning rules.

User Scopes

scope should be a comma or space separated list of Permissions to request from the person using your app.

For example to access to a subset of items that are part of a person's public profile. A person's public profile refers to the following properties on the user object by default:

  • id

  • cover

  • name

  • first_name

  • last_name

  • age_range

  • link

  • gender

  • locale

  • picture

  • timezone

  • updated_time

  • verified

<a href="https://www.facebook.com/v2.12/dialog/oauth?client_id=CLIENT_ID&reponse_type=token&redirect_uri=Redirect_uri&auth_type=rerequest
&scope=list of scopes in comma separated">Login with Facebook </a>

Checking Login Status

A Manually Built Login must create their own way of storing when a person has logged in, and when that indicator is not there, proceed on the assumption that they are logged out. If someone is logged out, then your app should redirect them to the Login dialog at an appropriate time — for example if they click a login button.

Logout from Facebook

You can log people out of your app by removing/deleting the stored access token from your app.

For a comprehensive guide see, Official Doc.

Previous3rd Party IntegrationsNextLogin using Google

Last updated