diablofong / loopback-example-passport

LoopBack example for facebook login

loopback-example-passport

A tutorial for setting up a basic passport example.

• Overview
• Prerequisites
• Client ids/secrets from third party
• Tutorial

Overview

LoopBack example for loopback-passport module. It demonstrates how to use LoopBack's user/userIdentity/userCredential models and passport to interact with other auth providers.

• Log in or sign up to LoopBack using third party providers (aka social logins)
• Link third party accounts with a LoopBack user (for example, a LoopBack user can have associated facebook/google accounts to retrieve pictures).

Prerequisites

Before starting this tutorial, make sure you have the following installed:

• Node
• NPM
• StrongLoop Controller

Client ids/secrets from third party

• facebook
• google
• twitter

Tutorial - Facebook

1. Clone the application

$ git clone [email protected]:strongloop/loopback-example-passport.git
$ cd loopback-example-passport
$ npm install

2. Get your client ids/secrets from third party(social logins)

• To get your app info: facebook
• Click on My Apps, then on Add a new App
• Pick the platform [iOS, Android, Facebook Canvas, Website]
• Select proper category for your app.
• Write your app name and "Site URL".
• Skip the quick start to get your "App ID" and "App Secret", which is in "Settings"
• Your app may not work if the settings are missing a contact email and/or "Site URL".
• if you are testing locally, you can simply use localhost:[port#] as your "Site URL".

3. Create providers.json

• Copy providers.json.template to providers.json
• Update providers.json with your own values for clientID/clientSecret.

"facebook-login": {
  "provider": "facebook",
  "module": "passport-facebook",
  "clientID": "xxxxxxxxxxxxxxx",
  "clientSecret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "callbackURL": "/auth/facebook/callback",
  "authPath": "/auth/facebook",
  "callbackPath": "/auth/facebook/callback",
  "successRedirect": "/auth/account",
  "failureRedirect": "/login",
  "scope": ["email"],
  "failureFlash": true
},
"facebook-link": {
  "provider": "facebook",
  "module": "passport-facebook",
  "clientID": "xxxxxxxxxxxxxxx",
  "clientSecret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "callbackURL": "/link/facebook/callback",
  "authPath": "/link/facebook",
  "callbackPath": "/link/facebook/callback",
  "successRedirect": "/auth/account",
  "failureRedirect": "/login",
  "scope": ["email", "user_likes"],
  "link": true,
  "failureFlash": true
}

4. Facebook profile info

If you require additional information from a Facebook profile such as a name or a gender, you can obtain it by updating node_modules\passport-facebook\lib\strategy.jsand replacing:

this._profileURL = options.profileURL || 'https://graph.facebook.com/me';

with

this._profileURL = options.profileURL ||
    'https://graph.facebook.com/v2.2/me?fields=first_name,gender,last_name,link,locale,name,timezone,verified,email,updated_time';

5. Data file

• If you need to see your account info for testing purposes, in server\datasources.json, add:

"file":"db.json"

after

"connector": "memory",

• The account info will be saved into this file.

6. Run the application

$ node .

• Open your browser to http://localhost:3000
• Click on 'Login with Facebook'.
• Sign up using a local account, then link to your Facebook account.

---

More LoopBack examples