Supabase Pengenalan Integrasi

Ikhtisar

Tutorial ini akan memandu Anda dalam menyiapkan Supabase Otentikasi dengan plugin Capacitor Login Sosial. Integrasi ini memungkinkan Anda menggunakan penyedia login sosial asli (Google, Apple, Facebook, Twitter) pada platform seluler sambil memanfaatkan Supabase Auth untuk autentikasi backend dan PostgreSQL untuk penyimpanan data.

Apa yang Akan Anda Pelajari

Cara mengkonfigurasi Otentikasi Supabase
Cara mengintegrasikan plugin Login Sosial Capacitor dengan Supabase Auth
Penyiapan khusus platform untuk Android, iOS, dan Web
Cara menangani nonce dengan aman untuk Supabase

Apa yang Anda Butuhkan

Sebelum memulai, pastikan Anda memiliki:

Proyek Supabase
- Buat proyek di Dasbor Supabase
- Aktifkan penyedia Google OAuth
- Dapatkan URL proyek Supabase Anda dan kunci segera

2.Supabase JS SDK

Instal Supabase di proyek Anda:
Terminal window
```
npm install @supabase/supabase-js
```

Proyek Capacitor
- Aplikasi Capacitor yang sudah ada
- Capacitor Plugin Login Sosial terpasang:
  Terminal window
```
npm install @capgo/capacitor-social-login
npx cap sync
```
Penyiapan Google Khusus Platform
- Selesaikan penyiapan Google Masuk untuk platform target Anda:

Contoh Aplikasi

Contoh kerja lengkap tersedia di repositori:

Repositori Kode: Anda dapat menemukan repositori kode di sini

Contoh aplikasi menunjukkan:

Otentikasi email/kata sandi dengan Supabase
Google Integrasi masuk (Android, iOS, dan Web)
Penyimpanan nilai kunci sederhana menggunakan tabel Supabase PostgreSQL
Penyimpanan data khusus pengguna dengan Keamanan Tingkat Baris (RLS)

Detail Implementasi Utama

Penanganan Nonce

Supabase memerlukan penanganan nonce khusus untuk keamanan. Implementasinya mengikuti dokumentasi Masuk React Native Google:

Hasilkan rawNonce (string acak aman URL)
Hash dengan SHA-256 untuk mendapatkan nonceDigest
Lewati nonceDigest ke Google Masuk
Teruskan rawNonce ke Supabase (Supabase melakukan hash secara internal untuk perbandingan)

JWT Validasi

Contoh implementasi mencakup validasi JWT untuk memastikan:

Audiens token cocok dengan ID Klien Google Anda yang dikonfigurasi
Nonce cocok dengan intisari yang diharapkan
Coba ulang otomatis jika validasi gagal (terutama penting untuk iOS)

Pertimbangan Khusus Platform

iOS: Penyimpanan token dapat menyebabkan masalah nonce - penerapannya menangani hal ini secara otomatis
Web: Harus memanggil isLoggedIn() saat dipasang untuk menangani pengalihan OAuth
Android: Implementasi standar dengan konfigurasi sidik jari SHA-1

Langkah SelanjutnyaLanjutkan dengan panduan pengaturan:

Supabase Google Login - Pengaturan Umum - Ikhtisar dan prasyarat
Android Penyiapan - Android konfigurasi khusus
iOS Penyiapan - iOS konfigurasi khusus
Penyiapan Web - Konfigurasi khusus web

Apple Masuk

Supabase Apple Login - Pengaturan Umum - Ikhtisar dan prasyarat
iOS Setup - iOS konfigurasi khusus
Android Setup - Android konfigurasi khusus