Introducción a la integración de Firebase

Resumen

Esta guía te guiará a través del proceso de configuración de la autenticación de Firebase con el plugin de inicio de sesión social Capacitor. Esta integración te permite utilizar proveedores de inicio de sesión sociales nativos (Google, Apple, Facebook, Twitter) en plataformas móviles, mientras aprovechas la autenticación de Firebase para la autenticación en el backend y Firestore para el almacenamiento de datos.

Lo que Aprenderás

• Cómo configurar la autenticación de Firebase
• Cómo integrar el plugin de inicio de sesión social Capacitor con la autenticación de Firebase
• Configuración específica de plataforma para Android, iOS y Web

Lo que Necesitarás

Antes de comenzar, asegúrate de tener:

1. Un proyecto de Firebase

   • Crear un proyecto en Consola de Firebase
   • Habilitar Autenticación (Correo electrónico/Contraseña y Inicio de sesión con Google)
   • Obtener las credenciales de configuración de Firebase

2. Firebase JS SDK

   • Instalar Firebase en tu proyecto:

     npm install firebase

3. Un proyecto de Capacitor

   • Una aplicación Capacitor existente
   • El plugin de inicio de sesión social Capacitor instalado:

     npm install @capgo/capacitor-social-login
     npx cap sync

Aplicación de ejemplo

Está disponible en el repositorio una aplicación completa y funcional:

Repositorio Code: Puede encontrar el repositorio code aquí

La aplicación de ejemplo demuestra:

• Autenticación con correo electrónico y contraseña con Firebase
• Integración de Sign-In de Google (Android, iOS y Web)
• Un almacén de claves de valor simple utilizando colecciones de Firestore de Firebase
• Almacenamiento de datos específicos de usuario en subcolecciones de Firestore

Una palabra sobre el uso del Firebase SDK en Capacitor

Al usar el Firebase JS SDK en Capacitor, debes tener en cuenta que cuando usas los métodos de autenticación, debes inicializar la instancia de Firebase Auth de manera ligeramente diferente.

En la plataforma web, usarías la getAuth función para obtener la instancia de Firebase Auth.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

Desafortunadamente, en Capacitor, esto no funciona y causa que Firebase auth se quede bloqueado. Como se menciona en este post de blog, debes usar la initializeAuth función para inicializar la instancia de Firebase Auth. Esto se ve así:

import { initializeApp } from 'firebase/app';
import { initializeAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);

function whichAuth() {
  let auth;
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    auth = getAuth(app);
  }
  return auth;
}

export const auth = whichAuth();

Pasos siguientes

Continuar con las guías de configuración:

• Configuración de Firebase - Configura el proyecto de Firebase
• Configuración de Android - Configuración específica de Android
• Configuración de iOS - Configuración específica de iOS
• Configuración de Web - Configuración específica de Web

Sigue adelante desde la introducción a la integración de Firebase

Si estás utilizando Introducción a la Integración con Firebase para planificar la autenticación y los flujos de cuenta, conectarlo con Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social @capgo/capacitor-clave-privada para el detalle de implementación en @capgo/capacitor-clave-privada @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.