Pengenalan Integrasi Firebase

Ringkasan

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

Apa yang Anda Pelajari

• Cara mengonfigurasi Autentikasi Firebase
• Cara mengintegrasikan plugin Capacitor Login Sosial dengan Autentikasi Firebase
• Pengaturan spesifik platform untuk Android, iOS, dan Web

Apa yang Anda Butuhkan

Sebelum Anda memulai, pastikan Anda memiliki:

1. Proyek Firebase

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

2. Firebase JS SDK

   • Pasang Firebase di proyek Anda:

     npm install firebase

3. Proyek Capacitor

   • Aplikasi Capacitor yang sudah ada
   • Plugin Sign-In Social Capacitor terinstal:

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

Aplikasi Contoh

Contoh aplikasi lengkap yang berfungsi sepenuhnya tersedia di repository:

Code Repository: Anda dapat menemukan repository code di sini

Aplikasi contoh menunjukkan:

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

Mengenai penggunaan Firebase SDK pada Capacitor

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

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

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

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

Sayangnya, pada Capacitor, ini tidak berfungsi dan menyebabkan Firebase auth mengalami kejengahan. Seperti yang disebutkan dalam blog ini, Anda perlu menggunakan initializeAuth 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

Teruskan dengan panduan pengaturan:

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

Teruskan dari Pengenalan Integrasi Firebase

If Anda menggunakan Firebase Integration Introduction untuk merencanakan autentikasi dan alur akun, hubungkan dengan Menggunakan @capgo/capacitor-login-social untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-social, @capgo/capacitor-login-social untuk detail implementasi dalam @capgo/capacitor-login-social, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi dalam @capgo/capacitor-biometrik-asli, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi Dua Faktor.