Pengenalan Integrasi Supabase

Ringkasan

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

Apa yang Anda Pelajari

• Cara mengonfigurasi Autentikasi Supabase
• Cara mengintegrasikan Capacitor Plugin Login Sosial dengan Autentikasi Supabase
• Pengaturan Platform yang Spesifik untuk Android, iOS, dan Web
• Cara Menghandle Nonce dengan Aman untuk Supabase

Apa yang Anda Butuhkan

Sebelum Anda Mulai, Pastikan Anda Memiliki:

1. Proyek Supabase

   • Buat Proyek di Dashboard Supabase
   • Aktifkan Provider OAuth Google
   • Dapatkan URL dan kunci anonim proyek Supabase Anda

2. Supabase JS SDK

   • Pasang Supabase di proyek Anda:

     npm install @supabase/supabase-js

3. Proyek Capacitor

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

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

4. Pengaturan Google untuk Platform-Spesifik

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

Aplikasi Contoh

Contoh aplikasi yang berfungsi sepenuhnya 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 sederhana menggunakan tabel PostgreSQL Supabase
• Penyimpanan Data Spesifik Pengguna dengan Keamanan Tingkat Baris (RLS)

Rincian Implementasi Utama

Pengelolaan Nonce

Supabase memerlukan pengelolaan nonce khusus untuk keamanan. Implementasinya mengikuti dokumentasi Dokumentasi Google Sign In untuk React Native:

• Buat rawNonce (String Acak yang Aman untuk URL)
• Hash dengan SHA-256 untuk mendapatkan nonceDigest
• Kirim nonceDigest ke Google Sign-In
• Melalui 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: Penyimpanan token 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-Langkah Selanjutnya

Teruskan dengan panduan pengaturan:

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

Pengaturan Sign-In Apple

• Supabase Pengaturan Login Apple - Umum - Ringkasan dan syarat-syarat
• Pengaturan iOS - Pengaturan khusus iOS
• Pengaturan Android - Pengaturan khusus Android

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