Blog Detail

24

Sep
Easily Integrate Facebook Login Component with vue.js  cover image

arrow_back Easily Integrate Facebook Login Component with vue.js

Facebook Login enables people to have private & secure experiences, from basic account creation to social networking, all with the click of a button. It is uniquely positioned to offer a seamless experience across platforms, devices, and operating systems. You can easily integrate Facebook login in your applications with many built-in vue components.
Liran Cohen introduced a Facebook login vue component called facebook-login-vue which lets you drop it into your existing project and get the benefits of Facebook Login quickly. You can see its example here.

Installation

You can install this component via npm by running this command.

npm i facebook-login-vuejs

Usage

After the installation, you’ve to import this into your Vue Component.

//my-component.vue
import facebookLogin from 'facebook-login-vuejs';

Vue.component('my-component', {
    components: {
        facebookLogin
    }
});
    <facebook-login class="button"
      appId="326022817735322"
      @login="getUserData"
      @logout="onLogout"
      @get-initial-status="getUserData">
    </facebook-login>

Props

Props Type Default Notes
appId string None It is a required prop.
version string ‘v2.9’ refer to Facebook Docs for explanation on available values
loginLabel string Log In To Facebook -
loginOptions object content3 {scope: ‘email’} all options listed on Facebook Docs are passable with camelCase. e.g : {returnScopes: false}
logoutLabel string Log out from Facebook -

Events

Event Output Description
get-initial-status Object TO BE DEPRECATED. Initial Check to decide whether the user already connected.
sdkLoaded Object returns an object with the following keys: isConnected: Boolean. is the User connected? FB: the API object.
click - The Component has been clicked.
login Object User tried to login
logout Object User tried to logout

You can view this on Github.

Published at : 24-09-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project