Tutorial de Firebase para Autenticación con Google y Base de Datos

Introducción a Firebase y Configuración Inicial

Gestión de Notas con Realtime Database

// Referencia a la base de datos donde se almacenarán las notas del usuario
const dbRef = firebase.database().ref(`notas/${user}`);

// Función para agregar una nueva nota
function agregarNota() {
// Obtiene el título y el contenido de la nota del usuario
const titulo = document.getElementById('title').value;
const nota = document.getElementById('note').value;

// Guarda la nota en la base de datos de Firebase
dbRef.push({
titulo: titulo,
nota: nota
});

// Escucha los cambios en la base de datos y actualiza la interfaz
dbRef.on('value', snapshot => {
// Obtiene el contenedor donde se mostrarán las notas
const notasContainer = document.getElementById('page-main-notes');
// Limpia el contenido anterior
notasContainer.innerHTML = 'Notas:
';

// Itera sobre todas las notas del usuario
snapshot.forEach(childSnapshot => {
// Obtiene los datos de la nota
const nota = childSnapshot.val();
// Agrega el título y el contenido de la nota al contenedor
notasContainer.innerHTML += `${nota.titulo}: ${nota.nota}
`;

// Evento clic para agregar una nueva nota
document.getElementById('button-add').addEventListener('click', agregarNota);

Autenticación con Google mediante Popups

POPUPS

// Configuración de Firebase
const firebaseConfig = {
apiKey: "TU_API_KEY",
authDomain: "TU_DOMINIO.firebaseapp.com",
projectId: "TU_PROYECTO_ID",
storageBucket: "TU_STORAGE_BUCKET.appspot.com",
messagingSenderId: "TU_SENDER_ID",
appId: "TU_APP_ID"
// Inicializa Firebase
firebase.initializeApp(firebaseConfig);

// Referencia al botón de inicio de sesión con Google
const loginButton = document.getElementById('button-login-google');

// Evento clic para iniciar sesión con Google
loginButton.addEventListener('click', () => {
// Crea una instancia del proveedor de autenticación de Google
const provider = new firebase.auth.GoogleAuthProvider();
// Inicia sesión con Google a través de un popup
firebase.auth().signInWithPopup(provider)
.then((result) => {
// El usuario ha iniciado sesión correctamente
const user = result.user;
// Muestra el correo electrónico y la foto de perfil del usuario en la página principal
mostrarInformacionUsuario(user);
.catch((error) => {
// Manejo de errores
console.error(error.message);
});
});

// Función para mostrar el correo electrónico y la foto de perfil del usuario
function mostrarInformacionUsuario(user) {
// Elemento donde se mostrará la información del usuario
const welcomeDiv = document.getElementById('page-main-welcome');
// Crea un elemento de imagen para mostrar la foto de perfil del usuario
const imgElement = document.createElement('img');
imgElement.src = user.photoURL;
imgElement.alt = 'Foto de perfil del usuario';
imgElement.classList.add('profile-image'); // Agrega la clase CSS al elemento img

// Crea un elemento de párrafo para mostrar el correo electrónico del usuario
const emailParagraph = document.createElement('p');
emailParagraph.textContent = `Correo electrónico: ${user.email}`;

// Agrega la foto de perfil y el correo electrónico del usuario al elemento de bienvenida
welcomeDiv.appendChild(imgElement);
welcomeDiv.appendChild(emailParagraph);
// Muestra la página principal
document.getElementById('page-login').style.display = 'none';
document.getElementById('page-main').style.display = 'block';
}

popups

Autenticación con Google mediante Redirección

REDIRECCION

// Referencia al botón de inicio de sesión con Google
const loginButton = document.getElementById('button-login-google');

// Evento clic para iniciar sesión con Google
loginButton.addEventListener('click', () => {
// Crea una instancia del proveedor de autenticación de Google
const provider = new firebase.auth.GoogleAuthProvider();
// Inicia sesión con Google a través de una redirección
firebase.auth().signInWithRedirect(provider);
});

// Verifica si el usuario ha iniciado sesión después de la redirección
firebase.auth().getRedirectResult().then((result) => {
if (result.user) {
// El usuario ha iniciado sesión correctamente
const user = result.user;
// Muestra el correo electrónico y la foto de perfil del usuario en la página principal
mostrarInformacionUsuario(user);
}
}).catch((error) => {
// Manejo de errores
console.error(error.message);
});

// Función para mostrar el correo electrónico y la foto de perfil del usuario
function mostrarInformacionUsuario(user) {
// Elemento donde se mostrará la información del usuario
const welcomeDiv = document.getElementById('page-main-welcome');
// Crea un elemento de imagen para mostrar la foto de perfil del usuario
const imgElement = document.createElement('img');
imgElement.src = user.photoURL;
imgElement.alt = 'Foto de perfil del usuario';
imgElement.classList.add('profile-image'); // Agrega la clase CSS al elemento img

// Crea un elemento de párrafo para mostrar el correo electrónico del usuario
const emailParagraph = document.createElement('p');
emailParagraph.textContent = `Correo electrónico: ${user.email}`;

// Agrega la foto de perfil y el correo electrónico del usuario al elemento de bienvenida
welcomeDiv.appendChild(imgElement);
welcomeDiv.appendChild(emailParagraph);
// Muestra la página principal
document.getElementById('page-login').style.display = 'none';
document.getElementById('page-main').style.display = 'block';
}

Estructura HTML del Proyecto

1

Notas

2