Login Apple Supabase di Web

Bagian berjudul “Persyaratan”

Panduan ini akan membantu Anda mengintegrasikan Sign-In Apple dengan Supabase Authentication di Web. Diperkirakan bahwa Anda telah menyelesaikan: __CAPGO_KEEP_0__.

• the Pengaturan Login Apple Web
• the Pengaturan Umum Login Apple - Supabase.

Implementasi

Implementasi lengkap tersedia di file aplikasi contoh. supabaseAuthUtils.ts Panduan ini menjelaskan konsep utama dan cara menggunakan fitur ini.

Menggunakan Bantuan Autentikasi

The authenticateWithAppleSupabase Fungsi ini mengatur 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);
}

Bagaimana Cara Kerjanya

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

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

Fungsi Bantuan Otomatis

Catatan Penting

Konfigurasi ID Layanan

• Web memerlukan ID Layanan Apple Anda (sama seperti Android)
• ID Layanan harus dikonfigurasi di Portal Pengembang Apple dengan URL Pengembalian yang benar
• Pastikan domain Anda ditambahkan ke domain yang diizinkan di Portal Pengembang Apple

URL Pengalihan

• Pada web, URL pengalih secara otomatis diatur ke window.location.href (URL halaman saat ini)
• Ini harus sesuai dengan salah satu URL Pengembalian yang dikonfigurasi di Portal Pengembang Apple
• Pastikan URL dengan dan tanpa slash akhir dikonfigurasi di Portal Pengembang Apple

ID Klien Supabase

Di Supabase, konfigurasi penyedia Apple Anda dengan:

• ID Klien: ID Layanan Apple Anda (misalnya com.example.app.service)

Jika Anda juga menggunakan iOS, Anda perlu menyediakan baik ID Aplikasi dan ID Layanan di bidang ID Klien Supabase (dipisahkan koma)

Perbarui Fungsi Bantuan

Ketika menggunakan authenticateWithAppleSupabase fungsi pembantu, Anda harus mengupdate clientId untuk sesuai dengan ID Layanan Apple 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 ID Layanan Apple Anda yang sebenarnya (nilai yang sama Anda konfigurasi di Portal Pengembang Apple).

Pengaturan Masalah

Jika autentikasi gagal:

• Perbedaan ID Layanan: Pastikan ID Layanan Anda sesuai di Portal Pengembang Apple dan code Anda
• URL Pengembalian tidak dikonfigurasi: Pastikan URL halaman Anda saat ini (dengan dan tanpa tanda slash akhir) dikonfigurasi di Portal Pengembang Apple
• Pop-up diblokir: Periksa pengaturan browser - beberapa browser memblokir pop-up secara default
• Domain tidak diizinkan: Pastikan domain Anda ditambahkan ke domain yang diizinkan di Portal Pengembang Apple
• Pengaturan Supabase: Pastikan ID Layanan Anda dikonfigurasi dengan benar di pengaturan penyedia Apple Supabase
• Review the contoh aplikasi code untuk referensi

Lanjutkan dari Supabase Apple Login on Web

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