Supabase Apple Login - Pengaturan Umum

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 berfungsi di platform iOS, Android, dan Web.

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

1. Buatlah proyek Supabase

2. Baca panduan Pengaturan Login Apple Umum panduan untuk mengatur kredensial OAuth Apple

3. Ikuti panduan spesifik platform yang relevan untuk mengatur kredensial OAuth Apple untuk platform target Anda:

   • Pengaturan Android
   • Pengaturan iOS
   • Pengaturan Web

   Peringatan

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

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

Mengaktifkan penyedia OAuth Apple di Supabase

1. Pergi ke halaman Dashboard Supabase

2. Klik pada proyek Anda

   

3. Tidak pergi ke menu Authentication menu Supabase

   

4. Klik pada tab Providers tab

   

5. Cari Apple pengembang

   

6. Aktifkan Apple pengembang

   

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 maupun ID layanan.

   

8. Klik pada tombol Save button

   

   Peringatan

   Anda TIDAK PERLU mengatur Secret key (for OAuth). Kami akan melakukan implementasi backend kustom untuk menghandle login Apple.

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

Menggunakan Bantuan Autentikasi

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

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

Implementasi Lengkap

Implementasi lengkap tersedia dalam file aplikasi contoh’s. supabaseAuthUtils.ts Penggunaan Dasar

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 Native (tidak perlu URL redirect, menggunakan ID aplikasi secara otomatis)
• Android: Menggunakan alur redirect OAuth dengan fungsi edge belakang (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 mengautentikasi dengan Supabase menggunakan supabase.auth.signInWithIdToken().

Teruskan dari Supabase Login Apple - Pengaturan Umum

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