Supabase Apple Login di Web

Persyaratan sebelumnya

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

• Apple Login Web setup Setup Apple Login - Umum Supabase
• Pengimplementasian Judul Bagian: Pengimplementasian.

Pengimplementasian lengkap tersedia di

file. Panduan ini menjelaskan konsep utama dan cara menggunakan fitur tersebut. Menggunakan Bantuan Autentikasi supabaseAuthUtils.ts Setup Apple Login - Umum Supabase

contoh aplikasi’s

Yaitu 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

Judul Bagian “Bagaimana Cara Kerjanya”

1. Pada Web, Apple Sign-In menggunakan alur popup OAuth:Inisialisasi
2. : Fungsi ini diinisialisasi dengan ID Layanan Anda dan URL halaman saat ini sebagai URL redirectPopup OAuth
3. : Membuka jendela popup dengan halaman OAuth Apple’s: 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 secara otomatis mendeteksi platform web dan mengkonfigurasi semuanya dengan tepat.

Catatan Penting

Pengaturan 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 telah ditambahkan ke daftar domain yang diizinkan di Portal Pengembang Apple

URL Redirect

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

ID Klien Supabase

Dalam Supabase, konfigurasi penyedia Apple Anda dengan:

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

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

Perbarui Fungsi Bantuan

Saat menggunakan fungsi bantuan, Anda authenticateWithAppleSupabase harus perbarui untuk sesuai dengan ID Layanan Apple Anda: clientId Salin ke papan klip

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

Ganti

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

Troubleshooting

Jika autentikasi gagal:

• ID Layanan Tidak Sesuai: Periksa apakah ID Layanan Anda sesuai di Portal Pengembang Apple dan di code Anda
• URL Kembali Tidak Dikonfigurasi: Pastikan URL halaman Anda saat ini (dengan dan tanpa tanda slash akhir) telah dikonfigurasi di Portal Pengembang Apple
• Pop-up Diblokir: Periksa pengaturan browser - beberapa browser memblokir pop-up secara default
• Domain Tidak Diperbolehkan: Periksa apakah domain Anda telah ditambahkan ke domain yang diizinkan di Portal Pengembang Apple
• Konfigurasi Supabase: Pastikan ID Layanan Anda telah dikonfigurasi dengan benar di Pengaturan Provider Apple Supabase
• Panduan Contoh aplikasi code Sebagai referensi

Teruskan dari Supabase Apple Login di Web

Jika Anda menggunakan Supabase Apple Login di Web untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, @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 Nativ untuk detail implementasi di @capgo/capacitor-biometrik Nativ, dan Dua Faktor Autentikasi untuk detail implementasi di Dua Faktor Autentikasi.