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.

Written by

Rizwan Aslam

Founder and CEO of CodeBrisk, with years of experience building web applications with Laravel and leading a team of expert developers.

More about Rizwan