Puedes usar Firebase Authentication para permitir que los usuarios inicien sesión en tu aplicación usando uno o más métodos de inicio de sesión, incluido el inicio de sesión con dirección de correo electrónico y contraseña, y proveedores de identidad federados, como el inicio de sesión con Google y el inicio de sesión con Facebook. Este tutorial lo ayuda a comenzar con la autenticación de Firebase mostrándole cómo agregar una dirección de correo electrónico y una contraseña de inicio de sesión a su aplicación.
Agregar e inicializar el SDK de autenticación
Si aún no lo has hecho, instala el SDK de Firebase JS e inicializa Firebase .
Agregue el SDK JS de Firebase Authentication e inicialice Firebase Authentication:
API modular web
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = getAuth(app);
API con espacio de nombres web
import firebase from "firebase/compat/app"; import "firebase/compat/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = firebase.auth();
(Opcional) Prototipo y prueba con Firebase Local Emulator Suite
Antes de hablar sobre cómo su aplicación autentica a los usuarios, presentemos un conjunto de herramientas que puede utilizar para crear prototipos y probar la funcionalidad de autenticación: Firebase Local Emulator Suite. Si está decidiendo entre proveedores y técnicas de autenticación, probando diferentes modelos de datos con datos públicos y privados usando autenticación y reglas de seguridad de Firebase, o creando prototipos de diseños de interfaz de usuario de inicio de sesión, poder trabajar localmente sin implementar servicios en vivo puede ser una gran idea. .
Un emulador de autenticación es parte de Local Emulator Suite, que permite que su aplicación interactúe con el contenido y la configuración de la base de datos emulada, así como, opcionalmente, con los recursos del proyecto emulado (funciones, otras bases de datos y reglas de seguridad).
Usar el emulador de autenticación implica solo unos pocos pasos:
- Agregar una línea de código a la configuración de prueba de su aplicación para conectarse al emulador.
- Desde la raíz del directorio de su proyecto local, ejecute
firebase emulators:start
. - Usar la interfaz de usuario de Local Emulator Suite para la creación de prototipos interactivos o la API REST del emulador de autenticación para pruebas no interactivas.
Hay una guía detallada disponible en Conecte su aplicación al emulador de autenticación . Para obtener más información, consulte la introducción a Local Emulator Suite .
Ahora continuemos con cómo autenticar usuarios.
Registrar nuevos usuarios
Cree un formulario que permita a nuevos usuarios registrarse en su aplicación utilizando su dirección de correo electrónico y una contraseña. Cuando un usuario completa el formulario, valide la dirección de correo electrónico y la contraseña proporcionadas por el usuario, luego páselas al método createUserWithEmailAndPassword
:
Web modular API
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed up const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. });
Web namespaced API
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
Iniciar sesión usuarios existentes
Cree un formulario que permita a los usuarios existentes iniciar sesión con su dirección de correo electrónico y contraseña. Cuando un usuario completa el formulario, llame al método signInWithEmailAndPassword
:
Web modular API
import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; });
Web namespaced API
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
Establecer un observador de estado de autenticación y obtener datos del usuario
Para cada una de las páginas de su aplicación que necesite información sobre el usuario que inició sesión, adjunte un observador al objeto de autenticación global. Se llama a este observador cada vez que cambia el estado de inicio de sesión del usuario.
Adjunte el observador utilizando el método onAuthStateChanged
. Cuando un usuario inicia sesión correctamente, puede obtener información sobre el usuario en el observador.
Web modular API
import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/auth.user const uid = user.uid; // ... } else { // User is signed out // ... } });
Web namespaced API
firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/v8/firebase.User var uid = user.uid; // ... } else { // User is signed out // ... } });
Próximos pasos
Aprenda cómo agregar soporte para otros proveedores de identidad y cuentas de invitados anónimos:
- Iniciar sesión en Google
- Iniciar sesión en Facebook
- Iniciar sesión
- Iniciar sesión en GitHub
- Inicio de sesión anónimo