Autenticación con correo y contraseña en Ionic con Firebase – Parte 2

En el primera parte pudimos crear las pantallas que vamos a necesitar en esta aplicación y también configuramos el proyecto en Firebase. Ahora vamos a empezar a integrar Firebase en la aplicación.

AngularFire2

Como ya sabemos, Ionic utiliza Angular como framework de desarrollo, entonces vamos a utilizar AngularFire, librería oficial de Angular para Firebase, para integrarnos con Firebase.

Primero necesitamos instalar los paquetes de firebase y angularfire2 en nuestro proyecto, para ello, utilizando la consola, nos ponemos dentro de la carpeta del proyecto y ejecutamos:

npm install firebase --save
npm install angularfire2 --save

Luego vamos a modificar el módulo principal o raíz de la aplicación AppModule, que se encuentra en el archivo src/app/app.module.ts para importar el módulo de AngularFire:

  • En las líneas 7 y 8 importamos los módulo de AngularFire que vamos a utilizar AngularFireModule y AngularFireAuthModule.
  • Empezando en la línea 15 definimos la constante firebaseConfig con las configuraciones de nuestro proyecto de Firebase, las cuales necesitamos para inicializar AngularFire (ya vamos a ver de dónde optenemos esa información).
  • Finalmente en las líneas 34 y 35 inicializamos el módulo AngularFireModule utilizando las configuraciones establecidas en la constante firebaseConfig, y adicionamos estos módulos importados a los imports de nuestro módulo AppModule, lo cual quiere decir que todos los exports (como por ejemplo clases) de estos módulos van a estar disponible en nuestro módulo.

Las configuraciones de Firebase para nuestro proyecto las podemos obtener desde la consola de Firebase. Si accedemos a la consola de Firebase y vamos a la página de “Overview” de nuestro proyecto vamos a poder ver tres opciones para adicionar Firebase a nuestras aplicaciones, una para iOS, otra para Android y finalmente una para web:

Opciones para configurar aplicaciones en Firebase
Opciones para configurar aplicaciones en Firebase

Nosotros vamos a seleccionar la opción para web, ya que nuestra aplicación, después de todo, es una “aplicación web” o utiliza tecnologías para la web. Haciendo click en dicha opción veremos la siguiente ventana:

Configuración para una aplicación web
Configuración para una aplicación web

Como vemos, aquí tenemos toda la información que necesitamos para inicializar AngularFire en nuestra aplicación.

Modelo

Vamos a crear un modelo sencillo para guardar los datos del usuario (correo y contraseña) el cual vamos a reutilizar tanto en la pantalla de inicio de sesión como en la de registro. Para ello creamos una carpeta llamada models dentro de la carpeta src y luego adicionamos el archivo src/models/user-model.ts:

No hay mucho que comentar aquí, simplemente una clase con dos propiedades.

Proveedor de autenticación

Vamos a crear un servicio/proveedor de autenticación que sea el encargado de utilizar el API de AngularFire para realizar las funciones de autenticación que necesitamos como iniciar sesión, crear usuario, cerrar sesión y saber si un usuario está o no autenticado.

Para ello creamos una carpeta llamada providers dentro de la carpeta src y luego adicionamos el archivo src/providers/auth-service.ts:

  • Importamos en la línea 3 la clase AngularFireAuth de AngularFire que nos permite acceder al API de autenticación.
  • En la siguiente línea importamos las clases User y Promise de Firebase.
  • En el constructor inyectamos una instancia de AngularFireAuth y nos suscribimos al cambio de estado de la autenticación, de este modo podemos saber cuando un usuario inicia o cierra sesión, obtener los datos básicos del usuario y guardarlos en la propiedad user que definimos en la línea 10.
  • El método autenticated() compara la propiedad user con null, de este modo sabemos si el usuario está o no autenticado.
  • El método signInWithEmailAndPassword recibe una instancia del modelo UserModel del cual utiliza el correo y la contraseña para autenticar al usuario llamando al método de igual nombre de la propiedad auth (instancia de la clase Auth de Firebase) perteneciente a angularFireAuth.
  • El método createUserWithEmailAndPassword es muy similar al anterior sólo que este es para crear un usuario, utilizando el método de igual nombre de la propiedad auth en angularFireAuth.
  • Finalmente el método signOut() utiliza el método de igual nombre de la propiedad auth en angularFireAuth para cerrar la sesión.

Antes de poder utilizar este proveedor en nuestras páginas tenemos que hacerlo disponible, para ello, una vez más modificaremos nuestro módulo AppModule:

Primero lo importamos en la línea 10 y luego lo adicionamos a la lista de proveedores en la línea 50.

Registrando usuarios

Ahora si es momento de empezar a registrar usuarios en Firebase, regresando al código de la pantalla de registro en src/pages/signup/signup.ts y a la vista en src/pages/signup/signup.html:

Muchos de los cambios realizados son cambios sencillos relacionados tanto a Angular como a Ionic como importar la página de inicio de sesión, el modelo UserModel y el proveedor AuthService, inyectar servicios a través del constructor, mostrar una alerta, etc., vamos a ver en detalles el métido signup().

Cuando se ejecuta el método signup() vamos a mostrar una ventana de “cargando” mientras estemos registrando al usuario, luego utilizamos el servicio AuthService que inyectamos en el constructor para ejecutar su método createUserWithEmailAndPassword() el cual recibe el modelo UserModel el cual ya va a tener los datos del usuario capturados en la vista (como veremos a continuación), este método devuelve una promesa por lo que en el then() the la promesa vamos a suponer que el usuario fue registrado por lo que enviamos al usuario a la pantalla de inicio de sesión para que pueda utilizar sus nuevas credenciales y entrar en la aplicación; de lo contrario, en el catch() vamos mostrar una alerta de error. En ambos casos primamente cerramos la ventana de “cargando” utilizando con la llamada loading.dismiss();.

En la vista sólo estamos enlazando los campos input al modelo userModel definido en el componente/controlador de la pantalla, configurando el formulario y validaciones como pueden ver en las líneas 8, 12, 18 y 22.

En este punto podemos probar la funcionalidad de registrar usuarios. Una vez que hayamos registrado alguno podemos ir a la consola de Firebase, en la sección de autenticación y veremos al usuario registrado:

Usuarios en Firebase
Usuarios en Firebase

Iniciando sesión

Ahora regresaremos a la pantalla de inicio de sesión en los archivos src/pages/signin/signin.ts y src/pages/signin/signin.html:

Leyendo el código podemos ver que es bastante parecido al de signup.ts sólo que en este caso utilizamos el método signInWithEmailAndPassword() del servicio de autenticación para autenticar al usuario, si todo va bien enviamos al usuario a la pantalla de inicio HomePage.

Igual que en signup.html realizamos el enlace (binding) con el modelo, configuramos el formulario y sólo activamos el botón “Entrar” si todas las validaciones son válidas.

Y ya podemos empezar a iniciar sesión con los usuarios que hayamos registrado.

Conclusiones

Como pudimos ver, es muy conveniente utilizar servicios como Firebase para que se encarguen de funcionalidades de backend que de lo contrario tendríamos que escribir y mantener nosotros mismos. Por otro lado Firebase nos brinda la confianza de Google Cloud como infraestructura, si nuestra aplicación comienza a tener un volumen grande de usuarios podemos escalar sin problemas.

En futuros posts veremos cómo utilizar otros métodos de autenticación de Firebase (como Facebook) y otras funcionalidades de Firebase (como la base de datos).

Anuncios

7 comentarios en “Autenticación con correo y contraseña en Ionic con Firebase – Parte 2

    1. Si, siempre y cuando tengas el presupuesto necesario (como mismo sucede en el caso de AWS y Azure), con el plan gratis tienes algunas cuotas con las que puedes empezar, en dependencia del volumen que vaya teniendo tu proyecto vas a necesitar más capacidad de procesamiento, aquí puedes ver los precios de los distintos planes https://firebase.google.com/pricing/
      Tomado de la página de inicio de Firebase: “Firebase is built on Google infrastructure and scales automatically, for even the largest apps”.

  1. Hola excelente tutorial y te lo agradezco muchisimo ahora solo una duda al querer compilar la app o subirla a ionic view me manda un error en el promise-polyfill.js segun entiendo podrias ayudarme

    1. Hola Ruben, gracias por tu comentario, realmente necesito más detalles para poder tratar de ayudarte, ¿exactamente cuándo te da el error? ¿cuando ejecutas ionic upload? o ¿cuando estás ejecutando ya la aplicación dentro de Ionic View?

  2. Hola, gracias por el tutorial, espero que pronto agregues más contenido y estoy en la espera de la autenticación con face y google, también me surgió la duda de qué pasa si un usuario no recuerda su contraseña, cómo la podría recuperar o en su caso reestablecer y también cuál es el procedimiento para salir de su sesión (deslogearse).

    soy principiante y te agradezco mucho.

    Saludos!!!

    1. Hola, me alegra que te sea útil el contenido, el API de Firebase te permite implementar cambio de contraseña, resetear contraseña y hasta enviar códigos de confirmación para validar el usuario cuando se registra, poco a poco voy a ir publicando sobre esos temas al igual que autenticación con Facebook. Saludos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s