Simple FB Button Login

Este proyecto ofrece el código más eficiente, mínimo y práctico para integrar el botón de login de Facebook en un proyecto VueJS, mucho más si se usa un framework encima como Vuetify.

Comenzando 🚀

Para usar este complemento necesitas tener un proyecto VueJS funcionando.

Pre-requisitos 📋

Solo necesitas VueJS instalado para poder usar el componente por consiguiente NodeJS, se contruyó con las últimas versiones de esta librería a la fecha 9 de mayo de 2020, exactamente hoy, el día de mi cumpleaños.

Instalación 🔧

Al ser una librería optimizada, su utilización es sencilla:

Tu proyecto ya debe tener un package.json y ahí se añadirá:

npm i -S vue-simple-fb-button-login

Integración

Podemos importarlo de dos formas.

Local

Esta forma quizá es la más común y práctica ya que se importa solo en el lugar donde se ocupa (por lo general una sola vez).

En tu vista/componente de VueJS donde das las formas de autenticación en tu aplicación añade:

import SimpleFBButtonLogin from 'vue-simple-fb-button-login'

export default {
  components: {
    SimpleFBButtonLogin
  }
}

Global

Esta forma importaría para su uso en múltiples lugares/vistas de nuestra aplicación:

En nuestro archivo main.js (entry point de nuestra applicación) añadir lo siguiente

import SimpleFBButtonLogin from 'vue-simple-fb-button-login'

Vue.component('simple-fb-button-login', SimpleFBButtonLogin)

new Vue({
  ....

Uso 📦

Este componente require obligatoriamente solo un atributo, que es el appId de Facebook, sin embargo ofrece la posibilidad de slots para personalización.

Template

Uso mas básico:

<SimpleFBButtonLogin appId='xxxxxxxxxxxxx'/>

Ejemplo usando diseño propio con Vuetify:

<SimpleFBButtonLogin
  v-if="visibleLoginFBButton"
  appId='XXXXXXXXXXXXXXXX'
  v-slot:default="{ login }"
  @data-profile="saveFacebookUserProfile"
  @conectado="saveFacebookAuthResponse"
  @empezando-login="loading = true"
  @error="loading = false"
>
  <v-btn
    depressed
    color="indigo"
    style="text-transform:none"
    class="ma-2 white--text"
    @click="login"
    :loading="loading"
  >
    <v-icon>
      fab fa-facebook-f
    </v-icon>
  </v-btn>
</SimpleFBButtonLogin>
</SimpleFBButtonLogin>

Props

A continuación te detallo todos los props posibles para su mayor provecho:

props: {
  scopePermissions: {
    type: String,
    required: false,
    default: 'public_profile,email,user_birthday,user_location'
  },
  fieldsGet: {
    type: String,
    required: false,
    default: 'id,name,birthday,email,location,picture,first_name,last_name,middle_name,name_format,short_name'
  },
  responseType: {
    type: String,
    required: false,
    default: 'granted_scopes'
  },
  redirectURI: {
    type: String,
    required: false
  },
  textButton: {
    type: String,
    required: false,
    default: 'Sign in with Facebook'
  }
}

Para entender mejor el proósito de cada uno te recomiendo leer la documentación oficial:

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow#login

Eventos

Es importante que use los eventos del componente, estos le darán la información que recolecte su inicio de sesión con FB.

El componente cuenta con 3 eventos:

1. cargo-script: Nuevo evento, se ejcuta cuando cargan fisicamente los scripts. Respuesta vacía.
2. termina-inicializacion: Se ejecuta cuando FB.init y FB.AppEvents.logPageView() del SDK de Facebook se han ejecutado correctamente. Respuesta vacía.
3. empezando-login: Se ejecuta inmediatamente cuando se llama al método login del slot.
4. conectado: Se ejecuta cuando se ha comprobado que el usuario se conectó con Facebook y que ha recibido un token de acceso a sus datos. Responde un objeto response del método FB.login del API de Facebook.
5. data-profile: Este evento nos da la información del perfil de Facebook del usuario autenticado. Hace un get('/me') al FB.api del API Graph de Facebook, responde conforme hayamos configurado el prop fieldsGet.
6. error: El metodo se ejecuta cuando en el componente ocurre un error, como por ejemplo que haya cerrado la ventana de login de facbook manualmente. Responde un objeto tipo Error.

Construido con 🛠️

Fue contruido con VueJS y con mucho amor para aportar a la comunidad.

Contribuyendo 🖇️

Por favor se acepta con gusto cualquier comentario, sugerencia y aporte. Mi usuario en Twitter es @superrrandres

El código fuente está dentro del mismo paquete NPM por si desean revisarlo para sugerir algo.

Expresiones de Gratitud 🎁

• Comenta a otros sobre este proyecto 📢
• Invítame una cerveza 🍺 o un café ☕
• Agradezco a Dios por el tiempo y la oportunidad.

⌨️ con ❤️ por @superrandres 😊