Facebook Login en App inventor

Se puede hacer un LogIn con Facebook?


App Inventor es una plataforma para desarrollo de aplicaciones, que si bien es muy fácil de usar, aún no se pueden implementar algunas funciones directamente como el uso de sdk. Sin embargo, algunas plataformas ofrecen sus servicios a través de algunas API para inciar sesión en nuestras aplicaciones, en este caso Facebook consideró ofrecer a los desarrolladores una manera para incluir el inicio de sesión para lo que ellos denominan "Otras plataformas" podrás encontrar información sobre ello en la sección de Desarrolladores de Facebook

Ahora, teniendo en cuenta esto. podremos pensar en nuestra aplicación hecha en app inventor como otra plataforma. para implementar el inicio de sesión usando esta API debemos seguir los siguientes pasos.

Como Funciona

Este componente le permite autenticar a los usuarios en su aplicación mediante el "inicio de sesión de Facebook", el usuario debe insertar un código para autorizar su aplicación para obtener datos como nombre, foto de perfil y correo electrónico. después de generar el código, el usuario debe ser redirigido a facebook.com/deviceEl desarrollador decide la manera de hacerlo. por ejemplo, usar un visor web o un iniciador de actividad al ejecutar un navegador web. después de que el usuario autorice su aplicación, se le devolverá un correo electrónico, el nombre de una ruta de la imagen.

1. Crear nuestra aplicación en Facebook

Esto significa que debemos agregar la aplicación a nuestra consola de desarrolladores en Facebook para que se le otorguen ciertos datos y Facebook pueda reconocer que aplicación hace las solicitudes. para esto debes ingresar a https://developers.facebook.com/apps y agregar una nueva aplicación.




luego, Facebook te pedirá que le des un nombre y un correo eléctronico. en este caso puede ser el nombre de tu aplicación y tu correo.


Una vez creada nuestra apliación en Facebook podremos obtener nuestros datos para usar en la extensión. la cual podrás descargar aquí.

2. Habilitar el inicio de sesión para dispositivos

Ingresa a PRODUCTOS > Inicio de sesión con Facebook > Configuración y habilita el inicio de sesión desde dispositivos. de esta manera podrá funcionar la extensión, tambien ingresa https://localhost como URI de redireccionamiento de OAuth válidos.


3. Importar la extensión a App Inventor

En App inventor agregamos la extension "FacebookLogin.aix".

Para que esta extensión funcione debemos tendremos que añadirle las propiedades de AppID y el ClientToken.


Estos datos los encontramos en la consola de desarrollador de facebook en Configuración/Avanzadas

Una vez importada y configurada podemos armar los bloques necesarios, como leimos al principio, el inicio de sesión requiere que el usuario sea redirigido a facebook.com/device por lo que tenemos dos opciones. usar el navegador nativo de App Inventor o usar un navegador externo como Chrome.

4. Bloques y componentes

a. Generar el código

Para este ejemplo tendremos tres screens. La primera es donde esta el botón que genera el código. un mensaje se mostrará con un código para que el usuario autoricé a la aplicación obtener sus datos básicos desde facebook. (Nombre, email y foto de perfil). FACEBOOK NUNCA DEVOLVERÁ CONTRASEÑA. en la segunda screen tendremos un navegador y un botón para cancelar la operación.




Una vez el usuario seleccione una opción podemos verificar esta acción usando un If para comparar si choice es igual Ir a Facebook
IMPORTANTE! En algunos dispositivos se mostrará el mensaje con los textos en mayúsculas, pero debes ponerlos en Tipo Oración "Ir a Facebook" o "Go to Facebook" para la versión del mensaje en ingles.

b. Confirmar la autorización

Una vez el usuario siga todos los pasos, saldrá una pantalla de confirmación y el botón cambiara de cancelar a Continuar. en los bloques habrá un reloj con el bloque "CheckAuthorization" donde se le debe pasar un código generado por la extensión en la Screen1 (No es el mismo código que se le muestra al usuario, es es mucho mas largo y solo es para el desarrollador) la documentación habla de que se debe hacer la verificación cada 5 segundos, generalmente uso 6 o más mientras el usuario hace todo el proceso.


Una vez hecho todo el proceso. podemos guardar estos datos en la base de datos local "TinyDB" y mostrarlos en otra pantalla en mi caso la Screen3, el nombre y la foto del perfil.




Espero que os haya gustado y recuerden que esta extensión es compatible con la extension de FirebaseAuth la cual veremos  como usar más adelante.

Descargas





Comentarios

  1. Wow, mas maneras donde subir contenido saliendo un poco de la rutina de youtube! :D Increíble.

    ResponderEliminar
  2. gracias, la idea es hacer el video y soportarlo con el post. un abrazo muchachos!

    ResponderEliminar
  3. Gustavo. Felicitaciones y muchas gracia por compartir con nosotros su conocimiento.

    ResponderEliminar
  4. Saludos! Mi buen amigo! Soy tu admirador 1, jeje , cada día compites contigo mismo, y pos el Gustavo que conocí hace un año, no le toca los talones a este nuevo Gustavo! Jeje, bueno, en pocas palabras, eres el mejor. Gracias por la documentación, saludos!!!

    ResponderEliminar
  5. Excelente todo amigo Gustavo, pero hay un problema, no se si solo me pase a mi, yo inicio sesión en la app con facebook y todo fluye muy bien pero error pasa cuando otra cuenta de facebook va iniciar sesión, no bota la información a la app que a mi si, me bota con mi cuenta, por favor te agradezco tu aporte y me soluciones ese pequeño problema.

    ResponderEliminar
    Respuestas
    1. Hola, si y tienes razón, eso pasa porque facebook crea la aplicación en modo desarrollo. y solo funciona con la cuenta del desarrollador y los testers que el quiera agregar en la sección de roles. una vez testeada, puedes pasarla a producción, es decir, publica. pero para esto facebook te pedirá unas políticas que debes introducir a través de una URL. esto se hace en la sección Revisión de la aplicación.
      disculpa la tardanza. Saludos!!

      Eliminar
  6. Hola Gustavo, recientemente vi tus tutoriales en Youtube, buscaba como usar la Api de Google Maps, me encanto tu proyecto y estaba buscando los archivos faltantes que no logro hacer funcionar el proyecto, espero me ayudes!

    ResponderEliminar
  7. Hola Gracias por el aportes, una consulta crear un app, recibir y guardar los datos, en algún servidor o base de datos, para despues poder guardar los datos en mi ordenador


    Att
    Jose Lopez
    Guatemala

    Saludos

    ResponderEliminar
  8. Hola, tengo un problema, descargue facebooklogin.aia funciona bien pero nunca puedo pasar a la screen3. No se si solo me pasa a mi esto.

    ResponderEliminar
  9. ใส่ localhost แล้วทำไม ไม่พบเว็บค่ะเกิดจากอะไรข้อมูลก็ใส่ครบ

    ResponderEliminar
  10. Buenas tardes Gustavo soy nuevo en esto, gracias por la información, espero poderlo integrar a mi proyecto, también explicas como poder hacerlo con la cuenta de Google.
    Gracias por la atención.

    ResponderEliminar
    Respuestas
    1. Seguí tu camino, pero mi programa no funcionó bien. ¿Puedes proporcionar el .aia completo de nuevo o hacernos saber el código (MIT App inventor 2)

      Eliminar
    2. Seguí tu camino, pero mi programa no funcionó bien. ¿Puedes proporcionar el .aia completo de nuevo o hacernos saber el código (MIT App inventor 2)

      Eliminar
  11. Seguí tu camino, pero mi programa no funcionó bien. ¿Puedes proporcionar el .aia completo de nuevo o hacernos saber el código (MIT App inventor 2)

    ResponderEliminar
    Respuestas
    1. https://community.thunkable.com/t/free-facebook-login-extension/6462

      Eliminar
  12. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  13. Muchas gracias por el aporte!! Le quería preguntar, para hacer un inicio de sesion con Twitch, como sería?? Muchas gracias!!

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog