Pengenalan Integrasi Firebase

Ringkasan

Tutorial ini akan memandu Anda melalui pengaturan Firebase Authentication dengan plugin Capacitor Social Login. Integrasi ini memungkinkan Anda menggunakan login sosial native (Google, Apple, Facebook, Twitter) pada platform mobile sambil memanfaatkan Firebase Auth untuk autentikasi backend dan Firestore untuk penyimpanan data.

Apa yang Anda Pelajari

• Cara mengonfigurasi Firebase Authentication
• Cara mengintegrasikan plugin Capacitor Social Login dengan Firebase Auth
• Pengaturan platform khusus untuk Android, iOS, dan Web

Apa yang Anda Butuhkan

Sebelum Anda memulai, pastikan Anda memiliki:

1. Proyek Firebase

   • Buat proyek di Firebase Console
   • Aktifkan Autentikasi (Email/Password dan Google Sign-In)
   • Ambil konfigurasi kunci Firebase Anda

2. Firebase JS SDK

   • Pasang Firebase di proyek Anda:

     npm install firebase

3. Proyek Capacitor

   • Aplikasi Capacitor yang sudah ada
   • Plugin Login Sosial Capacitor terinstal:

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

Contoh Aplikasi

Contoh aplikasi yang sudah jadi tersedia di repository:

Repository Code: Anda dapat menemukan repository code di sini

Contoh aplikasi menunjukkan:

• Autentikasi email/password dengan Firebase
• Integrasi Sign-In Google (Android, iOS, dan Web)
• Penyimpanan nilai kunci sederhana menggunakan koleksi Firebase Firestore
• Penyimpanan data pengguna di subkoleksi Firestore

Beberapa kata tentang menggunakan Firebase SDK pada Capacitor

Ketika menggunakan Firebase JS SDK pada Capacitor, Anda perlu menyadari bahwa ketika menggunakan metode autentikasi, Anda perlu menginisialisasi instance Firebase Auth sedikit berbeda.

Pada platform web, Anda akan menggunakan fungsi untuk mendapatkan instance Firebase Auth. getAuth Salin ke clipboard

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

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

Unfortunately, on Capacitor, this does not work and causes Firebase auth to hang. As stated in Anda perlu menggunakan fungsi untuk menginisialisasi instance Firebase Auth. Hal ini terlihat seperti ini:Anda perlu menggunakan fungsi untuk menginisialisasi instance Firebase Auth. Hal ini terlihat seperti ini: initializeAuth Pada platform __CAPGO_KEEP_0__, Anda perlu menggunakan fungsi untuk menginisialisasi instance Firebase Auth. Hal ini terlihat seperti ini:

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();

Langkah-Langkah Selanjutnya

Lanjutkan dengan panduan pengaturan:

• Pengaturan Firebase - Konfigurasi proyek Firebase
• Pengaturan Android - Konfigurasi spesifik Android
• Pengaturan iOS - Konfigurasi spesifik iOS
• Pengaturan Web - Konfigurasi spesifik Web