vue-simple-fb-button-login

    1.1.0 • Public • Published

    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 😊

    Install

    npm i vue-simple-fb-button-login

    DownloadsWeekly Downloads

    8

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    46.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • superrandres