SignUp with Facebook using VueJS

Sign-in / Sign-up with Facebook Flow

The Sign-in flow with Facebook we’re going to cover, however I’ll split this up into two scenarios:

• Scenario-1: thats the flow you see there, frontend is Vue, Backend is Sails.js, authentication is happening at some parts on both sides
• Scenario-2: We handle purely on the Frontend and just allow talking to the Sails.js backend when auth was successful

Configure Facebook OAuth

Before we get started, we have to make sure Facebook is properly configured for your new app. Visit the Facebook API Console to obtain OAuth credentials such as a App ID that are known to Facebook and our application.

• Log into the Facebook Developer Console
• Click the Create App from the login menu
• Give it a project name that you want

Add app name

• Now you have to add available Product. We need to add Product in the bottom of the page.
• Click the Setup button for Facebook Login and Analytics

Add Product for our app

• We have to select the platform for this app

Select the platform for the app

Saving the callback url

• We have click Next button and continue to setup the app
• In left menu we have to update the Basic settings for the app (App name, Privacy link, terms and condition link and logo etc..)

Update the basic information about the app

• In left menu We have to setting for the app.
• Click Next button to setup the full details for app.

App Settings

• Finally once we completed all the steps we will see the final application with the status

List created apps

Create the Frontend and the Login Page

We already created the sample SignIn and SignUp page design in github.

Building the frontend in src with npm and npm run serve will provide this landing page of the Design on localhost:8080/login

Sign In with Facebook or Google

Jebasuthan/Vue-Facebook-Google-oAuth

The SignIn function allows to run the two different scenarios to do frontend-based and backend-based.

In frontend, open src/config/fb.js and change this line:

export const initFbsdk = () => {
  return new Promise(resolve => {
    window.fbAsyncInit = function() {
      FB.init({
        appId : 'xxxxxxxxxxxxxxxxxx',
        cookie : true,
        xfbml : true, // parse social plugins on this page
        version : 'v2.8' // use graph api version 2.8
      });
    };
    (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'));
  })
}

In your login/ signup component you have to add the fb.js reference as like below:

<template>
  <div class="signup-buttons">
    <div id="fb-root"></div>
    <a href="#" class="facebook-signup" @click.prevent="loginWithFacebook">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#3578E5"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg>
      Facebook
    </a>
  </div>
</template>

<script>
import { initFbsdk } from '@/config/fb.js'
export default {
  name: 'login_signup_social',
  mounted () {
    initFbsdk()
  },
  methods: {
    loginWithFacebook () {
      window.FB.login(response => {
        console.log('fb response', response)
      }, this.params)
    }
  }
}
</script>

<style>

</style>

Once you started run front end using npm run serve command after clicking login/signup using Facebook button you will get Access token.

Now you got the accessToken from Facebook. You have to pass the accessToken to back end api to get full details about Facebook login user using FB api.

On the backend SailsJS, open facebook-login.js and change these lines:

FB.options({version: 'v3.2'});
FB.extend({appId: '2390058934589238', appSecret: 'secret'});
FB.setAccessToken(inputs.accessToken);
try {
    let fbresponse = await FB.api('me', {fields: ['id', 'name', 'location{location{city}}', 'email', 'picture']});
    console.log(JSON.stringify(fbresponse));
    let inserObj = {};
    if (fbresponse.email) inserObj.email = fbresponse.email;
    inserObj.fullName = fbresponse.name;
    inserObj.facebookId = fbresponse.id;
}

Once you’ve done so, restart backend and frontend and load the login page from http://localhost:8080/login

SignIn with Facebook or Google

When clicking this Facebook button, Facebook Auth is done on a separate popup that either allows to enter the Facebook credentials to authenticate the app:

SignIn with Faebook auth

After you have provided your Facebook credentials, the frontend now runs the following authentication logic:

• Scenario-1: The VueJS Login component receives the accessToken from the facebook login popup and calls the Sails backend on http://localhost:8080/login. There the accessToken is used to retrieved the information about the user. The user is returned to the frontend which uses Vuex to finally log the user into the landing page
• Scenario-2: The steps from Scenario-1 are solely executed on the frontend with no additional call to the backend

You can checkout github souce code

Jebasuthan/Vue-Facebook-Google-oAuth

Thank you