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 Diperlukan

Sebelum Anda memulai, pastikan Anda memiliki:

1. A Project Firebase

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

2. Firebase JS SDK

   • Instal Firebase di proyek Anda:

     npm install firebase

3. A Capacitor Project

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

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

Aplikasi Contoh

Contoh aplikasi yang lengkap dan berfungsi sepenuhnya tersedia di repository:

Code Repository: Anda dapat menemukan repository code di sini

Aplikasi contoh tersebut menunjukkan:

• Autentikasi email/password dengan Firebase
• Pengintegrasian Sign-In Google (Android, iOS, dan Web)
• Aplikasi penyimpanan nilai kunci sederhana menggunakan koleksi Firebase Firestore
• Penggunaan penyimpanan data spesifik 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. Ini terlihat seperti ini:fungsi initializeAuth fungsi

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 Selanjutnya

Lanjutkan 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

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 Menggunakan @capgo/capacitor-login-social untuk detail implementasi di @capgo/capacitor-login-social Menggunakan @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey Menggunakan @capgo/capacitor-biometrik-asli untuk detail implementasi di @capgo/capacitor-native-biometric, dan Dua Faktor Autentikasi untuk detail implementasi di Dua Faktor Autentikasi.