Supabase Apple Login on Web

Persyaratan

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

• ini Pengaturan Login Apple Web
• Pengaturan Umum Apple Login - Supabase Implementasi.

Persyaratan Implementasi lengkap tersedia di

Panduan ini menjelaskan konsep utama dan cara menggunakan fitur ini. file aplikasi contoh. supabaseAuthUtils.ts Panduan ini menjelaskan konsep utama dan cara menggunakan fitur ini.

Menggunakan Bantuan Autentikasi

The authenticateWithAppleSupabase Fungsi ini mengelola 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

Pada Web, Sign-In Apple 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

: Fungsi bantuan otomatis mendeteksi platform web dan mengkonfigurasi semuanya dengan tepat.

Bagian berjudul “Catatan Penting”

• Bagian berjudul “Konfigurasi ID Layanan”
• ID Layanan harus dikonfigurasi di Portal Pengembang Apple dengan URL Pengembalian yang benar
• Pastikan domain Anda telah ditambahkan ke domain yang diizinkan di Portal Pengembang Apple

URL Redirect

• Pada web, URL redirect 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 fungsi bantuan, Anda authenticateWithAppleSupabase harus mengupdate untuk sesuai dengan ID Layanan Apple Anda: clientId Salin ke clipboard

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

__CAPGO_KEEP_0__

Ganti dengan ID Layanan Apple Anda yang sebenarnya (nilai yang sama yang Anda konfigurasi di Portal Pengembang Apple). 'your.service.id.here' Pengaturan

Jika autentikasi gagal:

: Pastikan ID Layanan Anda sesuai di Portal Pengembang Apple dan __CAPGO_KEEP_0__ Anda.

• URL Pengembalian tidak dikonfigurasi: Verify your Service ID matches in both Apple Developer Portal and your code
• Pop-up diblokir: Periksa pengaturan browser - beberapa browser memblokir pop-up secara default.
• Domain tidak diizinkanPengaturan
• Bagian berjudul “Pengaturan”: Verifikasi domain Anda telah ditambahkan ke daftar domain yang diizinkan di Portal Pengembang Apple
• Konfigurasi Supabase: Verifikasi ID Layanan Anda telah dikonfigurasi dengan benar di pengaturan penyedia Apple Supabase
• Ulasan Contoh aplikasi code untuk referensi