Supabase Apple Login di Web

Persyaratan

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

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

Pengimplementasian

The complete implementation is available in the contoh aplikasi supabaseAuthUtils.ts file. Panduan ini menjelaskan konsep utama dan cara menggunakan fitur ini.

Bab berjudul “Menggunakan Bantuan Autentikasi”

The authenticateWithAppleSupabase fungsi 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, Apple Sign-In menggunakan aliran OAuth popup:

1. InitializationPlugin ini diinisialisasi dengan ID Layanan Anda dan URL halaman saat ini sebagai URL pengalihan.
2. OAuth PopupBuka jendela popup dengan halaman OAuth Apple
3. Autentikasi PenggunaPengguna 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 mendeteksi platform web dan mengkonfigurasi semuanya dengan tepat.

Bab berjudul “Catatan Penting”

Bab berjudul “Konfigurasi ID Layanan”

• Apple Service ID diperlukan untuk Web (sama seperti Android)
• Pastikan domain Anda ditambahkan ke domain yang diizinkan di Portal Pengembang Apple
• 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

Pada 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

Menggunakan fungsi bantuan, Anda authenticateWithAppleSupabase Fungsi bantuan, Anda Mengupdate update the clientId 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,
  },
});

Ganti

Replace '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 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
• Pengaturan Supabase: Periksa apakah Pengidentifikasi Layanan Anda telah dikonfigurasi dengan benar di pengaturan penyedia Apple Supabase
• Periksa example app code untuk referensi

Judul bagian “Teruskan dari Supabase Apple Login di Web”

Supabase Apple Login di Web untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login Sosial Untuk kemampuan native di dalam Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-login Sosial Untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey @capgo/capacitor-native-biometrik untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor