Pengenalan Integrasi Firebase

Ringkasan

Tutorial ini akan mengantumkan Anda melalui pengaturan Firebase Authentication dengan plugin Login Sosial Capacitor Capgo. 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

• Cara mengonfigurasi Autentikasi Firebase
• Cara mengintegrasikan Plugin Login Sosial Capacitor dengan Firebase Auth
• Pengaturan platform khusus untuk Android, iOS, dan Web

Apa yang Anda Butuhkan

Sebelum Anda memulai, pastikan Anda telah 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

   • Instalasi Firebase di project 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 repositori code di sini

Contoh aplikasi menunjukkan:

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

Kata tentang menggunakan Firebase SDK pada Capacitor

When using the Firebase JS SDK on Capacitor, you need to be aware that when using the authentication methods, you need to initialize the Firebase Auth instance a bit differently.

fungsi untuk mendapatkan instance Firebase Auth. 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, metode ini tidak berfungsi dan menyebabkan Firebase auth mengalami kejengahan. Artikel iniAnda perlu menggunakan initializeAuth Fungsi untuk menginisialisasi instance Firebase Auth.\nIni 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

Lanjutkan dengan panduan pengaturan:

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

Lanjutkan dari Pengenalan Integrasi Firebase

Jika Anda menggunakan Pengenalan Integrasi Firebase untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-login Sosial untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Authentikasi Dua Faktor Untuk detail implementasi dalam dua-faktor autentikasi.