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

Introducción a la autenticación de Firebase

Siguiente ►
►

La autenticación es un componente esencial en la mayoría de las aplicaciones modernas, ya que permite identificar a los usuarios y proteger sus datos. Firebase Authentication proporciona una solución completa y fácil de usar para autenticar a los usuarios en tu aplicación. En este módulo, aprenderás los conceptos básicos de la autenticación con Firebase, cómo configurarla y cómo utilizarla en tu aplicación.

¿Qué es Firebase Authentication?

Firebase Authentication es un servicio que facilita la autenticación de usuarios en tu aplicación. Ofrece varios métodos de autenticación, incluyendo:

  • Correo electrónico y contraseña
  • Proveedores de identidad federada (como Google, Facebook, Twitter, etc.)
  • Autenticación anónima

Firebase Authentication se integra fácilmente con otros servicios de Firebase y proporciona una experiencia de usuario fluida y segura.

Configuración de Firebase Authentication

Paso 1: Crear un proyecto en Firebase

  1. Ve a la consola de Firebase.
  2. Haz clic en "Agregar proyecto" y sigue las instrucciones para crear un nuevo proyecto.

Paso 2: Agregar Firebase Authentication a tu aplicación

Para aplicaciones web:

  1. En la consola de Firebase, selecciona tu proyecto.
  2. Haz clic en "Agregar aplicación" y selecciona "Web".
  3. Sigue las instrucciones para registrar tu aplicación y obtener el código de configuración de Firebase.
<!-- Agrega este código en el archivo HTML de tu aplicación -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js"></script>
<script>
  // Configuración de Firebase
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  // Inicializar Firebase
  firebase.initializeApp(firebaseConfig);
</script>

Para aplicaciones móviles (Android/iOS):

  1. Sigue las instrucciones específicas para Android o iOS en la documentación oficial de Firebase.

Paso 3: Habilitar proveedores de autenticación

  1. En la consola de Firebase, ve a "Authentication" en el menú de la izquierda.
  2. Haz clic en la pestaña "Método de inicio de sesión".
  3. Habilita los proveedores de autenticación que deseas utilizar (por ejemplo, correo electrónico y contraseña, Google, Facebook, etc.).

Ejemplo práctico: Autenticación por correo electrónico y contraseña

Registro de usuarios

Para registrar un nuevo usuario con correo electrónico y contraseña, utiliza el siguiente código:

const email = "[email protected]";
const password = "user_password";

firebase.auth().createUserWithEmailAndPassword(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);
  });

Inicio de sesión de usuarios

Para iniciar sesión con un usuario registrado, utiliza el siguiente código:

const email = "[email protected]";
const password = "user_password";

firebase.auth().signInWithEmailAndPassword(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);
  });

Ejercicio práctico

Ejercicio 1: Registro e inicio de sesión

  1. Crea una página web simple con dos formularios: uno para registrar nuevos usuarios y otro para iniciar sesión.
  2. Utiliza Firebase Authentication para implementar la funcionalidad de registro e inicio de sesión.

Solución

<!DOCTYPE html>
<html>
<head>
  <title>Autenticación con Firebase</title>
  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js"></script>
  <script>
    // Configuración de Firebase
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };

    // Inicializar Firebase
    firebase.initializeApp(firebaseConfig);

    // Función para registrar usuarios
    function register() {
      const email = document.getElementById("register-email").value;
      const password = document.getElementById("register-password").value;

      firebase.auth().createUserWithEmailAndPassword(email, password)
        .then((userCredential) => {
          const user = userCredential.user;
          alert("Usuario registrado: " + user.email);
        })
        .catch((error) => {
          alert("Error en el registro: " + error.message);
        });
    }

    // Función para iniciar sesión
    function login() {
      const email = document.getElementById("login-email").value;
      const password = document.getElementById("login-password").value;

      firebase.auth().signInWithEmailAndPassword(email, password)
        .then((userCredential) => {
          const user = userCredential.user;
          alert("Usuario autenticado: " + user.email);
        })
        .catch((error) => {
          alert("Error en el inicio de sesión: " + error.message);
        });
    }
  </script>
</head>
<body>
  <h1>Autenticación con Firebase</h1>

  <h2>Registro</h2>
  <form onsubmit="register(); return false;">
    <input type="email" id="register-email" placeholder="Correo electrónico" required>
    <input type="password" id="register-password" placeholder="Contraseña" required>
    <button type="submit">Registrar</button>
  </form>

  <h2>Inicio de sesión</h2>
  <form onsubmit="login(); return false;">
    <input type="email" id="login-email" placeholder="Correo electrónico" required>
    <input type="password" id="login-password" placeholder="Contraseña" required>
    <button type="submit">Iniciar sesión</button>
  </form>
</body>
</html>

Conclusión

En esta lección, has aprendido los conceptos básicos de Firebase Authentication y cómo configurarlo en tu aplicación. También has visto ejemplos prácticos de cómo registrar e iniciar sesión con usuarios utilizando correo electrónico y contraseña. En la próxima lección, profundizaremos en la autenticación con proveedores de identidad federada, como Google y Facebook.

¡Sigue practicando y nos vemos en la siguiente lección!

◄ 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