Pengenalan Integrasi Firebase

Pendahuluan

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

Apa yang Anda Pelajari

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

Apa yang Anda Butuhkan

Sebelum Anda memulai, pastikan Anda memiliki:

1. Aplikasi Firebase

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

2. Firebase JS SDK

   • Instal Firebase di proyek Anda:

     npm install firebase

3. Aplikasi Capacitor yang sudah ada

   • Aplikasi Capacitor yang baru
   • Capacitor Plugin Login Sosial terpasang:

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

Aplikasi Contoh

Contoh aplikasi yang lengkap dan berfungsi sepenuhnya tersedia di repository:

Repository Code: Anda dapat menemukan repository code di sini

Aplikasi contoh menunjukkan:

• Autentikasi email/password dengan Firebase
• Pengintegrasian Sign-In Google (Android, iOS, dan Web)
• Penyimpanan nilai sederhana menggunakan koleksi Firebase Firestore
• Penggunaan penyimpanan data khusus di subkoleksi Firestore

Kata tentang menggunakan Firebase SDK pada Capacitor

Ketika menggunakan Firebase JS SDK pada Capacitor, Anda harus menyadari bahwa ketika menggunakan metode autentikasi, Anda perlu 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 kegagalan. Seperti yang disebutkan dalam artikel blog, 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();

Next Steps

Teruskan dengan panduan pengaturan:

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

Teruskan dari Pengenalan Integrasi Firebase

Jika Anda menggunakan Pengenalan Integrasi Firebase untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-social untuk kemampuan asli di Menggunakan @capgo/capacitor-login-social, @capgo/capacitor-login-social untuk detail implementasi di @capgo/capacitor-login-social, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, dan @capgo/capacitor-biometrik-asli untuk detail implementasi di @capgo/capacitor-biometrik-asli. Autentikasi dua faktor untuk detail implementasi dalam Autentikasi dua faktor.