fbpx
 

Crea Pantalla de Login usando Swift y Firebase

Crea Pantalla de Login usando Swift y Firebase

1. Introducción

Esta semana vamos a hablar sobre Firebase.

Puede que en algún momento hayas pensado en desarrollar tu propia aplicación iOS.

Tienes conocimientos de Desarrollo iOS suficientes como para llevar a cabo tu proyecto.

Incluso puede que tengas algunos conocimientos de diseño y seas capaz capaz de crear por ti mismo la interfaz de tu aplicación.

Sin embargo, te encuentras con una gran dificultad que te impide avanzar.

Si se trata de una aplicación mas o menos ambiciosa, además de la parte de diseño y la parte de desarrollo iOS necesitarás implementar la parte de servidor.

Necesitarás un backend en el que se apoye tu aplicación. Si tienes conocimientos de desarrollo en la parte de servidor, genial, eres lo que hoy en día se llama un Full Stack Developer y sabes todo lo necesario para poder crear desde cero una aplicación completa por ti mismo.

Lamentablemente, esto no suele ser lo común.

Si no tienes conocimientos de desarrollo en la parte de servidor, tienes varias opciones:

  1. Aprender lo necesario para crear el backend por ti mismo.
  2. Encontrar a alguien de back que quiera unirse a tu proyecto.
  3. Utilizar algunas de las herramientas disponibles hoy en día que te permiten crear de forma sencilla un backend completo para tus aplicaciones móviles.

Nosotros en el tutorial de esta semana nos vamos a centrar en la tercera opción. Hablaremos de una de estas herramientas. Veremos como trabajar con Firebase.

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

Es evidente que no podemos abordar el desarrollo completo de un backend con Firebase en este tutorial. Para poder explicarlo necesitaríamos toda una serie de tutoriales.

Por este motivo, voy a centrarme únicamente en una parte de nuestro backend.

Además, es un tema sobre el que he recibido algunos emails de lectores con dudas al respecto.

Vamos a ver como crear una pantalla de Login para nuestra aplicación iOS.

Para ello, como digo, vamos a apoyarnos en Firebase.

3. La Aplicación que vamos a crear

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 registro y acceso de usuarios.

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

 

firebase new login in app

 

Y lo que es mejor, podrás utilizar todo lo que has visto en este tutorial para crear pantallas de login para tus propias aplicaciones.

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

Por favor, descárgalo desde aquí, ya que durante el tutorial vamos a trabajar con este proyecto.

4. ¿Qué es Firebase?

Firebase es un MBaaS (Mobile Backend as a Service) creado en 2011 por Andrew Lee y James Tamplin. En 2014 fue adquirido por Google, lo que hizo que se añadieran una gran cantidad de funcionalidades nuevas al servicio.

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. Creando nuestro Proyecto en Firebase

Lo primero que tenemos que hacer para poder integrar Firebase en nuestra aplicación 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 logarte. Ni siquiera necesitas registrarte.

 

firebase login web 1

 

Haz click en el botón CREATE NEW PROJECT

Imaginemos que la aplicación que queremos crear se trata de una app de compra-venta de productos relacionados con videojuegos, es decir, consolas, juegos, periféricos, etc, etc.

Enfocados en este tema, le daremos el nombre de Gamify.

[caja-gris]Puedes darle el nombre que quieras. Tal vez quieras aprovechar este tutorial para comenzar tu propio proyecto personal[/caja-gris]

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

 

firebase creating project

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

 

firebase-dashboard-3

 

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 Add Firebase to your iOS app.

En el campo iOS bundle ID debes introducir un bundle ID diferente al que yo he utilizado, ya que este identificador debe ser único.

Además, el bundle ID que utilices aquí, deberá ser el mismo que uses en tu proyecto en Xcode. Por esto, recuerda bien, que bundle ID es el que introduces aquí.

Los otros dos campos: App nickname y App Store los puedes dejar vacíos.

 

firebase adding ios project

 

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

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:

 

firebase adding file to xcode

 

Ahora, vamos a aprovechar para modificar el bundle ID de nuestra aplicación. Como hemos dicho antes, debe ser exactamente igual que el que hemos configurado en la web de Firebase.

Para realizar este cambio, pulsa en el nombre de tu proyecto y en el menú General, en la propiedad Bundle Identifier, introduce la misma cadena de texto que configuraste en Firebase.

 

firebase changing bundle id name

 

Una vez que has realizado estas modificaciones, continúa en la web de Firebase, pulsando en el botón CONTINUE. La siguiente página describe como instalar el SDK de Firebase.

 

firebase configuration sdk

 

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 CONTINUE.

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

 

firebase code for app

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

 

firebase project created

 

Enhorabuena, has creado correctamente tu proyecto en Firebase. Ahora veremos como gestionar los usuarios de nuestra aplicación.

6. Configurando la gestión de usuarios

Uno de los servicios que ofrece Firebase es el de autenticación de usuarios. Te permite dar de alta usuarios a través de diferentes proveedores. Puedes autenticar usuarios con Google, Twitter, Facebook y por supuesto utilizando el método tradicional de Email y Password. En este tutorial utilizaremos esta última opción para que nuestros usuarios se den de alta.

Para habilitar la autenticación a través de email/password, accede a tu panel de control de Firebase y haz click en el menú Authentication.

 

firebase authentication menu

 

Haz click en el botón SET UP SIGN-IN METHOD, después pulsa sobre el menú Email/Password y activa el interruptor Enable. Después pulsa en SAVE.

 

firebase enabling auth

 

Verás, que la autenticación a través de Email/Password ha quedado activada.

Firebase almacena las credenciales de los usuarios en el llavero, por lo que debemos activar la opción Keychain Sharing en nuestro proyecto de Xcode.

Abre el proyecto de inicio que has descargado en el apartado 3 y dentro del target, en el menú Capabilities, activa la opción Keychain Sharing.

 

firebase enabling keychain sharing

 

Ya estamos preparados para autenticar nuestros usuarios utilizando email y password.

7. Echando un vistazo a nuestra app

Vamos a revisar rápidamente el aspecto del proyecto que has descargado, para entender un poco el entorno donde vamos a trabajar.

Lo primero que deberías hacer es ejecutar la aplicación y comprobar que la interfaz se muestra correctamente.

 

firebase app login view

 

Si pulsas alguno de los dos botones, verás que no hacen nada. Cuando hayas terminado este tutorial, a través de estos botones podrás controlar la creación de usuarios nuevos y el inicio de sesión de los mismos.

Echando un vistazo a nuestra interfaz

Abre el Main.storyboard para revisar la interfaz de la aplicación.

Como ves se trata de algo muy sencillo. Tenemos nuestra pantalla de registro/inicio de sesión que cuenta con dos textFields, donde el usuario introducirá su email y contraseña para iniciar sesión. Sin embargo, antes de esto, el usuario debe contar con una cuenta de usuario. Para crear su cuenta de usuario tendrá que pulsar en el botón de la parte inferior ¿No tienes cuenta? Regístrate.

Al pulsar en ese botón se lanza un alert que permite crear una nueva cuenta de usuario. Una vez que hayamos creado esa cuenta, ya podremos acceder con esas credenciales.

Al acceder con credenciales correctas, la aplicación nos permite acceder a la pantalla de bienvenida.

En caso de que intentemos acceder con credenciales incorrectas, la aplicación lanzará mensajes de error y nos impedirá visualizar la pantalla de bienvenida.

En ViewController.swift tenemos los 2 outlets loginEmailTextField y loginPasswordTextField que enlazan con nuestra interfaz. Además todo el código de la app lo desarrollaremos únicamente en dos métodos:

  • signUpTapped(): Se ejecuta cuando el usuario pulsa en el botón de ¿No tienes cuenta? Regístrate.
  • loginTapped(): Se ejecuta cuando el usuario pulsa en el botón de INICIAR SESIÓN.

Este es el aspecto de nuestra clase ViewController.swift ahora mismo:

 

firebase ViewController code

 

Como ves, los métodos están vacíos. Lo que haremos en este tutorial será rellenarlos viendo paso a paso lo que hace cada parte del código.

Comenzaremos por el registro de usuarios y en el siguiente apartado veremos el inicio de sesión de usuarios.

8. Registro de usuarios

Como hemos dicho antes, para el registro de usuarios, trabajaremos con el método signUpTapped().

signUpTapped() es el método encargado de lanzar la alerta de registro de usuarios. Lo que queremos que haga es que muestre una alerta como esta:

 

firebase alert new user

 

El código que tendrás que añadir al método signUpTapped() es el siguiente:

Entendiendo el código

Y aquí tienes la explicación a cada una de las partes del código:

//1. Creamos un UIAlertController que será quien gestione la alerta que vamos a mostrar

//2. Creamos la acción de Guardar y en las constantes emailField y passwordField almacenamos lo que el usuario introduzca en los campos de la alerta.

//3. A la acción de Guardar le asociamos la llamada al método createUser() de Firebase, pasándole lo que el usuario haya introducido  en los campos email y contraseña. De esta forma creamos un usuario con las credenciales que haya utilizado al registrarse

//4. Creamos la acción de Cancelar

//5. Añadimos los textFields textEmailtextPassword

//6. Añadimos la acción de Guardar y la acción de Cancelar a nuestro UIAlertController

//7. Mostramos el AlertController que acabamos de crear

Únicamente con este método, gestionaremos el alta de usuarios. Como ves, no puede ser mas sencillo.

[caja-gris]A la hora de registrar nuevos usuarios introduce una contraseña que tenga como mínimo 6 caracteres[/caja-gris]

Una vez que has completado el método signUpTapped(), compila y ejecuta la aplicación. Pulsa en el botón ¿No tienes cuenta? Regístrate y añade un email y una contraseña de como mínimo 6 caracteres, después, pulsa en Guardar.

Ahora vete a tu panel de control en Firebase y accede al menú Authentication, si actualizas la pantalla de Users, verás como aparecerá el usuario que acabas de crear desde tu aplicación. ¡Genial! Esto marcha.

 

firebase new user created

 

Una vez que ya sabemos crear usuarios desde nuestra aplicación, veamos como controlamos el inicio de sesión de dichos usuarios.

9. Inicio de Sesión de Usuarios

Para controlar el inicio de sesión de usuarios deberemos trabajar con loginTapped(), ya que es el método que está asociado al botón INICIAR SESIÓN.

Lo que queremos que haga es que compruebe si el usuario ha introducido correctamente sus credenciales y en ese caso, le mostraremos la pantalla de bienvenida. En caso contrario mostraremos los mensajes de error correspondientes.

El código que tendrás que añadir al método loginTapped() es el siguiente:

 

Entendiendo el código

Aquí tienes la explicación completa del código:

//1. Comprobamos que el usuario haya rellenado los campos de email y contraseña. En caso contrario mostramos un Alert que le informa que debe rellenar ambos campos.

//2. Si el usuario ha rellenado ambos campos llamamos al método signIn() de Firebase que es quien se encarga de hacer el inicio de sesión con las credenciales que haya introducido

//3. Si no se ha producido ningún error, mostramos la pantalla de bienvenida al usuario

//4. Si se produce algún error, mostramos una alerta informando de los motivos del error

Como ves, de nuevo se trata de un código muy sencillo que te permitirá de forma simple gestionar los inicios de sesión de los usuarios de tu aplicación.

10. Probando nuestra aplicación

Después de implementar ambos métodos ha llegado el momento de probar nuestra aplicación. Ejecútala en el simulador y sigue estos pasos:

  1. Introduce un email en el campo email y una contraseña en el campo password
  2. Pulsa en el botón INICIAR SESIÓN

Verás que se muestra un mensaje de error que nos indica que no hay ningún usuario registrado con ese email.

 

firebase errorNoUser

 

Por tanto lo que haremos será registrar un nuevo usuario. Sigue estos pasos:

  1. Pulsa en el botón ¿No tienes cuenta? Regístrate
  2. Introduce un email y un password y pulsa en el botón Guardar
  3. Introduce en la pantalla de inicio de sesión el email y el password de la cuenta de usuario que acabas de crear y pulsa en INICIAR SESIÓN

Verás que se muestra correctamente la pantalla de bienvenida.

 

firebase welcome view

 

¡Has creado una pantalla de Inicio de Sesión/Registro de Usuarios que puedes utilizar en tus propias aplicaciones. ¡Enhorabuena!

17. Resumen Final y Conclusiones

Si has seguido el tutorial paso a paso habrás podido ver lo fácil que es crear una pantalla de Login/Sign up para gestionar los usuarios que acceden a tu aplicación.

Simplemente hay que configurar el proyecto en tu cuenta de Firebase y después implementar dos métodos: Uno para el registro de nuevos usuarios y otro para el acceso de usuarios.

No puede ser mas sencillo.

Espero que este tutorial te sirva para implementar este tipo de pantallas en tus propias aplicaciones.

18. 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í.

19. Has terminado el Tutorial

Enhorabuena, has terminado el tutorial sobre Firebase

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

[ejercicio titulo = “A VER CUANTOS BALONES REMATAS…” num=”1″]

[/ejercicio]

20. ¿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.

21. Vacaciones en EfectoApple

Voy a dejar de subir Tutoriales al blog durante 4 semanas.

En los últimos meses he creado más de 20 Tutoriales para EfectoApple y necesito desconectar durante unos días.

Además esta época del año es buen momento para parar, analizar el trabajo realizado y planificar el año que viene.

Volvemos el 16 de Enero de 2017 con un nuevo Tutorial que estoy seguro que te va a encantar.

Felices Fiestas para todos los lectores de EfectoApple.

Etiquetas:
20 Comentarios
  • Jatxi
    Publicado a las 12:52h, 01 abril Responder

    En el caso en el que no hagamos la prueba de manera literal (Sin usar el proyecto del apartado 3), ¿como habría que hacer para instalar el SDK de Firebase?

    Un saludo, Gracias

  • Daniela
    Publicado a las 20:16h, 18 abril Responder

    Hola, una pregunta, cuando activo el Keychain Sharing en mi xcode, en donde dice Steps: me marca error en Add the Keychain Sharing feature to your App ID, como lo resuelvo? es un proyecto nuevo, gracias.

    • Luis R
      Publicado a las 12:56h, 23 abril Responder
      • Daniela
        Publicado a las 18:33h, 27 abril Responder

        Hola, traté de solucionarlo y me salió error en el General > Signing > Status > Failed create provisioning profile Failed to create provisioning profile.
        There are no devices registered in your account on the developer website. Plug in and select a device to have Xcode register it.

        No profiles for ‘nombre de el ID de la app’ were found
        Xcode couldn’t find a provisioning profile matching ‘ID de la app’.

        • Luis R
          Publicado a las 21:13h, 01 mayo Responder

          Hola Daniela.
          Ese es un problema del Provisioning Profile.

          Si quieres ejecutar la aplicación en un dispositivo, deberás añadir el dispositivo que estás utilizando a tu cuenta de desarrollo.

          En cambio, si lo único que quieres hacer es ejecutar la app en el simulador de Xcode, simplemente cambia la opción de ejecución de Device a iOS Simulator.

          Eso debería solucionar el problema.

          Saludos!!

  • Paullina
    Publicado a las 21:04h, 18 abril Responder

    Hola, xcode me marca error cuando puse import FirebaseAuth, ayuda por favor, gracias.

  • Servando De Jesus Munguía Saldaña
    Publicado a las 07:55h, 10 agosto Responder

    Hola Luis.

    Antes que nada, te felicito por todos los tutoriales, son excelentes, me han ayudado mucho, ya he seguido varios y me han funcionado a la perfección, nuevamente muchas felicidades y gracias por tu labor.

    Tengo una cuestión, una vez que se logea un usuario, quisiera que mi aplicación de ahora en adelante entre a la pantalla principal y no que pida cada vez que se loguee, o sea, que quede registrado en el dispositivo y cuando vuelva a ejecutarse, no entre directamente al login, entiendo que de alguna forma esto se salva guardando los datos en el dispositivo, pero como? Y como le digo a mi aplicación que si ya se logueo un usuario, no inicie en el viewcontroller del login, sino de mi pantalla principal.

    De antemano, muchas gracias.

    Saludos!

    • Luis R
      Publicado a las 13:48h, 28 agosto Responder

      Hola Servando. Muchas gracias por tu comentario!

      Para poder comprobar si el usuario ya ha hecho login con anterioridad, Firebase te ofrece el método addStateDidChangeListener().

      Para realizar esta comprobación, podrías hacer algo como esto:

      FIRAuth.auth()?.addStateDidChangeListener { auth, user in
      if let user = user {
      // User is signed in.
      } else {
      // No user is signed in.
      }
      }

      En el apartado “Detecta el estado de autenticación” de este enlace, tienes más información:
      https://firebase.google.com/docs/auth/ios/start

      Un saludo!

  • John Ore
    Publicado a las 16:01h, 04 abril Responder

    Soy nuevo en esto de la programacion y trato de aprenderlo por cuenta propia.
    He visto varios videos en Udemy y otros mas. Y me parece increible que en esta web pueda entenderlo con mas facilidad.
    Por mi parte gracias por este tutoria y su trabajo Sr. Luis.
    Deberia hacerlo un libro.

    • Luis R
      Publicado a las 17:36h, 04 abril Responder

      ¡Muchas gracias por el comentario John Ore!

      Le doy muchas vueltas a cada Tutorial y lo reescribo varias veces antes de publicarlo para intentar encontrar la forma más sencilla de explicar cada concepto. Me alegra mucho saber que darle tantas vueltas a las cosas sirve para que mis Tutoriales sean más fáciles de entender.

      Un abrazo.

  • Jesus
    Publicado a las 03:47h, 24 mayo Responder

    Hola Luis,

    Me ha encantado la forma en que explicas todo esto que para mi es un nuevo mundo ya que estoy aprendiendo a programar en swift y te doy gracias por eso. E l pequeño que se me presento fue cuando introduje el código para logginTapped Xcode me da un error “Use of unresolved identifier ‘self'” y la verdad no se como se arregla.

  • Ana
    Publicado a las 14:38h, 04 julio Responder

    Hola,
    Tengo un problema en el registro de usuarios. No me salen en el Firebase los nuevos usuarios. En cambio si los añado yo desde Firebase sí que me deja entrar con ellos en la aplicación.

    Muchas gracias

  • dares
    Publicado a las 10:07h, 13 agosto Responder

    Hola

    Estoy intentando iniciarme en la programación de apps para realizar una simple personal de añadir elementos en un mapa por mi y dos compañeros que compartimos rutas, el tema es que he descargado el proyecto y me marca errores , me pide swift conversión y me da error y ya no puedo hacer nada.

  • Gustavo Saucedo
    Publicado a las 06:30h, 03 marzo Responder

    Hola, tengo un problema, cuando trato de compilar, me marca el error: “linker command failed with exit code 1(use -v to see invocation)”. ¿Cómo lo puedo solucionar?

  • Corazon
    Publicado a las 22:38h, 13 mayo Responder

    Hola Luis como podría agregar un botón de cerrar sesión

    • Nath
      Publicado a las 22:39h, 13 mayo Responder

      Si porque nuestro profesor lo necesita jajajajaja

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.