Page Contents

loopback-example-passport

⚠️ This LoopBack 3 example project is no longer maintained. Please refer to LoopBack 4 Examples instead. ⚠️

A tutorial for setting up a basic passport example.

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:

Client ids/secrets from third party

Tutorial - Facebook

1. Clone the application

$ git clone git@github.com: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

In a recent update, Facebook no longer returns all fields by default (email, gender, timezone, etc). If you need more information, modify the providers template.

The current template contains:

"profileFields": ["gender", "link", "locale", "name", "timezone", "verified", "email", "updated_time"],

We recommend modifying the fields to suit your needs. For more information regarding the providers template, see http://loopback.io/doc/en/lb2/Configuring-providers.json.html.

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 ‘Log in’ (in the header, on the rigth)
  • Click on ‘Login with Facebook’.
  • Sign up using a local account, then link to your Facebook account.

Tutorial - LDAP

1. Clone the application

Clone the application as describe above.

2. Create providers.json

  • Copy providers.json.template to providers.json
  • Update providers.json with your own values for profileAttributesFromLDAP and server section
  "ldap": {
    "provider": "ldap",
    "authScheme":"ldap",
    "module": "passport-ldapauth",
    "authPath": "/auth/ldap",
    "successRedirect": "/auth/account",
    "failureRedirect": "/ldap",
    "session": true,
    "failureFlash": true,
    "profileAttributesFromLDAP": {
      "login": "uid",
      "username": "uid",
      "displayName": "displayName",
      "email": "mail",
      "externalId": "uid"
    },
    "server":{
      "url": "ldap://ldap-server:1234",
      "searchBase": "dc=domain,dc=fr",
      "searchFilter": "(cn=)"
    }
  },

Here, in profileAttributesFromLDAP section, we have configured the mapping to get

  • login, username and extranalIdfrom LDAP’s uid,
  • displayNamefrom LDAP’s displayName
  • emailfrom LDAP’s mail

6. Run the application

$ node .
  • Open your browser to http://localhost:3000
  • Click on ‘Log in’ (in the header, on the rigth)
  • Click on ‘Login with ldap account’
  • Enter credential from your LDAP account and click ‘Submit’ to see your LDAP data

More LoopBack examples