Login Apple via Supabase di Web

Prerequisites

Panduan ini akan membantu Anda mengintegrasikan Apple Sign-In dengan Supabase Authentication di Web. Kami asumsikan Anda sudah menyelesaikan:

• halaman Setup Apple Login Web
• halaman Supabase Apple Login - Setup Umum.

Implementasi

Implementasi lengkapnya tersedia di aplikasi contoh supabaseAuthUtils.ts file. Panduan ini menjelaskan konsep utama dan cara menggunakannya.

Menggunakan Authentication Helper

Panduan authenticateWithAppleSupabase fungsi menangani seluruh alur autentikasi:

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

Cara Kerjanya

Di Web, Apple Sign-In menggunakan alur OAuth popup:

1. Inisialisasi: Plugin diinisialisasi dengan Service ID Anda dan URL halaman saat ini sebagai redirect URL
2. Popup OAuth: Membuka jendela popup dengan halaman OAuth Apple
3. Autentikasi Pengguna: Pengguna melakukan autentikasi dengan Apple di dalam popup
4. Token Identitas: Apple mengembalikan identity token (JWT) yang berisi informasi pengguna
5. Autentikasi Supabase: Identity token dikirim ke Supabase menggunakan signInWithIdToken()

Fungsi helper otomatis mendeteksi platform web dan mengonfigurasi semuanya dengan tepat.

Catatan Penting

Konfigurasi Service ID

• Web membutuhkan Apple Service ID Anda (sama seperti Android)
• Service ID harus dikonfigurasi di Apple Developer Portal dengan Return URL yang benar
• Pastikan domain Anda sudah ditambahkan ke daftar domain yang diizinkan di Apple Developer Portal

URL Redirect

• Di web, redirect URL otomatis diatur ke window.location.href (URL halaman saat ini)
• Ini harus cocok dengan salah satu Return URL yang dikonfigurasi di Apple Developer Portal
• Pastikan URL dengan dan tanpa trailing slash sudah dikonfigurasi di Apple Developer Portal

ID Client Supabase

Di Supabase, konfigurasikan provider Apple Anda dengan:

• Client ID: Apple Service ID Anda (contoh: com.example.app.service)

Jika Anda juga menggunakan iOS, Anda perlu mengisi App ID dan Service ID di kolom Client ID Supabase (dipisahkan koma).

Perbarui Helper Function

Saat menggunakan authenticateWithAppleSupabase helper function, Anda harus perbarui clientId agar sesuai dengan Apple Service ID Anda:

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

Penting

Ganti 'your.service.id.here' dengan Apple Service ID asli Anda (nilai yang sama dengan yang Anda konfigurasi di Apple Developer Portal).

Pemecahan Masalah

Jika autentikasi gagal:

• Service ID tidak cocok: Pastikan Service ID Anda cocok di Apple Developer Portal dan code Anda
• Return URL belum dikonfigurasi: Pastikan URL halaman saat ini (dengan dan tanpa trailing slash) sudah dikonfigurasi di Apple Developer Portal
• Popup diblokir: Periksa pengaturan browser - beberapa browser memblokir popup secara default
• Domain tidak diizinkan: Pastikan domain Anda sudah ditambahkan ke daftar domain yang diizinkan di Apple Developer Portal
• Konfigurasi Supabase: Pastikan Service ID Anda sudah dikonfigurasi dengan benar di pengaturan provider Apple Supabase
• Tinjau aplikasi contoh code sebagai referensi

Lanjutkan Supabase Apple Login di Web

Jika Anda menggunakan Login Apple via Supabase di Web untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas native 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.