El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Autenticación por correo electrónico y contraseña

Siguiente ►
►

Introducción

La autenticación por correo electrónico y contraseña es una de las formas más comunes y seguras de autenticar a los usuarios en una aplicación. Firebase Authentication proporciona una manera sencilla de implementar esta funcionalidad, permitiendo a los desarrolladores centrarse en la creación de aplicaciones sin preocuparse por la infraestructura de autenticación.

Configuración Inicial

Paso 1: Habilitar la Autenticación por Correo Electrónico y Contraseña

  1. Accede a la consola de Firebase: Ve a Firebase Console.
  2. Selecciona tu proyecto: Si no tienes un proyecto, crea uno nuevo.
  3. Navega a la sección de autenticación: En el menú de la izquierda, selecciona "Authentication".
  4. Habilita el proveedor de correo electrónico y contraseña:
    • Haz clic en la pestaña "Sign-in method".
    • Encuentra "Email/Password" y haz clic en el botón de edición (ícono de lápiz).
    • Activa la opción y guarda los cambios.

Paso 2: Agregar Firebase a tu Aplicación

Sigue las instrucciones en la consola de Firebase para agregar Firebase a tu aplicación. Esto generalmente implica:

  1. Registrar tu aplicación: Proporciona el nombre del paquete de tu aplicación.
  2. Descargar el archivo de configuración: Para Android, es google-services.json; para iOS, es GoogleService-Info.plist.
  3. Agregar el archivo de configuración a tu proyecto: Coloca el archivo en el directorio adecuado de tu proyecto.
  4. Agregar dependencias de Firebase: Modifica los archivos de configuración de tu proyecto para incluir las dependencias de Firebase.

Implementación en Código

Registro de Usuarios

Para registrar un nuevo usuario con correo electrónico y contraseña, utiliza el método createUserWithEmailAndPassword de Firebase Authentication.

Ejemplo en JavaScript

// Importa Firebase
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

// Inicializa Firebase Authentication
const auth = getAuth();

// Función para registrar un nuevo usuario
function registerUser(email, password) {
  createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Registro exitoso
      const user = userCredential.user;
      console.log("Usuario registrado:", user);
    })
    .catch((error) => {
      // Manejo de errores
      const errorCode = error.code;
      const errorMessage = error.message;
      console.error("Error en el registro:", errorCode, errorMessage);
    });
}

// Llamada a la función con un correo y contraseña de ejemplo
registerUser("[email protected]", "contraseñaSegura123");

Inicio de Sesión de Usuarios

Para iniciar sesión con un usuario registrado, utiliza el método signInWithEmailAndPassword.

Ejemplo en JavaScript

// Importa Firebase
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

// Inicializa Firebase Authentication
const auth = getAuth();

// Función para iniciar sesión
function loginUser(email, password) {
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Inicio de sesión exitoso
      const user = userCredential.user;
      console.log("Usuario autenticado:", user);
    })
    .catch((error) => {
      // Manejo de errores
      const errorCode = error.code;
      const errorMessage = error.message;
      console.error("Error en el inicio de sesión:", errorCode, errorMessage);
    });
}

// Llamada a la función con un correo y contraseña de ejemplo
loginUser("[email protected]", "contraseñaSegura123");

Cierre de Sesión

Para cerrar la sesión del usuario actual, utiliza el método signOut.

Ejemplo en JavaScript

// Importa Firebase
import { getAuth, signOut } from "firebase/auth";

// Inicializa Firebase Authentication
const auth = getAuth();

// Función para cerrar sesión
function logoutUser() {
  signOut(auth)
    .then(() => {
      // Cierre de sesión exitoso
      console.log("Usuario ha cerrado sesión");
    })
    .catch((error) => {
      // Manejo de errores
      console.error("Error en el cierre de sesión:", error);
    });
}

// Llamada a la función para cerrar sesión
logoutUser();

Ejercicios Prácticos

Ejercicio 1: Registro de Usuario

Objetivo: Implementar una función que registre un nuevo usuario utilizando correo electrónico y contraseña.

Instrucciones:

  1. Crea una interfaz simple con un formulario que tenga campos para el correo electrónico y la contraseña.
  2. Implementa la función registerUser que registre al usuario cuando se envíe el formulario.

Solución:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registro de Usuario</title>
</head>
<body>
  <h1>Registro de Usuario</h1>
  <form id="registerForm">
    <input type="email" id="email" placeholder="Correo Electrónico" required>
    <input type="password" id="password" placeholder="Contraseña" required>
    <button type="submit">Registrar</button>
  </form>

  <script type="module">
    import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js";
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";

    // Configuración de Firebase
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };

    // Inicializa Firebase
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    // Función para registrar un nuevo usuario
    function registerUser(email, password) {
      createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
          const user = userCredential.user;
          console.log("Usuario registrado:", user);
        })
        .catch((error) => {
          console.error("Error en el registro:", error.code, error.message);
        });
    }

    // Manejo del formulario de registro
    document.getElementById('registerForm').addEventListener('submit', (e) => {
      e.preventDefault();
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;
      registerUser(email, password);
    });
  </script>
</body>
</html>

Ejercicio 2: Inicio de Sesión

Objetivo: Implementar una función que permita a los usuarios iniciar sesión utilizando correo electrónico y contraseña.

Instrucciones:

  1. Crea una interfaz simple con un formulario que tenga campos para el correo electrónico y la contraseña.
  2. Implementa la función loginUser que inicie sesión cuando se envíe el formulario.

Solución:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inicio de Sesión</title>
</head>
<body>
  <h1>Inicio de Sesión</h1>
  <form id="loginForm">
    <input type="email" id="email" placeholder="Correo Electrónico" required>
    <input type="password" id="password" placeholder="Contraseña" required>
    <button type="submit">Iniciar Sesión</button>
  </form>

  <script type="module">
    import { getAuth, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js";
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";

    // Configuración de Firebase
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };

    // Inicializa Firebase
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    // Función para iniciar sesión
    function loginUser(email, password) {
      signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
          const user = userCredential.user;
          console.log("Usuario autenticado:", user);
        })
        .catch((error) => {
          console.error("Error en el inicio de sesión:", error.code, error.message);
        });
    }

    // Manejo del formulario de inicio de sesión
    document.getElementById('loginForm').addEventListener('submit', (e) => {
      e.preventDefault();
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;
      loginUser(email, password);
    });
  </script>
</body>
</html>

Conclusión

En esta sección, hemos aprendido cómo implementar la autenticación por correo electrónico y contraseña utilizando Firebase Authentication. Hemos cubierto los pasos para habilitar esta funcionalidad en la consola de Firebase, así como los métodos necesarios para registrar, iniciar sesión y cerrar sesión de usuarios en nuestra aplicación. Además, hemos proporcionado ejemplos prácticos y ejercicios para reforzar los conceptos aprendidos.

En el siguiente módulo, exploraremos la autenticación de redes sociales, que permitirá a los usuarios iniciar sesión utilizando sus cuentas de Google, Facebook, y otros proveedores de identidad.

◄ Anterior
◄
Siguiente ►
►

Curso de Firebase

Módulo 1: Introducción a Firebase

Módulo 2: Autenticación de Firebase

Módulo 3: Base de datos en tiempo real de Firebase

Módulo 4: Cloud Firestore

Módulo 5: Almacenamiento de Firebase

Módulo 6: Mensajería en la nube de Firebase

Módulo 7: Análisis de Firebase

Módulo 8: Funciones de Firebase

Módulo 9: Monitoreo de rendimiento de Firebase

Módulo 10: Laboratorio de pruebas de Firebase

Módulo 11: Temas avanzados de Firebase

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados