fbpx
 

Pantalla de Login con Facebook usando Firebase [Parte 2]

Pantalla de Login con Facebook usando Firebase [Parte 2]

1. Introducción

 

En el anterior artículo de EfectoApple vimos la primera parte del Tutorial sobre como Crear una Pantalla de Login con Facebook usando Firebase.

Si no has revisado la primera parte, lo puedes hacer desde aquí:

Tutorial [Parte 1]

Hoy vamos a ver la segunda parte de ese tutorial.

Si recuerdas, los pasos de configuración que hay que dar para desarrollar un Inicio de Sesión con Facebook son los siguientes:

 

En la primera parte del tutorial vimos los 3 primeros apartados.

Echemos un vistazo a lo que vamos a ver hoy.

 

2. ¿Qué vamos a ver en este Tutorial?

 

El siguiente punto en el que trabajaremos será en configurar nuestro proyecto en Xcode.

Una vez que hayamos terminado todo el proceso de configuración, por fin podremos desarrollar nuestra aplicación.

Además, también veremos como crear usuarios de prueba para poder testear la app.

Recordemos cual es el objetivo que queremos conseguir, es decir, que pinta debe tener la aplicación al terminar el tutorial.

 

3. La Aplicación que vamos a crear

 

El objetivo de este tutorial es crear una pantalla de login que enlazará con Firebase y nos permitirá gestionar el login con Facebook.

Al terminar tendrás una aplicación como esta:

 

login con facebook gifAppWorking

 

Y además dominarás todo el proceso de creación de una pantalla de login, que podrás utilizar en tus propias aplicaciones.

Continuemos entonces, justo donde lo dejamos en la primera parte de este tutorial.

 

 4. Configurando el Proyecto en Xcode

 

Como hemos comentado antes, lo primero que haremos será ver el último paso de configuración antes de programar nuestra app.

Si no tienes abierto el Proyecto de Inicio que descargaste en la primera parte del tutorial, ábrelo (recuerda, a través del archivo .xcworkspace).

Una vez que lo tienes abierto en Xcode, haz click con el botón derecho sobre el fichero Info.plist y elige Open as > Source code.

 

login con facebook opening info plist

 

De esta forma, podrás ver que realmente se trata de un fichero en XML.

Lo siguiente que tendrás que hacer es añadir este trozo de código (con algunos cambios) justo antes de la etiqueta </dict>:

Cambios en Info.plist

 

Este trozo de código contiene mi propia configuración. Deberás realizar algunos cambios en él para hacer que tu aplicación funcione:

  • Cambia el App ID (114689345755615) a tu propio ID. Recuerda que puedes consultar este ID en el panel de control de tu app en Facebook.
  • Cambia fb114689345755615 por tu propio URL scheme. Deberás de sustituirlo por fb+Tu App ID.
  • Cambia el nombre de la app (Login Demo) por tu propio nombre.

 

La API de Facebook se encargará de leer el fichero Info.plist para conectar con tu app en Facebook y gestionar el Inicio de Sesión a través de Facebook. Por tanto, debes asegurarte que el App ID que has utilizado coincide con el que tiene tu App en la web de Facebook para desarrolladores.

 

login con facebook app id field

 

Tal vez te estés preguntando para que sirve la clave LSApplicationQueriesSchemes.

Esta clave determina los URL Schemes que nuestra app puede utilizar con el método canOpenURL:.

Es decir, sirve para lanzar la app oficial de Facebook, (siempre que el usuario la tenga instalada en su dispositivo) y realizar el login desde allí.

Si el usuario no la tiene instalada, no hay ningún problema, podrá realizar el login con Facebook directamente desde el navegador.

Ahora sí. Después de todo el proceso de configuración, podemos centrarnos en programar nuestra app. ¡Vamos a ello!

 

5. Implementando nuestro AppDelegate

 

Vamos a comenzar a programar la aplicación, escribiendo el código que corresponde al AppDelegate.swift.

Accede a esta clase desde Xcode y lo primero que haremos será importar las clases que vamos a necesitar:

Después, añade el siguiente método a la clase AppDelegate:

Este método es el encargado de gestionar la llamada a la aplicación oficial para realizar el login con Facebook.

Si recuerdas, el proceso completo es el siguiente:

  • El usuario pulsa en el botón de Iniciar Sesión con Facebook.
  • Nuestra aplicación intenta abrir la aplicación oficial para realizar el login con Facebook.
  • En el caso de que esta aplicación no esté instalada, nos permite realizar el login desde el navegador.
  • El usuario introduce sus credenciales de Facebook.
  • La app oficial de Facebook o el navegador, comprueban que las credenciales son correctas.
  • La app oficial o el navegador, vuelven a nuestra app, pasándonos las credenciales.
  • Nuestra aplicación, al haber realizado correctamente el login muestra la pantalla de bienvenida.

Todo este proceso se realiza desde el método application() que acabamos de programar.

Lo siguiente que tendremos que hacer es llamar a este método desde nuestro AppDelegate y también llamar al método que nos permitirá configurar Firebase. Por tanto, deberás modificar tu método didFinishLaunchingWithOptions() para que tenga esta pinta:

Con esto, habríamos terminado en nuestra clase AppDelegate.

 

6. Implementando la clase ViewController

 

Vayamos ahora a la clase ViewController para implementar el código que vamos a necesitar.

Lo primero que haremos, exactamente igual que antes, será añadir el import de las clases de Facebook y de Firebase:

Después, nos centraremos en el método loginWithFacebook(), que es el método principal de nuestra app.

 

El método loginWithFacebook()

 

Actualmente este método está vacío, nuestra misión ahora será rellenarlo completamente.

Primero te mostraré el código completo de este método y posteriormente la explicación. Este es el código que tendrás que añadir al método loginWithFacebook():

Explicación de este método

 

Y aquí tienes la explicación paso a paso:

  • //1. La clase FBSDKLoginManager nos ofrece el método logIn(), que nos permite iniciar sesión, especificando los permisos que queremos solicitar al usuario. En nuestro caso, solicitamos acceder a su perfil público y a su email.
  • //2. Después de que el usuario haya introducido sus credenciales de Facebook, se comprobará si se ha producido algún error.
  • //3.  Si no se produce ningún error, procederemos a recuperar el token de acceso del usuario y lo convertiremos en una credencial de Firebase, utilizando el método credential de la clase FIRFacebookAuthProvider.
  • //4. Utilizando esta credencial, llamaremos al método signIn() de Firebase.
  • //5. Si se produce algún error iniciando sesión en Firebase, mostraremos un alertController informando al usuario.
  • //6. En caso de que no se produzca ningún error, mostraremos la pantalla de bienvenida.

 

Con este método, hemos terminado la implementación completa de nuestra aplicación.

¿Cual es el siguiente paso, después de programar cualquier aplicación?

Probarla.

Vamos a ello.

 

7. Creando un Usuario de Prueba

 

Para probar la aplicación que acabamos de desarrollar, podríamos utilizar las credenciales de cualquier cuenta de Facebook que tengamos.

Sin embargo, vamos a hacerlo de la forma correcta.

Vamos a crear un Usuario de Prueba que utilizaremos para testear nuestra aplicación.

Accede de nuevo a la web de Facebook para desarrolladores y dentro de tu app, accede al menú Roles>Usuarios de prueba.

Haz click en el botón Añadir, selecciona crear 1 nuevo usuario y pulsa en Crear usuarios de prueba.

 

login con facebook adding usuario de prueba

 

Facebook generará un usuario de prueba con un nombre y un email aleatorio. Puedes modificar el nombre y la contraseña pulsando el el botón Editar.

Recuerda el email y la contraseña que has introducido, ya que lo usaremos en el siguiente apartado para iniciar sesión.

 

8. Testeando nuestra Aplicación

 

Después de todo este proceso, por fin vamos a poder probar nuestra aplicación.

Ejecútala en el simulador y sigue estos pasos:

  1. Pulsa el botón INICIA SESIÓN CON FACEBOOK
  2. Cuando Facebook te solicite las credenciales, introduce el email y contraseña del usuario de prueba
  3. Acepta la solicitud de permiso

 

Al seguir estos pasos, verás como la aplicación muestra correctamente la pantalla de bienvenida:

 

login con facebook welcome app

 

Acabas de crear una pantalla de Inicio de Sesión que combina Facebook + Firebase y que además podrás utilizar en tus propias aplicaciones.

¡Enhorabuena!

 

9. Resumen Final y Conclusiones

 

Acabas de seguir paso a paso, uno de los Tutoriales más completos que he publicado en EfectoApple.

Hemos utilizado Cocoapods, Firebase y Facebook en una misma aplicación.

Además, teniendo todo el proceso claro, podrás integrar el login con Facebook en cualquier aplicación que desarrolles.

 

10. Descarga el Proyecto

 

10AppsBanner

 

Consigue el proyecto completo y muchos más con el Pack de Aplicaciones de EfectoApple que puedes descargar totalmente gratis desde aquí.

 

11. Has terminado el Tutorial

 

Enhorabuena, has terminado el tutorial sobre como Crear una Pantalla de Login con Facebook

Aquí tienes el video-chorra de esta semana, te lo has ganado:

 

 

12. ¿Donde ir ahora?

 

Puedes acceder a más tutoriales disponibles en EfectoApple aquí.

Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.

Como siempre, para cualquier duda, tienes los comentarios a tu disposición.

 

Etiquetas:
3 Comentarios
  • Julio Enrique
    Publicado a las 03:33h, 11 septiembre Responder

    Hola muchas gracias por compartir, seguí al pie tu tutorial y logré compilar sin error, me gustaría me ayudaras a guardar los datos en firebase, ya que no he encontrado en la red código actual, los ejemplos están desfasados.

    • Luis R
      Publicado a las 09:49h, 25 octubre Responder

      Hola Julio Enrique.

      Es probable que en el futuro desarrolle algún Tutorial ampliando las explicaciones sobre Firebase. Si no quieres perderte ningún artículo de este tipo, puedes suscribirte en el formulario de la parte inferior.

      ¡Gracias por comentar!

  • Felipe Zuluaga
    Publicado a las 07:47h, 19 marzo Responder

    Hola Luis.
    Excelente tutorial, como puedo usar la información que obtengo del login? para mostrar el nombre por ejemplo.

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.