Pengenalan Integrasi Supabase

Bab berjudul “Ringkasan”

This tutorial will guide you through setting up Supabase Authentication with the Capacitor Social Login plugin. This integration allows you to use native social login providers (Google, Apple, Facebook, Twitter) on mobile platforms while leveraging Supabase Auth for backend authentication and PostgreSQL for data storage.

Apa yang Anda Pelajari

• Bagaimana Mengatur Autentikasi Supabase
• Bagaimana Mengintegrasikan Capacitor Plugin Login Sosial dengan Autentikasi Supabase
• Pengaturan Platform untuk Android, iOS, dan Web
• Bagaimana 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 penyedia OAuth Google
   • Dapatkan URL proyek Supabase dan kunci anonim

2. Supabase JS SDK

   • Pasang Supabase di proyek Anda:

     npm install @supabase/supabase-js

3. Proyek Capacitor

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

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

4. Konfigurasi Google yang spesifik untuk platform

   • Sesuaikan pengaturan masuk Google untuk platform-target Anda:
     • Setup Masuk Google Android
     • Setup Masuk Google iOS
     • Setup Masuk 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 masuk Google (Android, iOS, dan Web)
• Penyimpanan nilai kunci sederhana menggunakan tabel PostgreSQL Supabase
• Penyimpanan data spesifik pengguna dengan Keamanan Tingkat Baris (RLS)

Rincian Implementasi Kunci

Pengelolaan Nonce

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

• (String acak aman URL) rawNonce Hashnya dengan SHA-256 untuk mendapatkan
• Lampirannya 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:

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

Konsiderasi Spesifik Platform

• iOSPenggunaan token caching dapat menyebabkan masalah nonce - implementasi ini menangani hal ini secara otomatis
• WebPanggil untuk menangani pengalihan OAuth saat mount isLoggedIn() Android
• Implementasi standar dengan konfigurasi fingerprint SHA-1Langkah-Langkah Selanjutnya

Bagian berjudul “Langkah-Langkah Selanjutnya”

Pengaturan Umum Supabase Google Login - Pengaturan Umum

• - Ringkasan dan persyaratan Pengaturan Android
• Android Setup - Pengaturan khusus Android
• Pengaturan iOS - Pengaturan khusus iOS
• Pengaturan Web - Pengaturan khusus Web

Pengenalan Sign-In Apple

• Supabase Login Apple - Pengaturan Umum - Ringkasan dan persyaratan
• Pengaturan iOS - Pengaturan khusus iOS
• Pengaturan Android - Konfigurasi spesifik 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, @capgo/capacitor-login-sosial untuk detail implementasi dalam @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik native untuk detail implementasi di @capgo/capacitor-biometrik native, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.