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:
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
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:
Ejemplo usando diseño propio con Vuetify:
fab fa-facebook-f
Props
A continuación te detallo todos los props posibles para su mayor provecho:
props:
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:
- cargo-script: Nuevo evento, se ejcuta cuando cargan fisicamente los scripts. Respuesta vacía.
- termina-inicializacion: Se ejecuta cuando FB.init y FB.AppEvents.logPageView() del SDK de Facebook se han ejecutado correctamente. Respuesta vacía.
- empezando-login: Se ejecuta inmediatamente cuando se llama al método login del slot.
- 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.
- 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.
- 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 😊