Konfigurasi Login Apple Supabase - Umum

Pendahuluan

Petunjuk ini akan membantu Anda mengintegrasikan Sign-In Apple dengan Supabase Authentication. Sign-In Apple menyediakan metode autentikasi yang aman dan fokus pada privasi yang dapat berfungsi di platform iOS, Android, dan Web.

Prasyarat

Sebelum memulai, pastikan Anda telah:

1. Membuat proyek Supabase

2. Membaca context: Panduan gaya penulisan dari fragmen teks HTML dari string Capgo UI yang lebih panjang (kunci induk `read_the_style_guide`). Halaman/area: Situs web pemasaran Capgo. Peran: Kalimat deskripsi situs web. Dilihat di: halaman contributing.astro. Kunci pesan `read_the_style_guide` (Baca Panduan Gaya Penulisan). Petunjuk untuk mengatur kredit OAuth Apple

3. Ikuti panduan platform khusus untuk mengatur kredit OAuth Apple untuk platform target Anda:

   • Setup Android
   • Setup iOS
   • Setup Web

   Peringatan

   Sebelum memulai tutorial Supabase, Anda perlu mengenerate ID klien untuk platform yang Anda rencanakan untuk digunakan.

   Untuk iOS, ID klien adalah sama dengan ID aplikasi Anda. Untuk Android dan Web, ID klien adalah sama dengan ID layanan Anda. Anda akan menggunakan mereka di langkah 7 dari panduan ini.

Mengaktifkan penyedia OAuth Apple di Supabase

1. Pergi ke Dashboard Supabase

2. Klik pada proyek Anda

   

3. Lakukan pergi ke Authentication Menu

   

4. Klik pada Providers Tab

   

5. Temukan Apple pengembang

   

6. aktifkan penyedia Apple penyedia

   

7. Isi konfigurasi ID klien:

   Peringatan

   Jika Anda menggunakan login Apple untuk iOS, ID klien adalah sama dengan ID aplikasi Anda. Jika Anda menggunakan login Apple untuk Android atau Web, ID klien adalah sama dengan ID layanan Anda. Jika Anda menggunakan kedua-duanya, Anda perlu menyediakan baik ID aplikasi dan ID layanan.

   

8. Klik pada tombol Save tombol

   

   Catatan

   Kamu Jangan perlu mengatur setup Secret key (for OAuth). Kami akan melakukan implementasi backend kustom untuk menghandle login Apple.

Voilà, kamu telah mengaktifkan Sign-In Apple dengan Supabase Authentication 🎉

Menggunakan Bantuan Autentikasi

Implementasi lengkap termasuk fungsi bantuan authenticateWithAppleSupabase() yang menghandle seluruh alur Sign-In Apple dengan Supabase. Fungsi ini:

• Memulai Sign-In Apple dengan konfigurasi spesifik platform
• Menghandle alur autentikasi (native pada iOS, redirect OAuth pada Android/Web)
• Menarik Token Identitas dari Apple
• Masuk ke Supabase dengan Token Identitas

Pengimplementasian Lengkap

Pengimplementasian Lengkap tersedia di file aplikasi contoh. Contoh Penggunaan Dasar supabaseAuthUtils.ts Bab yang berjudul “Contoh Penggunaan Dasar”

Salin ke papan klip

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Bab yang berjudul “Bagaimana Cara Kerjanya”

Fungsi bantuan secara otomatis mengatasi perbedaan spesifik platform:

• iOS: Menggunakan Sign-In Apple Native (tidak perlu URL redirect, menggunakan ID Paket secara otomatis)
• Android: Menggunakan alur OAuth dengan fungsi edge backend (memerlukan ID Layanan)
• Web: Menggunakan alur popup OAuth (memerlukan ID Layanan dan URL halaman saat ini sebagai redirect)

Fungsi tersebut mengembalikan token identitas dari Apple, yang kemudian digunakan untuk otentikasi dengan Supabase menggunakan supabase.auth.signInWithIdToken().

Lanjutkan dari Pengaturan Login Apple Supabase - Umum

Pengaturan Login Apple Supabase - Umum Jika Anda menggunakan untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @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.