Supabase Apple Login di Web

Persyaratan Sebelumnya

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

• Apple Login Web setup Pengaturan Apple Login - Umum Supabase
• Pengimplementasian Judul Bagian: “Pengimplementasian”.

Pengimplementasian lengkap tersedia dalam

file. Panduan ini menjelaskan konsep-konsep utama dan cara menggunakan aplikasi tersebut. Penggunaan Bantuan Autentikasi supabaseAuthUtils.ts Apple Sign-In dengan Supabase Authentication di Web

Setup Apple Login Web

Yaitu authenticateWithAppleSupabase fungsi ini mengelola alur autentikasi secara keseluruhan:

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 popup OAuth:

1. Inisialisasi: Plugin ini diinisialisasi dengan ID Layanan Anda dan URL halaman saat ini sebagai URL pengalihan
2. Popup OAuth: Membuka jendela popup dengan halaman OAuth Apple
3. Autentikasi PenggunaUser 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 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 tanda slash akhir telah dikonfigurasi di Portal Pengembang Apple

ID Klien Supabase

Dalam Supabase, konfigurasi penyedia Apple Anda dengan:

• ID Klien: ID Layanan Apple Anda (misal, 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 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' dengan ID Layanan Apple Anda yang sebenarnya (nilai yang sama yang Anda konfigurasi di Portal Pengembang Apple).

Troubleshooting

Jika autentikasi gagal:

• Pengidentifikasi Layanan Tidak Sesuai: Periksa apakah Pengidentifikasi 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) dikonfigurasi di Portal Pengembang Apple
• Pop-up Diblokir: Periksa pengaturan browser - beberapa browser memblokir pop-up secara default
• Dominan Tidak Diperbolehkan: Periksa apakah domain Anda telah ditambahkan ke daftar domain yang diizinkan di Portal Pengembang Apple
• Konfigurasi Supabase: Pastikan ID Layanan Anda telah dikonfigurasi dengan benar di Pengaturan Provider Apple Supabase
• Review contoh aplikasi __CAPGO_KEEP_0__ example app code Teruskan dari Supabase Apple Login di Web

Bab yang berjudul “Teruskan dari Supabase Apple Login di Web”

Supabase Apple Login di Web untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, for the native capability in Using @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 native untuk detail implementasi di @capgo/capacitor-biometrik native, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.