Exportar e Importar Usuarios en Firebase Auth

Clase 13 de 32 • Curso de Firebase 5 para Web

Resumen

El desafío de esta clase es crear la funcionalidad de recordar contraseña para nuestra aplicación, si nuestros usuarios olvidan su contraseña deberían hacer click en un nuevo botón personalizado, escribir su email y hacer click en el enlace que vamos a enviar por correo electrónico gracias a Firebase.

Jose David Ocaña Ballester

student•

Envía un correo electrónico de restablecimiento de la contraseña

resetPasswordByEmail(email) {
    if (email) {
      const auth = firebase.auth();

      const configuracion = {
        url: "http://localhost:3000/"
      };

      auth
        .sendPasswordResetEmail(email, configuracion)
        .then(result => {
          console.log(result);
          Materialize.toast(
            `Se ha enviado un correo para reestablecer la contraseña`,
            4000
          );

          $(".modal").modal("close");
        })
        .catch(error => {
          console.log(error);
          Materialize.toast(error.message, 4000);
        });
    } else {
      Materialize.toast(`Por favor ingrese su correo`, 4000);
    }
  }

Documentación de Firebase https://firebase.google.com/docs/auth/web/manage-users?hl=es-419

Juan Castro

teacher•

Notas de la clase:

Podemos importar y exportar la data de nuestros usuarios en archivos JSON y CVS (información separada por comas) 👍 🕹
Necesitamos instalar las firebase-tools para realizar estos procedimientos 🆗 📦
Firebase sigue las mejores prácticas y reglas de seguridad para almacenar las contraseñas 👌 🎉
El comando para importar datos desde Firebase es: firebase auth:import 👈
El comando para export los datos de Firebase es: firebase export 👈

Alexander Orellana Manayalle

student•

Existe luego un ejemplo real de exportación de usuarios bajo linea de comandos?

Juan Castro

teacher•

@alexanderorellanam Sí. Cuando queremos migrar los datos de los usuarios a otra base de datos.

Albert Jiménez

student•

Eso si deja en claro que firebase es un monstruo ya que no te amarra con cosas como retener tus usuarios.

Erick Daniel Pérez Mata

student•

Mi solucion: Index.html

<div class="div-btnInicioSesion">
                            <a id="btnRecordarPassword" class="btn waves-effect waves-light">Recordar Password<i class="material-icons right">send</i></a>
                        </div>

Autenticacion.js (codigo tomado del compañero @Josedavid92):

resetPasswordByEmail(email) {
    if (email) {
      const auth = firebase.auth();

      const configuracion = {
        url: "http://localhost:3000/"
      };

      auth
        .sendPasswordResetEmail(email, configuracion)
        .then(result => {
          console.log(result);
          Materialize.toast(
            `Se ha enviado un correo para reestablecer la contraseña`,
            4000
          );

          $(".modal").modal("close");
        })
        .catch(error => {
          console.log(error);
          Materialize.toast(error.message, 4000);
        });
    } else {
      Materialize.toast(`Por favor ingrese su correo`, 4000);
    }
  }

authController.js

$("#btnRecordarPassword").click(() => {
        const email = $('#emailSesion').val();
        const auth = new Autenticacion();
        auth.resetPasswordByEmail(email);
    });

Edwin Rebolledo

student•

El trafico que se genera durante el desarrollo hacia firebase (desde localhost) se cuenta en la cuota del servicio que es gratuito? es decir ese trafico se rebaja de la cuota mensual gratis?

Henry Yerry Bravo Sánchez

student•

buena pregunta :o

Diana Paola castañeda talero

student•

Creería que si, ya que firebase no mira si es en localhost o no, simplemente ya estás haciendo uso de las herramientas y van sumando.

Alejandro González Reyes

student•

El código funciona correctamente, pero envia tres correos (cuando debería emitir solo uno) a pesar que solo se presiona 1 vez el boton

recuperarPasswordEmail (email) {
    // Verificar si se ha indicado un email para proceder a restablecer la contraseña
    if(email) {
      console.log(email);
      // Le indicamos la URL a la que debe redireccionar si el proceso es correcto    
      const configuracion = {
        url: 'http://localhost:3000/'
      }
      // El metodo sendPasswordResetEmail se encarga de reestableer la contraseña para el email indicado
      firebase.auth().sendPasswordResetEmail(email, configuracion)
        .then(() => {
          // Si la promesa se resuelve, significa que se haenviado el email para restablecer el password
          //console.log(result)
          Materialize.toast(`Se ha enviado un correo para reestablecer la contraseña`, 4000)
          // En esta sección debemos cerrar el modal del formularo de restablecer conraseña
          $('.modal').modal('close')
        })
        .catch(error => {
          // Si la promesa es rechazada, algo paso
          console.log(error)
          Materialize.toast(`Un error a sucedo al enviar el correo de reestablecimiento de contraseña ${error}`, 4000)
          $('.modal').modal('close')
        })
    } else {
      // Esto sucede a consecuencia de no indicar email para reestablecer la contraseña
      Materialize.toast(`Favor de ingresar un correo electrónico`)
      $('.modal').modal('close')
    }
  }

Daniel Esteves

student•

¡Hola! ¿Podrías verificar si tu código es el mismo con el del profesor?

Leticia Vargas

student•

Tengo el mismo error, ¿cómo lo solucionaste?

Boris Vargas Paucara

student•

autenticacion.js

recoveryPassword (email) {
    firebase.auth().sendPasswordResetEmail(email)
    .then(result => {
      Materialize.toast(`Correo de recuperación de contraseña enviado`, 5000);
    }).catch(error => { 
      console.log('Error', error);
      Materialize.toast(`Error no existe el correo: ${error} `, 4000);
    });
  }

authController.js

$("#btnSendEmailRecovery").click(() =>{
        const email = $('#emailRecovery').val()
        const auth = new Autenticacion()
        auth.recoveryPassword(email)
    })

index.html

<div>
        <h5>Recuperar contraseña</h5>
        <div class="input-field">                            
            <input id="emailRecovery" type="email" required/>
            <label for="emailRecovery">E-mail:</label>
        </div>
        <a id="btnSendEmailRecovery" class="btn waves-effect waves-light">Recuperar contraseña</a>                        
    </div>

Leonardo Daniel Benitez Cuenca

student•

changePasswordEmail(email) {
    if (email) {
      const configuracion = {
        url: 'http://localhost/blogeek-platzi/public/'
      }
      firebase.auth().sendPasswordResetEmail(email, configuracion).then((result) =&gt; {
        $('.modal').modal('close')
        Materialize.toast(`Se ha enviado un correo para restablecer tu contraseña`, 4000)
      }).catch(error =&gt; {
        console.log(error)
        Materialize.toast(`No se pudo enviar el correo de restablecer contraseña`, 4000)
      })
    } else {
      Materialize.toast(`Digite su correo electrónico`, 4000)
    }
  }

Sebastián Buitrago

student•

index.html

	<div class="lbl-ingresar-redes">
            <span id="btnRecordarContraseña">Olvidaste tu 			 
             contraseña</span>
        </div>

authControler.js

	$("#btnRecordarContraseña").click(() => {
		const email = $("#emailSesion").val()
		const auth = new Autenticacion()
		auth.resetPassword(email)
	})

autenticacion.js

	resetPassword(email) {
		if (email) {
			const config = {
				url: "http ://localhost:3000/",
			}
			firebase
				.auth()
				.sendPasswordResetEmail(email, config)
				.then(() => {
					$(".modal").modal("close")
					Materialize.toast(
						`Tu correo de recuperacion de contraseña ha sido enviado`,
						4000
					)
				})
		} else {
			Materialize.toast(
				`Por favor ingrese un correo válido`,
				4000
			)
		}
	}

Maided Guadalupe Hernández Ponce

student•

Esta es la función que yo implementé:

  authForgottenPassword(email) {
    const actionCodeSettings = {
      url: ''
    }
    firebase.auth().sendPasswordResetEmail(email, actionCodeSettings)
      .then(function() {
        Materialize.toast(`Hemos enviado un correo electrónico para restablecer la contraseña`, 4000);
      })
      .catch(function(error) {
        Materialize.toast(`${error}: Error al reestablecer contraseña`, 4000);
      });
  }

Jorge Bou-saad

student•

He aqui mi commit del reto en mi practica de nextjs con este curso

https://github.com/jlbousing/nextjs-firebase-practica/commit/7c7af15e357d521bd3dac7aa0a1bd6b57997b36d

Sebastián Buitrago

student•

Pueden usar este link para conocer los metodos que pueden usar con la funcion auth()

Wilson Marino Pablo Mendez

student•

Buenisimo reto ✔

Angel David Castiblanco Sepulveda

student•

El reto de la clase se reduce en estos codigos: NOTA: Deben crear su HTML correspondiente al codigo que llaman en javascript

// autenticacion.js
RecoveryPassword (email) {
    firebase.auth().sendPasswordResetEmail(email)
  }

// authController.js
    $("#btnSendEmailRecovery").click(() =>{
        const email = $('#emailRecovery').val()
        const auth = new Autenticacion()
        auth.RecoveryPassword(email)
    })

Angel Bulnes

student•

Reto finalizado:

index.html

 <div class="col s12 m6 registro-formulario">
       <div class="input-field">
              <input id="emailRecuperacion" type="text"  maxlength="50" data-length="50" required />
                    <label for="emailRecuperación">Email</label>
       </div>
       <div class="div-btnInicioSesion">
               <a id="btnRecuperarContrasenia" class="btn waves-effect waves-light">Enviar correo<i class="material-icons left">account_box</i></a>
        </div>                        
 </div>

general.js

$("#btnRecuperar").click(()=>{
    $("#modalRecuperar").modal("open");
  })

authController.js

 $("#btnRecuperarContrasenia").click(() => {
    const email = $("#emailRecuperacion").val();
    objAuth.recoverPass(email);
  });

autenticacion.js

recoverPass(email) {
    if (email) {
      firebase
        .auth()
        .sendPasswordResetEmail(email)
        .then((result) => {
          Materialize.toast(
            `Se envió un correo para restablacer tu contraseña, verificalo `,
            4000
          );
          $(".modal").modal("close");
        })
        .catch((error) => {
          Materialize.toast(
            `Error al enviar el correo de recuperación  ${error} `,
            4000
          );
        });
    }
  }

Francisco Javier Saavedra Alcala

student•

Alguien sabe si Firebase puede hacer uso de los datos si uno elige no continuar con sus servicios gratuitos?🤨

Francisco Imanol Suarez

student•

Hola Javier, como estas?

Puntualmente eso no te puedo responder, pero lo mas seguro es que sea que no, lo que si te puedo decir por si te sirve, es que pasado cierto tiempo si no usas la base de datos esta misma se desactiva por no tener trafico/uso.

Saludos espero que te sirva lo poco aportado ! 👋

Francisco Javier Saavedra Alcala

student•

Oh gran dato Fsuarez !, muchas gracias por compartirlo lo tomaré bien en cuenta 👍🏼

Carlos Eduardo Gomez García

teacher•

Usualmente cuando trabajas de datos lo más común es importarlos como archivos .sql o .csv, aunque igual si son bases de datos no relacionales suele ser mas común usar JSON, así que depende muchod el tipo de base de datos que uses