Supabase Login Apple pada Android

Persyaratan

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

• the Pengaturan Umum Apple Login - Supabase.

Penting

Sign-In Apple pada Android memerlukan server backend karena Apple tidak menyediakan dukungan native Android. Kami akan menggunakan Supabase Edge Function sebagai backend.

Langkah 1: Deploy Fungsi Edge Backend

Pertama, kita perlu mengdeploy Fungsi Edge Supabase yang akan menghandle panggilan balik OAuth Apple.

1. Navigasikan ke direktori proyek Supabase Anda

   cd your-project/supabase

2. Buat fungsi edge (jika belum ada)

   supabase functions new apple-signin-callback

3. Salin fungsi edge code

   Implementasi fungsi edge lengkap tersedia di contoh aplikasi.

   Salin file-file berikut ke proyek Anda:

   • supabase/functions/apple-signin-callback/index.ts - Fungsi edge utama code
   • supabase/functions/apple-signin-callback/deno.json - Peta import untuk dependensi (termasuk jose library untuk tanda tangan JWT

4. Konfigurasi verifikasi JWT

   Endpoint panggilan balik OAuth Apple haruslah publik (tidak memerlukan autentikasi) karena Apple akan mengarahkan ke sana. Perbarui file: supabase/config.toml Salin ke clipboard

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   Pengaturan

   Pengaturan verify_jwt = false Membuat endpoint ini publik. Ini diperlukan karena Apple’s OAuth redirect tidak termasuk header autentikasi Supabase. Endpoint ini memvalidasi alur OAuth sendiri.

5. Deploy fungsi

   supabase functions deploy apple-signin-callback

6. Temukan URL fungsi Anda

   Setelah di-deploy, Anda akan mendapatkan URL seperti:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Jika Anda tidak menemukannya, Anda dapat melakukan hal berikut:

   1. Buka https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Klik pada apple-signin-callback URL fungsi untuk menyalinnya.

   Simpan URL ini

   Anda akan membutuhkan URL ini pada langkah berikutnya ketika mengonfigurasi Portal Pengembang Apple.

Langkah 2: Konfigurasi Portal Pengembang Apple

Sekarang kita perlu mengonfigurasi Portal Pengembang Apple dengan URL backend dan mendapatkan semua nilai yang diperlukan.

URL Fungsi

Pastikan Anda memiliki URL Fungsi Edge Supabase dari Langkah 1 sebelum melanjutkan. Anda akan membutuhkannya untuk mengonfigurasi URL Kembali di Portal Pengembang Apple.

1. Ikuti Panduan Pengaturan Login Apple Android

   Lengkapi Panduan Pengaturan Login Apple Android To:

   • Buat ID Layanan
   • Generate kunci pribadi (.p8 file)
   • Dapatkan ID Tim dan ID Kunci
   • Konfigurasi URL Pengembalian

2. Set URL Pengembalian di Portal Pengembang Apple

   Ketika mengonfigurasi URL Pengembalian di Portal Pengembang Apple (langkah 6.9 dari panduan Apple), gunakan URL Fungsi Edge Supabase:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Penting: Gunakan URL Fungsi Edge Supabase

   Jangan gunakan URL redirect dari Petunjuk Pengaturan Login Apple Android. Panduan itu menggunakan URL server backend khusus. Anda harus menggunakan URL Fungsi Edge Supabase Anda. Diperlukan Match Sama Persis

   URL Kembali harus cocok

   sama persis dengan apa yang Anda konfigurasi di sini. Apple sangat ketat tentang matching URI redirect. Kumpulkan semua nilai yang diperlukan

3. Setelah menyelesaikan panduan pengaturan Apple, Anda seharusnya memiliki:

   ID Tim Pengembang Apple

   • : ID Tim Pengembang Apple Anda.ID TIM PENGEMBANG APPLE
   • ID APL APPLE_KEY_ID: ID Kunci dari Portal Pengembang Apple
   • APPLE_PRIVATE_KEY: File kunci pribadi .p8 Anda (perlu dikodekan base64)
   • ANDROID_SERVICE_ID: ID Layanan Apple Anda (misal, com.example.app.service)
   • BASE_REDIRECT_URL: URL Deep Link Anda (misal, capgo-demo-app://path)

   URL Deep Link

   Adalah BASE_REDIRECT_URL adalah skema tautan dalam yang telah dikonfigurasi di Anda AndroidManifest.xml. Ini adalah tempat backend akan mengarahkan setelah autentikasi.

   Nilai tautan dalamnya bergantung pada android:scheme="capgo-demo-app" code. Jika Anda telah mengatur android:scheme="capgo-demo-app" dalam pengaturan Anda, maka tautan dalamnya akan menjadi AndroidManifest.xmlLangkah 3: Atur Rahasia Supabase capgo-demo-app://path.

Judul bagian “Langkah 3: Atur Rahasia Supabase”

Enkripsi kunci pribadi Anda

1. Pertama, enkripsi kunci pribadi Apple (.p8 file) ke base64:

   Jendela terminal

   base64 -i AuthKey_XXXXX.p8

   Salin seluruh hasilnya (string panjang tunggal).

2. Setel rahasia menggunakan Supabase CLI

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Ganti Pengganti

   Ganti semua nilai pengganti dengan nilai sebenarnya dari Langkah 2.

3. Alternatif: Setel rahasia di Dashboard Supabase

   Jika Anda lebih suka menggunakan dashboard:

   1. Pergi ke dashboard proyek Supabase Anda
   2. Navigasikan ke Fungsi Pintu Edge → Pengaturan → Rahasia
   3. Tambahkan variabel rahasia dengan nilai masing-masing

Konfigurasi Aplikasi Android

The Petunjuk Pengaturan Login Apple Android sudah mencakup mengkonfigurasi aplikasi Android Anda:

• Menambahkan filter intent deep link ke AndroidManifest.xml
• Menambahkan onNewIntent penanganan ke MainActivity.java

Pastikan Anda telah menyelesaikan langkah-langkah tersebut sebelum melanjutkan. Scheme deep link yang Anda konfigurasi di sana akan menjadi BASE_REDIRECT_URL di Langkah 3.

Langkah 4: Gunakan Bantuan Autentikasi

Sekarang Anda dapat menggunakan bantuan autentikasi di aplikasi Anda code.

Implementasi

Implementasi lengkap tersedia di contoh aplikasi’s supabaseAuthUtils.ts file.

Menggunakan Bantuan 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);
}

Perbarui Fungsi Bantuan

Ketika menggunakan authenticateWithAppleSupabase fungsi bantuan, Anda wajib mengupdate nilai-nilai berikut untuk sesuai dengan konfigurasi Anda:

1. Perbarui redirectUrl - Atur ini ke URL Fungsi Edge Supabase Anda:

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. Perbarui clientId - Atur ini ke 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 Android
       redirectUrl: redirectUrl,
     },
   });

   Penting

   Ganti 'your.service.id.here' dengan ID Layanan Apple yang sebenarnya (nilai yang sama yang Anda gunakan untuk ANDROID_SERVICE_ID di Langkah 3).

Lihat implementasi yang lengkap untuk referensi.

Langkah 5: Uji Integrasi

1. Buat dan jalankan aplikasi Android Anda

   npx cap sync android
   npx cap run android

2. Tes alur autentikasi

   • Sentuh tombol “Masuk dengan Apple”
   • Anda seharusnya melihat halaman OAuth Apple di browser
   • Setelah autentikasi, Anda seharusnya diarahkan kembali ke aplikasi Anda
   • Periksa log konsol untuk kesalahan apa pun

3. Verifikasi alur

   Alur lengkap seharusnya:

   1. Pengguna menekan tombol “Masuk dengan Apple”
   2. Aplikasi membuka browser dengan OAuth Apple
   3. Pengguna autentikasi dengan Apple
   4. Apple mengarahkan ke: __CAPGO_KEEP_0__ https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Fungsi Edge mengganti code dengan token
   6. Fungsi Edge mengarahkan ke: your-app://path?id_token=...&access_token=...
   7. Aplikasi Android menerima tautan dalam dan memproses token identitas
   8. Aplikasi masuk ke Supabase dengan menggunakan token identitas

Pengaturan

URI Redirect tidak sesuai

• : Pastikan URL Kembali di Portal Pengembang Apple cocok denganrahasia APPLE_REDIRECT_URI Tautan dalam tidak berfungsi
• : Pastikan bahwa Tautan dalam tidak berfungsi AndroidManifest.xml filter pencarian Anda sesuai BASE_REDIRECT_URL
• Rahasia hilang: Pastikan semua rahasia telah ditetapkan dengan benar menggunakan supabase secrets list
• Gagal menukar token: Periksa log fungsi tepi di Dashboard Supabase untuk pesan kesalahan rinci
• Aplikasi tidak menerima panggilan balik: Pastikan onNewIntent telah diterapkan dengan benar di MainActivity
• Review contoh aplikasi __CAPGO_KEEP_0__ example app code Bagaimana Cara Kerjanya

__CAPGO_KEEP_0__

Pada Android, Sign-In Apple menggunakan alur redirect OAuth:

1. Inisialisasi: Plugin ini diinisialisasi dengan ID Layanan Anda dan URL Redirect Backend
2. Alur OAuth: Membuka browser/Tab Chrome Kustom dengan halaman OAuth Apple
3. Panggilan Balik Backend: Apple mengarahkan ke fungsi Edge Supabase Anda dengan otorisasi code
4. Tukar Token: Fungsi Edge mengganti code untuk token menggunakan endpoint token Apple
5. Redirect Tautan dalam: Fungsi Edge mengarahkan kembali ke aplikasi Anda dengan token identitas
6. Autentikasi Supabase: Aplikasi menerima token dan masuk ke Supabase

Alur ini diperlukan karena Apple tidak menyediakan dukungan native Android untuk Sign in with Apple.

Lanjutkan dari Autentikasi Apple Supabase pada Android

Jika Anda menggunakan Autentikasi Apple Supabase pada Android untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.