Vue.js 2 Tutorial: Facebook Login Example

by Didin J. on nov 19, 2019 Vue.js 2 Tutorial: Facebook Login Example

A comprehensive Vue.js 2 tutorial on Facebook login begins with Facebook setup/configuration and working Vue.js app example

In this Vue.js tutorial, we will build an authentication system for Vue.js 2 app using the Facebook login app. As usual, we begin this Facebook integration with the Facebook app set up and configuration in their app dashboard. For the client-side, we will use the facebook-login-vuejs module.

Table of Contents:

The following tools, framework, libraries, and modules are required for this tutorial:

  1. Node.js
  2. Vue.js 2
  3. facebook-login-vuejs
  4. Terminal or Node.js Command Line
  5. IDE or Text Editor

Before moving to the steps, make sure you have installed the latest Node.js. To check it, type this command in the terminal or Node.js command line.

node -v
v10.15.1
npm -v
6.10.2


Setup a Facebook App

To setup, a Facebook App and get an App ID/Secret, go to Facebook Developers Dashboard. Login with your Facebook developer's account or credentials.

Vue.js 2 Tutorial: Facebook Login Example - Developer Facebook

Click the `+ Add a New App` button. Enter the display name (we use `VuejsAuth` name) then click the `Create App ID` button. Make sure to use the valid name allowed by Facebook Developers.

Vue.js 2 Tutorial: Facebook Login Example - Create App ID

After checking the captcha dialog and click submit button, now, you can see App ID and Secret, write it to your notepad.

Vue.js 2 Tutorial: Facebook Login Example - Settings

Click the Settings menu on the left menu then click Basic. Scroll down then click `+ Add Platform` button then choose the website. Fill site URL with the callback URL for OAuth authentication callback URL, we are using this callback URL `http://127.0.0.1:1337/auth/facebook/callback`.

Vue.js 2 Tutorial: Facebook Login Example - Callbacks

Click the `Save Changes` button and don't forget to write down the App ID and App Secret to your notepad.


Install Vue-CLI 4 and Create Vue.js App

Vue-CLI is standard tooling Vue.js development. It has the features out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end testing, fully configurable without the need for ejecting, allows the community to build and share reusable solutions to common needs, create, develop and manage your projects through an accompanying graphical user interface, and instantly prototype new ideas with a single Vue file. To install Vue-CLI 3 type this command from the Terminal or Node command line.

sudo npm install -g @vue/cli

or

yarn global add @vue/cli

Next, check the version to make sure that you have the 3.x version of Vue-CLI.

vue --version
@vue/cli 4.0.5

Next, create a new Vue.js project with the name "vue-firebase-chat" by type this command.

vue create vue-facebook-login

For now, use the default for every question that shows up in the Terminal. Next, go to the newly created folder.

cd ./vue-facebook-login

To make sure that created Vue.js project working, type this command to run the Vue.js application.

npm run serve

or

yarn serve

You will see this page when open `http://localhost:8080/` in the browser.

Vue.js 2 Tutorial: Facebook Login Example - Vue Home


Install and Configure the facebook-login-vuejs Module

We will use an existing Vue.js Facebook login module/library found on the NPMJS with the name facebook-login-vuejs. To install it, type this command.

npm i facebook-login-vuejs

or

yarn add facebook-login-vuejs

Because now the Facebook Login force to use HTTPS only, we need to modify this Vue.js 2 app to run with HTTPS. Create a new file in the root of the Vue 2 project folder called `vue.config.js` then add these lines of server configuration.

module.exports = {
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8085, // CHANGE YOUR PORT HERE!
        https: true,
        hotOnly: false,
    },
}


Display Sign In With Facebook Button and Basic User Profile

Now, we will implement the Facebook Login in the Vue.js 2 application. Open and edit `src/App.vue` then replace the Vue <template> content with these.

<template>
  <div id="app">
    <facebook-login class="button"
      appId="420905468863679"
      @login="onLogin"
      @logout="onLogout"
      @get-initial-status="getUserData"
      @sdk-loaded="sdkLoaded">
    </facebook-login>
    <div v-if="isConnected" class="information">
      <h1>My Facebook Information</h1>
      <div class="well">
        <div class="list-item">
          <img :src="picture">
        </div>
        <div class="list-item">
          <i>{{name}}</i>
        </div>
        <div class="list-item">
          <i>{{email}}</i>
        </div>
        <div class="list-item">
          <i>{{personalID}}</i>
        </div>
      </div>
    </div>
  </div>
</template>

Inside the <script>, add an import of facebook-login-vuejs module.

import facebookLogin from 'facebook-login-vuejs'

Add these variables for login status and FB graph API fields after the app name.

data() {
  return {
    isConnected: false,
    name: '',
    email: '',
    personalID: '',
    picture: '',
    FB: undefined
  }
},

Declare the facebookLogin in the Vue.js components.

components: {
  facebookLogin
},

Add these methods or functions of user data, sdkLoaded, login, and logout.

methods: {
  getUserData() {
    this.FB.api('/me', 'GET', { fields: 'id,name,email,picture' },
      user => {
        this.personalID = user.id;
        this.email = user.email;
        this.name = user.name;
        this.picture = user.picture.data.url;
      }
    )
  },
  sdkLoaded(payload) {
    this.isConnected = payload.isConnected
    this.FB = payload.FB
    if (this.isConnected) this.getUserData()
  },
  onLogin() {
    this.isConnected = true
    this.getUserData()
  },
  onLogout() {
    this.isConnected = false;
  }
}

Finally, add or replace these CSS code to the <style> tag.

#app {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}
.information {
  margin-top: 100px;
  margin: auto;
  display: flex;
  flex-direction: column;
}
.well {
  background-color: rgb(191, 238, 229);
  margin: auto;
  padding: 50px 50px;
  ;
  border-radius: 20px;
  /* display:inline-block; */
}
.login {
  width: 200px;
  margin: auto;
}
.list-item:first-child {
  margin: 0;
}
.list-item {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.button {
  margin: auto;
}


Run and Test the Vue.js 2 Facebook Login Application

It's a time to run and test the Vue.js 2 Facebook Login Application. Type this command in the terminal to run it.

yarn serve

Open the browser then go to `https://localhost:8085/`. Force the browser to use uncertified HTTPS, and here it is.

Vue.js 2 Tutorial: Facebook Login Example - Login Button
Vue.js 2 Tutorial: Facebook Login Example - Facebook Login Web
Vue.js 2 Tutorial: Facebook Login Example - User Profile

That it's, the Vue.js 2 Facebook Login Application. You can find the full working source codes in our GitHub.

That just the basic. If you need more deep learning about MEVN Stack, Vue.js or related you can take the following cheap course:

Thanks!

Loading…