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

Firebase contiene un conjunto de productos, tanto herramientas como infraestructura, que nos permiten desarrollar rápidamente el backend de nuestra aplicación, en otras palabras, es un BaaS (Backend as a Service) construido sobre la infraestructura de Google Cloud. Entre los productos que nos brinda tenemos base de datos de tiempo real, almacenamiento de archivos en la nube, mensajería, reporte de errores, hosting, configuración remota, autenticación, entre otras.

firebase-ionic

Hoy vamos a ver cómo crear una aplicación con Ionic, que utilice el servicio de autenticación de Firebase. Este servicio de autenticación nos brinda varios métodos de autenticación, hoy sólo vamos a utilizar correo electrónico y contraseña.

Nota: Antes de continuar es importante destacar que en estos posts no vamos a profundizar en detalles de Ionic o Angular mas sólo en las partes que estén relacionadas a la integración con Firebase.

Aplicación de Ionic

Primeramente vamos a crear la aplicación Ionic con todas las pantallas que vamos a necesitar, la pantalla de inicio, una pantalla para registrar el usuario y otra para iniciar sesión.

Vamos a utilizar el CLI de Ionic para crear el proyecto, pero antes vamos a actualizarlo a la última versión (en estos momentos 3.1.2):

npm install -g ionic

Utilizando el comando start crearemos el proyecto “IonFire” basándonos en la plantilla blank:

ionic start IonFire blank
create-ionfire
Salida del comando start

Si nos cambiamos a la carpeta creada “IonFire” y ejecutamos la aplicación en estos momentos con (ionic serve), podemos ver que ya el CLI nos ahorró el trabajo de crear la página de inicio, la cual vamos a dejar tal cual está porque no es de interés para es post:

Página de inicio creada por el CLI
Página de inicio creada por el CLI

Página de registro

Vamos a crear la pantalla de registro, para ello creamos la carpeta “signup” dentro de la carpeta src/pages y creamos los siguiente dos archivos:

signup.html
Vista de la pantalla de registro, la cual permite introducir el correo electrónico y la contraseña para registrar al usuario, contiene algunas validaciones en los campos ion-input:

signup.ts
Componente que controla el funcionamiento de la página de registro, hasta el momento no realiza nada interesante como pueden ver:

Página de inicio de sesión

Vamos a crear la pantalla de inicio de sesión, parecido a la de registro, creamos la carpeta “signin” dentro de la carpeta src/pages y creamos los siguiente dos archivos:

signin.html
Vista de la pantalla de inicio de sesión, muy parecida a la de registro sólo que su función será permitir al usuario iniciar sesión; también contiene un enlace a la página de registro:

signin.ts
Componente que controla el funcionamiento de la página de inicio de sesión, nada interesante aún, sólo contiene un método implementado que nos permite navegar hacia la pantalla de registro:

Ya que tenemos las dos pantallas que nos faltaban necesitamos hacer unos ajustes para registrar las mismas en nuestra aplicación y así poder utilizarlas, para ello debemos modificar el módulo principal o raíz de la aplicación que se encuentra en el archivo src/app/app.module.ts de la siguiente manera:

  • En las líneas 9 y 10 importamos las pantallas SignInPage y SignUpPage respectivamente.
  • En las líneas 16 y 17 registramos estas pantallas (componentes) en “declarations”, esta es la forma de hacerlos disponibles a otros componentes dentro del mismo módulo.
  • En las líneas 27 y 28 las registramos como “entryComponents”.

En este punto ya podemos ejecutar la aplicación (ionic serve) y no deberíamos recibir errores, sin embargo sólo vamos a poder ver la pantalla de inicio, vamos a cambiar este comportamiento de modo que por defecto siempre la aplicación se abra en la pantalla de inicio de sesión. Para ello debemos modificar el componente MyApp que se encuentra en el archivo src/app/app.component.ts de la siguiente manera:

  • En la línea 6 importamos la pantalla SignInPage.
  • En la línea 12 asignamos SignInPage a la propiedad rootPage lo cual va a permitir iniciar en la pantalla de inicio de sesión por defecto.

Proyecto de Firebase

Ya estamos listos para empezar a integrar Firebase a nuestro proyecto. Lo primero que debemos a hacer es crear un nuevo proyecto en la consola de Firebase, vamos a necesitar una cuenta de Google para poder acceder a Firebase.

Una vez que nos encontremos dentro de la consola de Firebase, en la página principal podemos ver los proyectos recientes y a la izquierda de los mismos tenemos una opción para crear un nuevo proyecto:

Proyectos recientes en la consola de Firebase
Proyectos recientes en la consola de Firebase

Vamos a crear nuesto nuevo proyecto seleccionando la opción “Add project”, veremos la siguiente ventana donde podemos escribir el nombre del proyecto, en este caso “IonFire”:

Nuevo proyecto de Firebase
Nuevo proyecto de Firebase

Cuando hayamos introducido el nombre hacemos click en el botón “Create Project” y Firebase se va a encargar de la creación del mismo, una vez terminado nos muestra la página de “Overview” del proyecto:

Página
Página “Overview” del proyecto en Firebase

Servicio de Autenticación en Firebase

Teniendo el proyecto creado en Firebase podemos empezar a configurar los servicios, en este caso sólo vamos a utilizar el servicio de autenticación, el cual nos permite autenticar y manejar nuestros usuarios sin necesidad de tener un servicio de backend escrito por nosotros.

Para activar este servicio de autenticación sólo necesitamos activar al menos uno de los proveedores de autenticación que nos brinda Firebase. Vamos a seleccionar el menú Authentication que se encuentra en el panel de navegación de la izquieda:

Servicio de autenticación de Firebase
Servicio de autenticación de Firebase

Como podemos ver, entre otras cosas, nos muestra una tabla con los usuarios registrados en nuestra aplicación, por supuesto, aún no tenemos usuarios por lo que la tabla está vacía. Debemos activar al menos un proveedor, para ello podemos seleccionar el tab “SIGN-IN METHOD” o hacer click en el botón “SET UP SIGN-IN METHOD”, este botón solamente sale cuando no hay usuarios registrados, por lo que generalmente vamos a utilizar el tab.

Métodos/proveedores de autenticación
Métodos/proveedores de autenticación

En la imagen anterior podemos ver todos los proveedores existentes, para activar el proovedor“Email/Password”, nos colocamos encima del mismo y veremos cómo al final de la fila aparece un ícono de un lapiz, al hacerle click, veremos la siguiente ventana:

Habilitar proveedor de autenticación
Habilitar proveedor de autenticación

En esta ventana activamos el proovedor y hacemos click en “SAVE”. Si regresamos al listado de proveedores veremos como ahora este proveedor se muestra como activado.

En este momento ya tenemos todo listo en la consola de Firebase, asi que ya podemos empezar a escribir el código necesario para registrar y autenticar usuarios en nuestra aplicación, lo cual vamos a ver en la Parte 2.

 

Anuncios

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