Chinese Documentation : Tutorial: third-party login

Icon

The following is duplicated from loopback-example-passport

    loopback-example-passport

    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

    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