Pengenalan Integrasi Supabase

Ringkasan

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

Apakah yang Anda Pelajari

• Bagaimana mengatur Supabase Authentication
• Bagaimana mengintegrasikan plugin Login Sosial Capacitor dengan Supabase Auth
• Pengaturan Platform-Spesifik untuk Android, iOS, dan Web
• Bagaimana menghandle nonces dengan aman untuk Supabase

Apakah yang Anda Butuhkan

Sebelum Anda memulai, pastikan Anda telah memiliki:

1. Proyek Supabase

   • Membuat proyek di Dashboard Supabase
   • Mengaktifkan penyedia autentikasi Google
   • Mendapatkan URL proyek Supabase dan kunci anonim

2. Supabase JS SDK

   • Instal Supabase di proyek Anda:

     npm install @supabase/supabase-js

3. Menggunakan proyek Capacitor yang sudah ada

   • Plugin autentikasi sosial Capacitor terinstal:
   • Capacitor Social Login plugin installed:

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

4. Pengaturan Platform-Spesifik Google

   • Selesaikan pengaturan Sign-In Google untuk platform-target Anda:
     • Pengaturan Login Google Android
     • Pengaturan Login Google iOS
     • Pengaturan Login Google Web

Contoh Aplikasi

Contoh aplikasi lengkap tersedia di repository:

Code Repository: Anda dapat menemukan repository code di sini

Contoh aplikasi tersebut menunjukkan:

• Autentikasi email/password dengan Supabase
• Integrasi Sign-In Google (Android, iOS, dan Web)
• Penyimpanan nilai sederhana menggunakan tabel PostgreSQL Supabase
• Penggunaan penyimpanan data spesifik pengguna dengan Level Keamanan Baris (RLS)

Rincian Implementasi Utama

Pengelolaan Nonce

Supabase memerlukan pengelolaan nonce khusus untuk keamanan. Implementasi mengikuti dokumentasi Sign In Google React Native Buat sebuah:

• (string acak aman URL) rawNonce Nonce Handling
• Hash dengan SHA-256 untuk mendapatkan nonceDigest
• Pass nonceDigest ke Google Sign-In
• Pass rawNonce ke Supabase (Supabase menghashinya secara internal untuk perbandingan)

Validasi JWT

Contoh implementasi termasuk validasi JWT untuk memastikan:

• Token audiens sesuai dengan ID Klien Google yang telah dikonfigurasi
• Nonce sesuai dengan digest yang diharapkan
• Ulangi secara otomatis pada gagal validasi (terutama penting untuk iOS)

Pertimbangan Spesifik Platform

• iOS: Token caching dapat menyebabkan masalah nonce - implementasi ini menangani hal ini secara otomatis
• Web: Harus memanggil isLoggedIn() on mount untuk menghandle redirect OAuth
• Android: Implementasi standar dengan konfigurasi fingerprint SHA-1

Langkah Selanjutnya

Teruskan dengan panduan pengaturan:

• Supabase Google Login - Pengaturan Umum - Ringkasan dan persyaratan dasar
• Konfigurasi Android - Konfigurasi khusus Android
• Konfigurasi iOS - Konfigurasi khusus iOS
• Konfigurasi Web - Konfigurasi khusus Web

Penggunaan Tanda Tangan Apple

• Penggunaan Tanda Tangan Apple Supabase - Konfigurasi Dasar - Ringkasan dan persyaratan dasar
• Konfigurasi iOS - Konfigurasi iOS khusus
• Penetapan Android - Konfigurasi Android khusus

Teruskan dari Pengenalan Integrasi Supabase

Jika Anda menggunakan Pengenalan Integrasi Supabase untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-social untuk kemampuan native di Menggunakan @capgo/capacitor-login-social Menggunakan @capgo/capacitor-login-social untuk detail implementasi di @capgo/capacitor-login-social @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.