📘 ¿Quieres una base sólida de Ionic desde cero? Si prefieres aprender Ionic (y Firebase) de forma ordenada y de principio a fin, en lugar de ir saltando entre tutoriales, te dejo mi libro: Desarrollo de aplicaciones móviles con Ionic y Firebase desde cero.
Indice Tutorial Ionic >>
- Tutorial de Ionic - Construye Apps móviles multiplataforma con ionic desde cero
- Tutorial de Ionic - Instalar ionic y las herramientas necesarias para el desarrollo
- Tutorial de Ionic - Hola Mundo en Ionic
- Tutorial de Ionic - Estructura de un proyecto Ionic
- Tutorial de Ionic - Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 1 - Navegación por Tabs
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 2: Mostrando el mapa.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 3: Añadiendo FAB, marcador y ventana modal.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 4 - Mostrando la dirección a partir de las coordenadas y sacando foto con la cámara.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 5 - Guardando nuestros sitios en una base de datos local
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 6 - Mostrar detalles del sitio guardado y abrir navegador gps para llegar a el.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 7 - Modificar nuestros sitios.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 8 - Eliminar un sitio desde el listado deslizando el item con "ItemSliding".
- Tutorial de Ionic - Peticiones http - API REST
- Tutorial de Ionic - Firebase - parte 1: Autenticación con correo y contraseña
- Tutorial de Ionic - Firebase - parte 2: Database - Guardar nuestros sitios en la nube.
- Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS
- Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.
- Firmar el apk para subirlo a Google Play
- Mostrar un mapa offline en Ionic con Leaflet
- Directiva para mostrar y ocultar menú al hacer scroll en Ionic
- Como crear una app multi idioma con Ionic
- Como crear componentes personalizados con Ionic
¡¡Atención!! este tutorial se basa en ionic 3 y está desactualizado por lo que es posible que los ejemplos no funcionen en la última versión de ionic, haz click aquí para acceder a un tutorial mas actual de Ionic.
Hola a todos, en el último post vimos como comunicarnos con el backend a través de peticiones http, Hoy vamos a aprender a utilizar Firebase como backend.
Firebase es una plataforma de Google que nos ofrece un BaaS (Backend as a Service), lo que nos permite librarnos de la tarea de tener nuestro propio servidor y programar toda la lógica del backend, autenticación de usuarios, etc, ahorrando tiempo e infraestructura.
Firebase nos permite tener una base de datos en la nube y ver los cambios que se produzcan en tiempo real, entre otros servicios también ofrece almacenamiento de archivos en la nube, mensajería, hosting y autenticación de usuarios.
Para aprender a integrar firebase con Ionic vamos a retomar nuestra App de guardar sitios y vamos ha hacer que nuestros sitios se guarden en la base de datos de firebase para tenerlos almacenados en la nube en lugar de localmente.
Para ello tenemos también que crear un usuario y autenticarnos para que en la base de datos cada usuarios tenga sus sitios guardados.
Vamos a empezar por la autenticación de usuarios, pero antes de nada debemos crear una aplicación en firebase.
Para crear una aplicación en firebase debemos acceder a la consola de firebase desde la siguiente url:
https://firebase.google.com/
Debemos estar logeados con nuestra cuenta de google, si no tienes cuanta de google tendrás que crearte una.
Para acceder a la consola seleccionamos la opción «IR A LA CONSOLA» que se encuentra en la parte superior derecha como se muestra en la siguiente imagen.
Una vez en la consola debemos añadir un nuevo proyecto, por lo tanto seleccionamos añadir proyecto y nos saldrá una ventana para introducir el nombre del proyecto y la región:
En este caso he puesto como nombre Mis Sitios y como región España.
Pulsamos el botón CREAR PROYECTO y accederemos al panel de nuestra aplicación donde tememos varias opciones.
Dejamos abierta la pestaña del navegador con el panel de firebase ya que mas tarde tenemos que volver para obtener los datos de configuración, pero ahora vamos a volver a nuestra aplicación Mis Sitios y vamos a instalar firebase y angularfire2.
Abrimos una consola y nos situamos dentro del directorio de nuestra aplicación y escribimos el siguiente comando:
npm install angularfire2 firebase --saveAhora editamos el archivo app.module.ts e importamos los y declaramos los módulos AngularFireModule, AngularFireDatabaseModule y AngularFireAuthModule, también declaramos la constante firebaseConfig que utilizamos en la declaración AngularFireModule.initializeApp(firebaseConfig) :
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 { Geolocation } from '@ionic-native/geolocation'; import { Camera } from '@ionic-native/camera'; import { DbProvider } from '../providers/db/db'; import { SQLite } from '@ionic-native/sqlite'; import { LaunchNavigator } from '@ionic-native/launch-navigator'; import { AuthProvider } from '../providers/auth/auth'; import { AngularFireModule } from 'angularfire2'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { AngularFireAuthModule } from 'angularfire2/auth'; export const firebaseConfig = { apiKey: "xxxxxxxxxx", authDomain: "your-domain-name.firebaseapp.com", databaseURL: "https://your-domain-name.firebaseio.com", storageBucket: "your-domain-name.appspot.com", messagingSenderId: '<your-messaging-sender-id>' }; @NgModule({ declarations: [ MyApp ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), AngularFireModule.initializeApp(firebaseConfig), AngularFireDatabaseModule, AngularFireAuthModule ], bootstrap: [IonicApp], entryComponents: [ MyApp ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, Geolocation, Camera, DbProvider, SQLite, LaunchNavigator, AuthProvider ] }) export class AppModule {}Los valores que hemos puesto en el objeto firebaseConfig son provisionales, ahora debemos sustituirlos por los que nos de la consola de Firebase por lo tanto regresamos a la web de Firebase. Aunque nuestra aplicación es una aplicación para móviles estamos utilizando tecnologías web para su desarrollo ya que no es una app nativa sino híbrida (revisar el primer post de este tutorial para saber más sobre tipo de aplicaciones), por lo tanto vamos a seleccionar Añade Firebase a tu aplicación web para ver las variables de configuración que luego vamos a necesitar:
Al seleccionar añade Firebase a tu aplicación web mostrará algo como esto:
Por lo tanto en nuestro archivo app.module.ts sustituimos los valores de apiKey, authDomain, databaseURL, projectId, storageBucket y messagingSenderId del objeto firebaseConfig por los que nos ha generado.
Una vez copiado los valores cerramos la ventana.
Firebase nos da diferentes métodos para registrar usuarios:
- Correo electrónico/contraseña
- Teléfono
- GitHub
- Anónimo
El la ventana que nos muestra habilitamos y le damos a Guardar:
Bien, ya tenemos configurado el método de registro de usuarios en firebase.
Ahora lo primero que necesitamos es un provider que utilizaremos para autenticar usuarios.
Por lo tanto abrimos una consola escribimos el siguiente comando que ya conocemos para crear un provider:
ionic g provider authEn el provider que acabamos de crear eliminamos los imports de Http y rxjs/add/operator/map ya que no los vamos a necesitar, e importamos AngularFireAuth y firebase:
import { Injectable } from '@angular/core'; import { AngularFireAuth } from 'angularfire2/auth'; import * as firebase from 'firebase/app'; /* Generated class for the AuthProvider provider. See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular DI. */ @Injectable() export class AuthProvider { constructor(private afAuth : AngularFireAuth) { console.log('Hello AuthProvider Provider'); } }
Ahora vamos a crear una nueva página de login para que el usuario pueda darse de alta y autenticarse, para ello desde la consola escribimos el siguiente comando:
ionic g page login
Esto nos habrá generado una nueva página llamada login, vamos a editar el archivo login.html para crear un formulario para autenticar y/o dar de alta a un usuario:
<!-- Generated template for the LoginPage page. See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation. --> <ion-header> <ion-navbar> <ion-title>login</ion-title> </ion-navbar> </ion-header> <ion-content> <ion-list> <form> <ion-item> <ion-label floating>Email</ion-label> <ion-input [(ngModel)]="user.email" name="email" type="text" autocapitalize="off" required > </ion-input> </ion-item> <ion-item> <ion-label floating>Contraseña</ion-label> <ion-input [(ngModel)]="user.password" name="password" type="password" required > </ion-input> </ion-item> <div padding> <button ion-button (click)="login()" type="submit" color="primary" block > Login </button> <button ion-button (click)="signin()" type="submit" color="secondary" block > Dar de alta </button> </div> </form> </ion-list> </ion-content>
Para simplificar vamos a utilizar el mismo formulario tanto para dar de alta a un usuario como para autenticarnos.
Como podemos ver tenemos un formulario con dos inputs, uno para el email y otro para la contraseña.
Al label de los inputs le decimos que sea de tipo floating, esto produce un efecto de desplazamiento del label al situarnos en el campo. Para saber más sobre el elemento ion-input y sus posibilidades podéis consultar el componente ion-input en la documentación oficial de ionic.
Tendremos una variable miembro llamada user que es un objeto que va a contener el email y la contraseña del usuario, si os fijáis en el campo email hacemos un data binding con [(ngModel)]= «user.email», lo mismo en el campo password con [(ngModel)]=»user.password».
Por lo tanto los cambios que hagamos en estos campos serán reflejados automáticamente en user.email y user.password.
Lo primero que haremos va a ser definir la variable user en el controlador. Abrimos el archivo login.ts y añadimos lo siguiente:
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; /** * Generated class for the LoginPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class LoginPage { user= { email : '', password : ''}; constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { console.log('ionViewDidLoad LoginPage'); } }
En el formulario tenemos dos botones, uno para dar hacer login y otro para darnos de alta.
Como todavía no tenemos ningún usuario creado lo primero que vamos ha hacer es el alta de usuario.
Lo primero que necesitamos hacer es crear en el provider authProvider una función para dar de alta a usuarios. Editamos el archivo auth.ts y añadimos la función registerUser:
// Registro de usuario
registerUser(email:string, password:string){
return this.afAuth.auth.createUserWithEmailAndPassword( email, password)
.then((res)=>{
// El usuario se ha creado correctamente.
})
.catch(err=>Promise.reject(err))
}
Como podemos observar mediante el método createUserWithEmailAndPassword pasándole como parámetros el email y password creamos un nuevo usuario.
Si nos fijamos el botón «Dar de alta» de nuestra página de login tiene asignado al evento click la función signin().
Por lo tanto vamos a definir la función signin en el controlador, para ello debemos importar también el provider AuthProvider que hemos creado anteriormente, también vamos a importar AlertController para mostrar los mensajes de error:
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular'; import { AuthProvider } from '../../providers/auth/auth'; /** * Generated class for the LoginPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class LoginPage { user = { email : '', password : ''}; constructor( public navCtrl: NavController, public navParams: NavParams, public auth : AuthProvider, public alertCtrl : AlertController ) { } ionViewDidLoad() { console.log('ionViewDidLoad LoginPage'); } signin(){ this.auth.registerUser(this.user.email,this.user.password) .then((user) => { // El usuario se ha creado correctamente }) .catch(err=>{ let alert = this.alertCtrl.create({ title: 'Error', subTitle: err.message, buttons: ['Aceptar'] }); alert.present(); }) } }
Como vemos en la función signin() llamamos al método registerUser que hemos creado anteriormente en el provider authProvider pasándole como parametros el email y la contraseña que las tenemos en this.user.email y this.user.password respectivamente.
Si se ha producido un error mostramos un alert con el mensaje de error que hayamos recibido.
Bien para que salga la página de login al iniciar la aplicación tenemos que cambiar el root de nuestra aplicación tal y como vimos en este post. Para ello vamos editamos el archivo app.components.ts y sustituimos:
rootPage:any = 'MisTabsPage';
Por:
rootPage:any = 'LoginPage';
En este momento ya podemos probar la creación de un usuario.
Ejecutamos la aplicación en el terminal, si al ejecutar os muestra un error como este:
Error: ./node_modules/firebase/utils/promise.js Module not found: Error: Can't resolve 'promise-polyfill'
Lo resolvemos instalando lo siguiente:
npm install promise-polyfill --save-exact
Una vez funcionando nuestra app aparecerá la página de login que hemos creado con el formulario para introducir usuario y contraseña. Si vamos al panel de firebase y seleccionamos Authentication y la pestaña USUARIOS veremos algo como esto:
Como podemos ver aún no hay ningún usuario creado, podríamos crear uno desde el propio panel de firebase pulsando el botón añadir usuario, pero lo que nos interesa es crearlos directamente desde nuestra aplicación.
Al ejecutar nuestra aplicación ahora mostrará la pagina de login que hemos creado con el formulario para introducir el email y la contraseña:
Si introducimos una dirección de correo y una contraseña y pulsamos el botón «Dar de alta» al refrescar la pantalla de firebase ahora veréis el usuario que acabáis de crear en el panel.
Ahora que ya podemos crear usuarios tenemos que autenticarlos y una vez autenticados tenemos que cambiar la página activa por la página misTabsPage.
Vayamos por partes.
Lo primero que necesitamos es crear en authProvider un método para autenticarnos con Correo electrónico / Contraseña, por lo tanto editamos auth.ts y añadimos el siguiente método:
// Login de usuario
loginUser(email:string, password:string){
return this.afAuth.auth.signInWithEmailAndPassword(email, password)
.then(user=>Promise.resolve(user))
.catch(err=>Promise.reject(err))
}
Con el método signInWithEmailAndPassword(email, password) nos autenticamos en firebase, si todo va bien nos devolverá el usuario, si ha habido algo incorrecto nos devolverá un error.
Ahora en login.ts vamos a crear el método login() que se llama al pulsar el botón Login:
login() { this.auth.loginUser(this.user.email,this.user.password ).then((user) => { } ) .catch(err=>{ let alert = this.alertCtrl.create({ title: 'Error', subTitle: err.message, buttons: ['Aceptar'] }); alert.present(); }) }
Como vemos lo que hace login es llamar a la función loginUser de authProvider pasandole el email y la contraseña.
Ahora vamos a necesitar un método que nos devuelva la sesión, editamos auth.ts y añadimos la siguiente función:
// Devuelve la session
get Session(){
return this.afAuth.authState;
}
Si no estas familiarizado con TypeScript puede que pienses que hay un error ya que entre get y Session() hay un espacio. Esta es una peculiaridad de TypeScript que nos permite hacer getters y setters de esta manera. Para obtener la sesión en lugar de llamar a la función simplemente llamamos a Session como si fuese un atributo de la clase, es decir sin el get y sin paréntesis de esta manera: this.auth.Session.subscribe(…), en este caso usamos subscribe porque Session devuelve this.afAuth.authState que a su vez devuelve un observable.
Ahora vamos a comprobar la sesión en el evento platform.ready de app.components.ts que se ejecuta cuando la app está cardada y lista y si estamos autenticados haremos que la página activa sea misTabsPage, pero si la sesión no está activa la página que se muestre se la de login.
Editamos app.components.ts y añadimos lo siguiente:
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 { DbProvider } from '../providers/db/db'; import { AuthProvider } from '../providers/auth/auth'; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage:any = 'LoginPage'; constructor( platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public db: DbProvider, private auth: AuthProvider ) { 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. this.auth.Session.subscribe(session=>{ if(session){ this.rootPage = 'MisTabsPage'; } else{ this.rootPage = 'LoginPage'; } }); statusBar.styleDefault(); splashScreen.hide(); this.db.openDb() .then(() => this.db.createTableSitios()) }); } }
Tenemos que importar e inyectar en el constructor nuestro provider AuthProvider.
Después en patform.ready nos suscribimos a Session que como he explicado es un getter que nos devuelve un observable, si hay un cambio en la sesión automáticamente cambiara rootPage para mostrar la página de login o las pestañas en función de si tenemos la sesión activa o no.
También vamos a necesitar un método para cerrar sesión (logout), por lo tanto editamos auth.ts y añadimos el método logout:
// Logout de usuario
logout(){
this.afAuth.auth.signOut().then(()=>{
// hemos salido
})
}
Por simplificar vamos a colocar un botón de cerrar sesión en la página info que no la estamos utilizando para nada, abrimos info.html y añadimos el siguiente código:
<!-- Generated template for the InfoPage page. See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation. --> <ion-header> <ion-navbar> <ion-title>Info</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button block (click)="cerrarSesion()">Cerrar Sesión</button> </ion-content>
Simplemente hemos añadido un botón que al hacer click llamara a la función cerrarSession().
Vamos ahora a definir la función cerrarSesion en el controlador, abrimos info.ts y añadimos el siguiente código:
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { AuthProvider } from '../../providers/auth/auth'; /** * Generated class for the InfoPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-info', templateUrl: 'info.html', }) export class InfoPage { constructor( public navCtrl: NavController, public navParams: NavParams, public auth : AuthProvider) { } ionViewDidLoad() { console.log('ionViewDidLoad InfoPage'); } cerrarSesion(){ this.auth.logout(); } }
Simplemente importamos el provider AuthProvider, lo inyectamos en el constructor y en la función cerrarSesion llamamos al método logout del provider que acabamos de crear.
Si probamos ahora nuestra aplicación y accedemos a la pestaña info, al pulsar sobre el botón cerrar sesión nos mostrará de nuevo la página de login. Esto ocurre como ya he explicado porque en app.components.ts estamos «escuchando» a la variable Session que es un observable, al cerrar la sesión automáticamente cambia rootPage por ‘LoginPage’.
Para que no queden dudas de como debe quedar el provider AuthProvider muestro a continuación como debe de quedar el código completo del archivo auth.ts:
import { Injectable } from '@angular/core'; import { AngularFireAuth } from 'angularfire2/auth'; import * as firebase from 'firebase/app'; /* Generated class for the AuthProvider provider. See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular DI. */ @Injectable() export class AuthProvider { constructor(private afAuth : AngularFireAuth) { console.log('Hello AuthProvider Provider'); } // Registro de usuario registerUser(email:string, password:string){ return this.afAuth.auth.createUserWithEmailAndPassword( email, password) .then((res)=>{ this.afAuth.auth.signInWithEmailAndPassword(email, password) }) .then(user=>Promise.resolve(user)) .catch(err=>Promise.reject(err)) } // Login de usuario loginUser(email:string, password:string){ return this.afAuth.auth.signInWithEmailAndPassword(email, password) .then(user=>Promise.resolve(user)) .catch(err=>Promise.reject(err)) } // Logout de usuario logout(){ this.afAuth.auth.signOut().then(()=>{ // hemos salido }) } // Devuelve la session get Session(){ return this.afAuth.authState; } }
Eso es todo por hoy.
Hoy hemos aprendido a crear usuario y autenticarnos mediante correo electronico y contraseña en firebase. El el próximo post aprenderemos a guardar nuestros sitios en la base de datos de firebase.
Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts :-),
También puedes seguirme en Twitter en @revi_apps y no olvides que me ayudas mucho si compartes este post en las redes sociales.
Pingback: Tutorial de Ionic – Firebase – parte 2: Database – Guardar nuestros sitios en la nube. | Reviblog
Uno de los mejores post de todo internet por no decir el mejor … Super claro !!
Hola de nuevo. Tengo una pregunta y espero me ayudes.
En su código usted ha validado que si la sesión es falsa la pagina root sea login sin posibilidad de mostrar otra pagina. Mi duda es la siguiente …¿Que tendria que modificar para poder realizar el registro desde otra pagina y no desde el mismo login?
Hola Luis,
En este ejemplo unifique en un mismo formulario el registro y el login para hacerlo más sencillo,
para hacer el registro desde otra página simplemente debes crear una página de registro y poner un enlace o un botón en la página de login que en el evento click llame a una función del controlador y luego dentro de esa función hacer que se muestre la página de registro:
this.navCtrl.push(‘RegistroPage’);
En la página de registro tienes que importar el AuthProvider y poner el código para registrar un usuario.
Un saludo
Gracias por su respuesta. Ya he realizado dicho cambio pero el codigo de sesion mantiene la rootpage solo en el login si es que no hay sesion y no me permite mandar otra pagina. quizas sepa alguna manera de solucionar esto?
Hola, excelente post y de antemano gracias.Me preguntaba si me podrias ayudar sobre como hacer que cuando ya esta echa la cuenta en la base de datos, si la ingreso con login me mande a la sesion q inicio.
ejmplo:una page de perfil q muestre q ya inicio o esta dentro de la sesion
Hola Miguel,
En app.component.ts puedes mandar a la página de login cuando no hay session:
this.auth.Session.subscribe(session=>{
if(!session){
this.rootPage = ‘LoginPage’;
}
});
Y luego en el controlador de la página de login en el método login cuando se ha logeado correctamente mandarle a la página que quieras con setRoot, por ejemplo:
login()
{
this.auth.loginUser(this.user.email,this.user.password ).then((user) => {
this.navCtrl.setRoot(TuPaginaDeUsiario); // aquí le mandamos a la página que deseemos una vez se ha logeado
}
)
.catch(err=>{
let alert = this.alertCtrl.create({
title: ‘Error’,
subTitle: err.message,
buttons: [‘Aceptar’]
});
alert.present();
})
}
Espero que te ayude.
Un saludo
Hola, exelente tutorial, tengo un problema, no me funciona el ingreso, tengo todo tal cual como usted, pero al momento de ingresar con mi correo y contraseña (ya registrados) y presionar «login» cambia de pagina, se mantiene en el login siempre, ojala pueda ayudarme
Sabe que al cambiar el root en el app.component para saber si la sesión está activa o no, me lanza el error: uncaught (in promise): invalid link: TabsPage.
Hola, Muchas gracias por compartir este tipo de post… son de gran ayuda! Tengo una duda en el caso de que queramos validar que ese usuario que se esta dando de alta con el correo electrónico como podríamos activar la cuenta? como en la mayoria de sitios hay que validar antes de poder iniciar. Gracias
Hola muy bueno el post, pero me esta dando este error;
Runtime Error
Uncaught (in promise): invalid link: HomePage
Tiene que ver con la validacion en app.components
this.auth.Session.subscribe(session => {
if(session){
this.rootPage = ‘HomePage’;
}
else{
this.rootPage = ‘LoginPage’;
}
});
Espero puedas ayudarme, saludos
Hola hvallenilla,
Si tu pagina HomePage no tiene creado el archivo home.module.ts tienes que poner HomePage sin comillas.
Al generar una pagina con ionic generator se crea automáticamente el archivo home.module.ts sin embargo al generar una proyecto por defecto crea la página home sin el archivo de módulo.
Un saludo
Era exactamente eso Eduardo, muchas gracias por la ayuda Saludos
Buenas tardes , antes que nada muy buen post todo clarisimo, una duda aver si pueden ayudarme, como le puedo pasar los datos introducidos en el login a otra pantalla ? es decir , si yo introduzco el correo y la contraseña, en la siguiente pagina me ponga Bienvenido «y el correo» , gracias.
Hola Juan.
Una forma de hacerlo puede ser en el provider auth.ts añadir una función que te devuelva el email, podría ser algo como esto:
getUserEmail(){
return this.afAuth.auth.currentUser.email;
}
luego en el controlador de donde quieras mostrarlo importar el provider, inyectarlo en el constructor y crear una variable para contener el email que luego mostrarás donde necesites, por ejemplo:
this.userEmail = this.auth.getUserEmail(); // habiendo declarado antes la variable userEmail como miembro de la clase.
Un saludo
Hola,
Este blog fue de gran ayuda para mi aplicación pero tengo un pequeño problema.
Cuando escribo un correo para que se pueda registrar da ese error y se va directo al alerta.
ESTE ES EL ERROR
POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=AIzaSyAuy9DinarVK-WNIND2PSacGZy52GZPfC4 400 ()
hola gran articulo, todo funciono correctamente. Una preguntilla como puedo modificar las alert de autentificacion? están en ingles para ponerlas en español
Contraseña incorrecta….
Hola jj, una opción que que se me ocurre es que en función del código de error que recibas muestres tu un mesaje u otro en español.
Un saludo
Hola! muchas gracias por tus increíbles artículos! quería consultar si me podrías ayudar en lo siguiente: como puedo obtener el id que firebase asigno al usuario que tiene sesion activa?
Muchas gracias!
Hola Jacqueline,
Lo puedes obtener con:
this.afAuth.auth.currentUser.uid;
De todas formas si continuas con el tutorial en el siguiente post de esta serie explico como obtener el id de usuario: http://reviblog.net/2017/08/12/tutorial-de-ionic-firebase-parte-2-database-guardar-nuestros-sitios-en-la-nube/
Un saludo
Muchas gracias! yo sabia que en alguno de los artículos lo había visto! pero después no lo encontré! muchas gracias por la respuesta!
Hola buenas noches, lo que pasa es que cuando voy a enviar datos de loginPages otra pagina MisTabsPage,a tra ves de this.navCtrl.push(PerfilPage, {nuser:nuser});, me los carga momentania mente y luego me los borra, creo que es por la parte de app component.ts