fbpx
 

Pantalla de Login con Facebook usando Firebase [Parte 1]

Pantalla de Login con Facebook usando Firebase [Parte 1]

1. Introducción

 

En el tutorial de esta semana vamos a ver como hacer una pantalla de Login con Facebook.

Hace un par de meses publiqué un tutorial en el que veíamos como crear una pantalla de registro/inicio de sesión para una aplicación iOS, usando Swift y Firebase.

Ese tutorial nos sirvió como introducción a Firebase y se ha convertido en uno de los tutoriales más leidos en EfectoApple.

En aquel artículo veíamos como crear de forma sencilla una pantalla donde los usuarios de nuestra aplicación iOS podían registrarse e iniciar sesión utilizando su email.

Existen muchísimos sistemas de Inicio de Sesión:

  • Mediante Email
  • Utilizando LinkedIn
  • A través de Facebook
  • Usando tu cuenta de Google

 

Antes de desarrollar la pantalla de registro/inicio de sesión deberías analizar a los usuarios potenciales de tu aplicación.

Esto te servirá para preguntarte que sistema de inicio de sesión es el más conveniente para ellos. Puede que llegues a la conclusión que únicamente necesitas añadir un par de opciones o tal vez te des cuenta que es vital el ofrecerles todos los sistemas posibles.

En el tutorial anterior sobre Firebase, ya vimos como ofrecer la posibilidad a nuestros usuarios de registrarse utilizando su email.

Esta semana vamos a revisar como hacer que puedan acceder a nuestra aplicación utilizando su cuenta de Facebook.

Actualmente, Facebook cuenta con unos 1.900 millones de usuarios. Con estas cifras es evidente que puede sernos muy útil el ofrecer esta opción de inicio de sesión a cualquiera que quiera utilizar nuestra aplicación.

 

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

 

Lo primero de todo, si no echaste un vistazo a nuestro primer tutorial sobre Firebase, te recomiendo que lo hagas.

Puedes acceder directamente desde aquí.

En el tutorial de esta semana veremos como crear una pantalla de login con Facebook utilizando Firebase.

Es importante que tengas en cuenta que este tutorial requiere bastantes pasos de configuración antes de programar nuestra app.

Los pasos de configuración que vamos a seguir son estos:

Una vez que hayamos seguido estos pasos previos, estaremos preparados para programar la aplicación.

Ya has visto entonces, que tienes que tener algo de paciencia. Sin embargo, te garantizo que este proceso de configuración es obligatorio para llevar a cabo el proyecto.

Para evitar un tutorial demasiado extenso, lo dividiremos en 2 partes. Hoy veremos la primera parte y la semana que viene trabajaremos en la segunda parte del tutorial.

 

3. La App que vamos a crear: Login con Facebook

 

En lugar de una app completa, vamos a crear el punto de entrada a cualquier aplicación que gestione usuarios.

Vamos a 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 lo que es mejor, podrás utilizar todo lo que has visto en este tutorial para crear pantallas de login con Facebook para tus propias aplicaciones.

Para poder centrarnos en lo realmente importante del tutorial: La integración con Firebase y gestión de login con Facebook, he creado un proyecto inicial, donde encontrarás la interfaz ya creada.

Trabajaremos a partir de este proyecto y programarás la parte de gestión de usuarios.

En el Apartado 5 tendrás disponible el enlace de descarga para el proyecto de inicio.

 

4. ¿Qué es Firebase?

 

Aunque ya lo explicamos en nuestro primer tutorial, vamos a revisar muy rápidamente en que consiste Firebase.

Firebase es un MBaaS (Mobile Backend as a Service). Es decir, se trata de una herramienta que nos ofrece un conjunto de características que conforman un backend completo sin necesidad de desarrollar el propio backend desde cero.

Entre estas características destacan:

  • Base de Datos con actualizaciones en tiempo real
  • Autenticación de usuarios
  • Almacenamiento en la nube
  • Notificaciones Push
  • Integración con redes sociales
  • Analíticas

Con Firebase puedes crear aplicaciones completas sin tener que escribir ni una sola línea de código del lado del servidor.

 

5. Nuestro Proyecto de Inicio

 

Como ya te he comentado, para poder centrarnos en las partes importantes del Tutorial, he preparado un proyecto de inicio, que utilizaremos como base para el desarrollo de la aplicación.

Puedes descargar el proyecto de inicio desde aquí.

Una vez que lo hayas descargado, descomprímelo y accede a la carpeta FacebookLoginDemo_Inicio, ahí verás el contenido del proyecto de inicio.

 

Integración con Cocoapods

 

Para que puedas desarrollar esta aplicación de la forma más sencilla posible, el proyecto de inicio ya incorpora Cocoapods.

Si nunca has trabajado con Cocoapods, te recomiendo que eches un vistazo a mi Tutorial de introducción:

Tutorial paso a paso de Cocoapods

Recuerda, que para abrir un proyecto que utiliza Cocoapods, en lugar de hacer doble click en el fichero .xcodeproj, deberás abrir el .xcworkspace.

 

login con facebook opening cocoapods

 

Una vez que lo has abierto, revisemos el proyecto.

 

Revisando el Proyecto de Inicio

 

Se trata de una aplicación muy sencilla.

Accede a Main.storyboard y verás que la interfaz consta de dos view controllers.

El primero de ellos contiene:

  • Una imagen de fondo
  • Una imagen en la parte superior
  • Un botón de Inicio de Sesión en la parte inferior

El segundo unicamente contiene un label con el texto WELCOME.

 

1 login con facebook interface app

 

Accede ahora a ViewController.swift y allí podrás ver existe un método llamado loginWithFacebook(). Este método será el que deberemos implementar.

 

login con facebook initial view controller

 

El funcionamiento es muy sencillo.

Cuando el usuario pulse sobre el botón INICIA SESIÓN CON FACEBOOK, se ejecutará nuestro método loginWithFacebook(), que será quien gestione con Firebase el inicio de sesión a través de Facebook.

Si los datos introducidos por el usuario para acceder a través de Facebook son correctos, se mostrará la pantalla de bienvenida con el mensaje WELCOME.

No tiene mas. Con esta aplicación tan sencilla veremos como configurar un login con facebook, que después podrás utilizar en cualquier aplicación iOS.

 

Realizando un pequeño cambio en el Proyecto de Inicio

 

Antes de ponernos a trabajar en el proceso de configuración, tienes que realizar una pequeña modificación, en el Proyecto de Inicio.

Debes modificar el Bundle Identifier de la aplicación. Esto es necesario, ya que durante el proceso de configuración de Firebase, utilizarás este Bundle Identifier y debe ser único, por lo que no puedes utilizar el mismo que yo utilizo en mi aplicación.

Para realizar este cambio, pulsa en el nombre del proyecto y en el menú General, en la propiedad Bundle Identifier, introduce el Bundle Identifier que prefieras:

 

login con facebook changing bundle id project

 

Es importante que lo apuntes o lo recuerdes, porque en el siguiente apartado tendrás que utilizarlo para configurar tu aplicación en Facebook y más adelante lo utilizarás en la configuración de Firebase.

Una vez que hemos comprendido el funcionamiento de nuestra aplicación y has realizado esta pequeña modificación, pongámonos manos a la obra.

Nuestro primer paso será configurar una nueva Aplicación en Facebook.

 

6. Configurando una Aplicación en Facebook

 

Para poder comenzar con este proyecto, deberás acceder a la web de Facebook para desarrolladores, pulsar en el botón EMPEZAR e iniciar sesión con tu cuenta de Facebook.

Una vez que te has logado, la propia web te permitirá crear una nueva aplicación, pulsando en el botón Crear identificador de la aplicación.

 

login con facebook creating new facebook app

 

Después, introduce el nombre de la Aplicación y tu correo electrónico de contacto. A continuación elige una categoría para tu app y pulsa en Crear identificador de la aplicación.

 

login con facebook new name and email

 

A continuación la web te mostrará el panel de control de tu aplicación, donde podrás configurar el login con Facebook.

 

login con facebook dashboard app

 

Pulsa el botón + Añadir producto y justo a la derecha de Inicio de sesión con Facebook, pulsa en Empezar.

Se mostrará una nueva ventana con algunas opciones de configuración que dejaremos tal cual vienen por defecto.

 

login con facebook configurando cliente facebook

 

Fíjate que hay una opción, llamada URI de redirección de OAuth válido. No la pierdas de vista, ya que más adelante tendrás que añadir algo en este apartado.

 

Menú Configuración

 

Después, pulsa en el menú Configuración situado en la parte superior izquierda y haz click en el botón situado en la parte inferior + Añadir plataforma.

 

login con facebook adding platform

 

En la ventana emergente que aparecerá elige iOS:

 

login con facebook ios platform

 

A continuación, en la opción Identificador de paquete (Que en realidad es la traducción de nuestro conocido Bundle ID) deberás introducir el Bundle Identifier que has utilizado en tu aplicación en Xcode en el apartado anterior.

Yo, en este caso, utilizaré el siguiente: com.efectoapple.FacebookLoginDemo-Inicio.

 

login con facebook adding bundle id app

 

Para confirmar este cambio, pulsa en el botón Guardar cambios.

Al realizar esta modificación, tu aplicación estará preparada para funcionar.

Como paso final, deberás de apuntar en algún fichero de texto, los siguientes atributos de tu app:

  • Identificador de la aplicación
  • Clave secreta de la aplicación (Aparece oculta y tendrás que pulsar en Mostrar)

 

login con facebook app id y clave secreta

 

Estos dos datos son importantes ya que tendrás que utilizarlos en el siguiente apartado del tutorial.

Esto es todo por ahora en cuanto a la configuración de nuestra aplicación en la página de Facebook para desarrolladores. No cierres esta página ya que si recuerdas, tenemos pendiente rellenar el campo URI de redirección de OAuth válido. No te preocupes, esto lo haremos a partir de información que obtendremos en el siguiente apartado.

Veamos como continuar.

 

7. Creando el Proyecto en Firebase

 

Para poder integrar Firebase en nuestra aplicación, lo primero que tenemos que hacer es crear nuestra cuenta en dicho servicio.

Para ello, accede a la página de inicio y haz login.

Al tratarse de una empresa propiedad de la gran G, bastará que utilices una cuenta de cualquier servicio de Google para acceder. Ni siquiera necesitas registrarte.

 

login con facebook firebase

 

Haz click en el botón CREAR NUEVO PROYECTO.

Aquí tendremos que darle nombre a nuestro proyecto.

Puedes utilizar el nombre que prefieras. En mi caso, yo lo llamaré FacebookLoginDemo.

Además de especificar el nombre, tendrás que especificar el país en el que te encuentras.

 

login con facebook creating project

 

Haz click en el botón CREAR PROYECTO y serás redirigido al panel de control del proyecto que acabas de crear en Firebase.

login con facebook control panel

 

Panel de Control de Firebase

 

Desde aquí podrás gestionar todos los servicios que Firebase puede ofrecerte para tu aplicación.

Para comenzar haz click en el botón Añade Firebase a tu Aplicación iOS.

Después, tendrás que introducir en el campo ID del conjunto de iOS una cadena de texto que identifique a tu proyecto.

Yo he elegido este:

com.efectoapple.LoginFacebook-Demo

Tu deberás utilizar uno diferente, ya que este identificador debe ser único. Además debe coincidir con el que eligieras en tu proyecto en Xcode, en el Apartado 5.

Los otros dos campos: Apodo de la aplicación y ID de App Store los puedes dejar vacíos.

 

login con facebook app bundle id settings

 

Para continuar pulsa en el botón REGISTER APP y pulsa en el botón Download GoogleService-Info.plist. Un fichero llamado GoogleService-Info.plist se descargará automáticamente.

 

Añadiendo .plist a nuestro Proyecto

 

Localiza ese fichero descargado y añádelo a la raiz de tu proyecto (arrastrándolo dentro de Xcode). Cuando al añadirlo, aparezca la siguiente ventana, pulsa en el botón Finish:

 

login con facebook adding google service file

 

 

Después de añadir el .plist a tu proyecto, continúa en la web de Firebase, pulsando en el botón CONTINUAR. La siguiente página describe como instalar el SDK de Firebase.

 

login con facebook firebase installation steps

 

Si estás siguiendo este tutorial a partir del proyecto inicial que te he dejado en el apartado 3, aquí no tienes que hacer nada, puesto que el proyecto de Xcode que te he preparado ya tiene instalado el SDK de Firebase, así que pulsa en CONTINUAR.

La última página explica como conectar con Firebase cuando tu app arranque.

 

login con facebook programming code swift

 

Haz click en el botón FINALIZAR para cerrar el asistente de configuración. Verás los detalles de la aplicación que acabamos de crear.

 

login con facebook app details

 

Perfecto, acabas de crear correctamente tu proyecto en Firebase. Ahora veremos como activar una última opción que necesitaremos para realizar el login con Facebook.

 

8. Activar la Autenticación a través de Facebook

 

Después de haber creado nuestro proyecto en Firebase, podría parecer que ya podemos comenzar a trabajar con él, sin embargo, es necesario activar la posibilidad de que nuestros usuarios puedan acceder utilizando Facebook.

Si no activamos esta opción, nuestra app jamás podría funcionar.

Para activarla, sitúate en el menú Authentication, dentro del proyecto que acabamos de crear en Firebase.

 

login con facebook Authentication menu

 

Después, pulsa en el menú superior MÉTODO DE INICIO DE SESIÓN.

En esta nueva pantalla, verás que se muestra un listado de proveedores:

  • Correo electrónico/contraseña
  • Google
  • Facebook
  • Twitter
  • GitHub
  • Anónimo

 

Puedes ver que todos están inhabilitados por defecto.

Como en nuestro caso, lo que nos interesa es el login con Facebook, haz click en dicho método de inicio de sesión.

A continuación tendrás que habilitar esta opción, activando el interruptor situado en la parte superior derecha.

 

Añadiendo App ID y App Secret

 

También tendrás que añadir 2 campos que obtuviste, al final del apartado anterior de este tutorial:

  • App ID (Que en el apartado anterior se llamaba Identificador de la aplicación)
  • App Secret (Que en el apartado anterior se llamaba Clave secreta de la aplicación)

Además, si recuerdas el apartado del tutorial en el que configuramos nuestra aplicación en Facebook, había un campo que dejamos vacío. El campo se llamaba URI de redirección de OAuth válido. Esa información que tenemos pendiente de rellenar la obtenemos del campo de esta ventana de Firebase donde pone:

Para completar la configuración, añade este URI de redireccionamiento de OAuth a la configuración de tu aplicación de Facebook.

Echa un vistazo a la siguiente imagen para que tengas todo más claro:

 

login con facebook activating facebook login in firebase

 

Por tanto, copia esa URI, vuelve a la página de desarrolladores de Facebook, que te comenté que no cerraras, añádela en el campo correspondiente y pulsa Guardar cambios.

 

login con facebook anadiendo uri de redireccion

 

Después de haber seguido estos pasos, vuelve a la página de Firebase y pulsa en el botón GUARDAR.

 

login con facebok configurando firebase

 

Como confirmación final, recibirás un mensaje de que este método de inicio de sesión ha sido habilitado y en el listado de proveedores, verás que aparece esta confirmación:

 

login con facebook habilitado en firebase

 

Con este último paso has terminado de configurar tanto tu aplicación en Facebook, como tu aplicación en Firebase. Enhorabuena, solo nos queda un último paso antes de comenzar con la parte de código.

Este último paso y la programación de la app la veremos la semana que viene en la segunda parte del tutorial.

 

9. Resumen Final

 

Como has podido ver, por ahora únicamente hemos revisado la parte de configuración.

Hemos seguido todos los pasos necesarios, a través de las webs de Facebook y Firebase para poder llevar a cabo el desarrollo de nuestra aplicación.

Puedes acceder a la segunda parte del tutorial desde aquí. No te la pierdas.

 

10. Has terminado la primera parte del Tutorial

 

Enhorabuena, has terminado la primera parte del tutorial sobre como Crear una Pantalla de Login con Facebook

Como siempre, aquí tienes el video-chorra de esta semana:

 

 

11. ¿Donde ir ahora?

 

Para acceder a la segunda parte del tutorial entra aquí.

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:
Sin comentarios

Escribe un comentario

Crea una aplicación iOS desde cero con mi Curso gratuito en videoRESERVAR PLAZA
+
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.