Introducción de la Integración de Firebase

Resumen

Esta guía te guiará a través de la 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 empezar, asegúrate de tener:

1. Un proyecto de Firebase

   • Crear un proyecto en Firebase Console
   • Habilitar la autenticación (Correo electrónico/Contraseña y Inicio de sesión con Google)
   • Obtén tus credenciales de configuración de Firebase

2. Firebase JS SDK

   • Instala Firebase en tu proyecto:

     npm install firebase

3. Un proyecto Capacitor

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

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

Ejemplo de aplicación

Está disponible un ejemplo completo y funcional en el repositorio:

Code Repositorio: Puede encontrar el repositorio code aquí

El ejemplo de aplicación demuestra:

• Autenticación por correo electrónico/contraseña con Firebase
• Integración de inicio de sesión de Google (Android, iOS y Web)
• A un simple almacén de valores mediante colecciones de Firestore de Firebase
• Almacenamiento de datos específicos de usuario en subcolecciones de Firestore

Una palabra sobre el uso del SDK de Firebase en Capacitor

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

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

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 la autenticación de Firebase se quede colgada. Como se menciona en este post de blog, debes utilizar la initializeAuth función para inicializar la instancia de autenticación de Firebase. 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 - Configurar 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

Continúa desde la Introducción a la Integración de Firebase

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