Supabase Login Apple di Web

Prasyarat

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

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

Implementasi

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

Menggunakan Bantuan Autentikasi

Fungsi ini mengelola seluruh alur autentikasi: authenticateWithAppleSupabase Salin ke clipboard

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 berjudul “Bagaimana Cara Kerjanya”

Inisialisasi

1. __CAPGO_KEEP_0__Plugin diinisialisasi dengan ID Layanan Anda dan URL halaman saat ini sebagai URL pengalihan
2. OAuth PopupMembuka jendela popup dengan halaman OAuth Apple
3. Penggunaan PengautentikanPengguna mengautentikasi dengan Apple di popup
4. Token IdentitasApple mengembalikan token identitas (JWT) yang berisi informasi pengguna
5. Pengautentikan SupabaseToken identitas dikirimkan ke Supabase menggunakan signInWithIdToken()

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

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

URL Pengalihan

• Pada web, URL pengalihan secara otomatis disetel 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

Dalam Supabase, atur 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

Saat menggunakan authenticateWithAppleSupabase fungsi bantuan, Anda wajib 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 yang sebenarnya (nilai yang sama yang Anda konfigurasi di Portal Pengembang Apple).

Pengaturan

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
• Popup diblokirTentukan pengaturan browser - beberapa browser memblokir popup secara default
• Domain tidak diizinkanPastikan domain Anda telah ditambahkan ke domain yang diizinkan di Portal Pengembang Apple
• Konfigurasi SupabasePastikan ID Layanan Anda telah dikonfigurasi dengan benar di pengaturan penyedia Apple Supabase
• Lihat contoh aplikasi __CAPGO_KEEP_0__ example app code Lanjutkan dari Supabase Apple Login di Web

Judul bagian “Lanjutkan dari Supabase Apple Login di Web”

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