Pengaturan Login Apple Supabase - Umum

Pendahuluan

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

Prerequisites

Sebelum memulai, pastikan Anda telah:

1. Membuat proyek Supabase

2. Membaca Pengaturan Umum Login Apple Pengaturan Umum Sign-In Apple

3. Melakukan langkah-langkah yang spesifik untuk platform masing-masing untuk mengatur kredensial OAuth Apple untuk platform target Anda:

   • Setup Android
   • Pengaturan iOS
   • Pengaturan Web

   Catatan

   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 penyedia OAuth Apple di Supabase

1. Pergi ke Dashboard Supabase

2. Klik pada proyek Anda

   

3. Tidak pergi ke menu Authentication Menu

   

4. Klik pada tab Providers tab

   

5. Temukan Apple provider

   

6. Aktifkan Penyedia Apple provider

   

7. Fill in the client ID configuration:

   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 MENGATUR pengaturan Secret key (for OAuth)Kami akan melakukan implementasi backend yang disesuaikan untuk mengelola 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.

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

Pengimplementasian Lengkap

Pengimplementasian lengkap tersedia di file aplikasi contoh. 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);
}

Bab yang berjudul “Bagaimana Cara Kerjanya”

Fungsi bantuan secara otomatis mengatasi perbedaan spesifik platform:

• iOS: Menggunakan Sign-In Apple Asli (tidak perlu URL Redirect, menggunakan ID Bundle 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 ini mengembalikan token identitas dari Apple, yang kemudian digunakan untuk autentikasi dengan Supabase menggunakan supabase.auth.signInWithIdToken().

Teruskan dari Pengaturan Login Apple Supabase - Umum

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