Pengenalan Integrasi Supabase

Ringkasan

Panduan ini akan mengantumkan Anda melalui pengaturan Supabase Authentication dengan plugin Capacitor Login Sosial. 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 Capacitor Login Sosial dengan Supabase Auth
• Pengaturan platform khusus untuk Android, iOS, dan Web
• Bagaimana menghandle nonces secara aman untuk Supabase

Apakah yang Anda Butuhkan

Sebelum Anda memulai, pastikan Anda telah:

1. Proyek Supabase

   • Buat proyek di Pengaturan Supabase
   • Aktifkan penyedia autentikasi Google
   • Peroleh URL dan kunci anonim proyek Supabase Anda

2. Supabase JS SDK

   • Instal Supabase di proyek Anda:

     npm install @supabase/supabase-js

3. Proyek Capacitor

   • Aplikasi Capacitor yang sudah ada
   • Plugin autentikasi sosial Capacitor terinstal:

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

4. Pengaturan Google yang Spesifik untuk Platform

   • Selesaikan pengaturan masuk Google untuk platform-target Anda:
     • Pengaturan Masuk Google untuk Android
     • Pengaturan Masuk Google untuk iOS
     • Pengaturan Masuk Google untuk Web

Aplikasi Contoh

Aplikasi contoh yang lengkap tersedia di repository:

Code Repository: Anda dapat menemukan repository code di sini

Aplikasi contoh menunjukkan:

• Autentikasi email/password dengan Supabase
• Integrasi Sign-In Google (Android, iOS, dan Web)
• Penyimpanan nilai kunci dengan 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 Buatlah:

• (string acak aman URL) rawNonce email/password authentication with Supabase
• 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 dikonfigurasi
• Nonce sesuai dengan digest yang diharapkan
• Ulangi secara otomatis pada gagal validasi (terutama penting untuk iOS)

Pertimbangan Spesifik Platform

• IOS: Penyimpanan Token dapat menyebabkan masalah nonce - implementasi ini mengatasi masalah ini secara otomatis
• Website: Harus memanggil isLoggedIn() On mount untuk menghandle redirect OAuth
• Andoid: Implementasi standar dengan konfigurasi fingerprint SHA-1

Langkah Selanjutnya

Teruskan dengan panduan pengaturan:

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

Pengenalan Apple Sign-In

• Pengaturan Login Apple Supabase - Umum - Ringkasan dan persyaratan
• Konfigurasi iOS - Konfigurasi iOS khusus
• Android Setup - 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 sosial untuk kemampuan native di Menggunakan @capgo/capacitor-login sosial, @capgo/capacitor-login sosial untuk detail implementasi di @capgo/capacitor-login sosial, @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.