Pengaturan Umum Login Apple Supabase

Ringkasan

Panduan 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.

Persyaratan

Sebelum memulai, pastikan Anda telah:

1. Membuat proyek Supabase

2. Membaca Pengaturan Umum Apple Login panduan untuk mengatur kunci OAuth Apple

3. Mengikuti panduan spesifik platform untuk mengatur kunci OAuth Apple untuk platform target Anda:

   • Pengaturan Android
   • Konfigurasi iOS
   • Konfigurasi Web

   Pertimbangan

   Sebelum memulai tutorial Supabase, Anda perlu menghasilkan 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 pada langkah 7 dari panduan ini.

Mengaktifkan Provider OAuth Apple di Supabase

1. Pergi ke halaman Dashboard Supabase

2. Klik pada proyek Anda

   

3. Perlukah ke menu Authentication menu

   

4. Klik pada Providers tab

   

5. Cari pemasok Apple provider

   

6. Aktifkan pemasok Apple provider

   

7. Isi konfigurasi ID klien:

   Catatan

   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

   Anda TIDAK PERLU MELAKUKAN APA-APA setup Secret key (for OAuth)Kami akan melakukan implementasi backend khusus untuk menghandle login Apple.

Voilà, Anda 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:

• Menginisialisasi Sign-In Apple dengan konfigurasi spesifik platform
• Menghandle alur autentikasi (native pada iOS, redirect OAuth pada Android/Web)
• Mengambil token identitas dari Apple
• Masuk ke Supabase dengan token identitas

Implementasi Lengkap

Implementasi lengkap tersedia di contoh aplikasi’s supabaseAuthUtils.ts file.

Penggunaan Dasar

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);
}

Bagaimana Cara Kerjanya

Fungsi bantuan secara otomatis mengatasi perbedaan spesifik platform:

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

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

Teruskan dari Supabase Apple Login - Pengaturan Umum

Pengaturan Umum Supabase Apple Login untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-login sosial untuk kemampuan native di Menggunakan @capgo/capacitor-login sosial, for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-login-sosial untuk detail implementasi di @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi di @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.