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.
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
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 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ion-header> | |
| <ion-navbar> | |
| <ion-title>Registrarse</ion-title> | |
| </ion-navbar> | |
| </ion-header> | |
| <ion-content> | |
| <form> | |
| <ion-list> | |
| <ion-item> | |
| <ion-label stacked>Correo electrónico</ion-label> | |
| <ion-input type="email" autocorrect="off" autocapitalize="none" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" | |
| required></ion-input> | |
| </ion-item> | |
| <ion-item> | |
| <ion-label stacked>Contraseña</ion-label> | |
| <ion-input type="password" name="password" required minlength="6"></ion-input> | |
| </ion-item> | |
| <div padding-left padding-right padding-top> | |
| <button ion-button block>Registrarse</button> | |
| </div> | |
| </ion-list> | |
| </form> | |
| </ion-content> |
signup.ts
Componente que controla el funcionamiento de la página de registro, hasta el momento no realiza nada interesante como pueden ver:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component } from '@angular/core'; | |
| import { NavController } from 'ionic-angular'; | |
| @Component({ | |
| selector: 'page-signup', | |
| templateUrl: 'signup.html' | |
| }) | |
| export class SignUpPage { | |
| constructor(public navCtrl: NavController) { | |
| } | |
| signUp() { | |
| } | |
| } |
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:
https://gist.github.com/geykel/2e8099494eb4ed1ae8d527407372fcb6
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component } from '@angular/core'; | |
| import { NavController } from 'ionic-angular'; | |
| import { SignUpPage } from '../signup/signup'; | |
| @Component({ | |
| selector: 'page-signin', | |
| templateUrl: 'signin.html' | |
| }) | |
| export class SignInPage { | |
| constructor(public navCtrl: NavController) { | |
| } | |
| signIn() { | |
| } | |
| signUp() { | |
| this.navCtrl.push(SignUpPage); | |
| } | |
| } |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { BrowserModule } from '@angular/platform-browser'; | |
| import { ErrorHandler, NgModule } from '@angular/core'; | |
| import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; | |
| import { SplashScreen } from '@ionic-native/splash-screen'; | |
| import { StatusBar } from '@ionic-native/status-bar'; | |
| import { MyApp } from './app.component'; | |
| import { HomePage } from '../pages/home/home'; | |
| import { SignInPage } from '../pages/signin/signin'; | |
| import { SignUpPage } from '../pages/signup/signup'; | |
| @NgModule({ | |
| declarations: [ | |
| MyApp, | |
| HomePage, | |
| SignInPage, | |
| SignUpPage | |
| ], | |
| imports: [ | |
| BrowserModule, | |
| IonicModule.forRoot(MyApp) | |
| ], | |
| bootstrap: [IonicApp], | |
| entryComponents: [ | |
| MyApp, | |
| HomePage, | |
| SignInPage, | |
| SignUpPage | |
| ], | |
| providers: [ | |
| StatusBar, | |
| SplashScreen, | |
| { provide: ErrorHandler, useClass: IonicErrorHandler } | |
| ] | |
| }) | |
| export class AppModule { } |
- 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component } from '@angular/core'; | |
| import { Platform } from 'ionic-angular'; | |
| import { StatusBar } from '@ionic-native/status-bar'; | |
| import { SplashScreen } from '@ionic-native/splash-screen'; | |
| import { SignInPage } from '../pages/signin/signin'; | |
| @Component({ | |
| templateUrl: 'app.html' | |
| }) | |
| export class MyApp { | |
| rootPage: any = SignInPage; | |
| constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { | |
| platform.ready().then(() => { | |
| // Okay, so the platform is ready and our plugins are available. | |
| // Here you can do any higher level native things you might need. | |
| statusBar.styleDefault(); | |
| splashScreen.hide(); | |
| }); | |
| } | |
| } |
- 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:
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”:
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:
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:
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.
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 lápiz, al hacerle click, veremos la siguiente ventana:
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.
Si te gustó el post ayuda a compartirlo en tus redes sociales 🙂
Hola, I'm Geykel 
[…] el primera parte pudimos crear las pantallas que vamos a necesitar en esta aplicación y también configuramos el […]
[…] posts anteriores vimos cómo utilizar Firebase con Ionic para autenticar usuarios registrar y autenticar usuarios utilizand…; en esta ocasión vamos a ver cómo utilizar el proveedor de Facebook de Firebase para autenticar […]
El tutorial me parecio bueno, pero quedo faltando la magia o no se si lo tienes en otro post, que es la integración
Hola Christian, que bueno que te haya gustado, si hay una segunda parte 🙂 Saludos.