Login Apple Supabase di Android

Persyaratan

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

• the Pengaturan Umum Login Apple - 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 Backend Edge

Pertama, kami 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 tidak ada

   supabase functions new apple-signin-callback

3. Salin fungsi edge code

   Implementasi fungsi edge lengkap tersedia di aplikasi contoh Salin berikut file ke proyek Anda:.

   - Fungsi edge utama __CAPGO_KEEP_0__

   • supabase/functions/apple-signin-callback/index.ts - Main edge function 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

   membuat endpoint publik. Ini diperlukan karena redirect OAuth Apple tidak termasuk header autentikasi Supabase. Endpoint ini memvalidasi alur OAuth sendiri. verify_jwt = false Deploy fungsi

5. Jendela terminal

   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 URL apple-signin-callback fungsi untuk menyalinnya.

   Simpan URL ini

   Anda akan membutuhkannya di 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 memerlukan itu untuk mengonfigurasi URL Pengembalian di Portal Pengembang Apple.

1. Ikuti Panduan Pengaturan Login Apple Android

   Selesai dengan Panduan Pengaturan Login Apple Android untuk:

   • Membuat ID Layanan
   • Menghasilkan kunci pribadi (.p8 file)
   • Oleh karena itu, dapatkan ID Tim dan Kunci ID Anda
   • Konfigurasi URL Kembali

2. Setel URL Kembali di Portal Pengembang Apple

   Ketika mengonfigurasi URL Kembali di Portal Pengembang Apple (langkah 6.9 dari panduan Apple), gunakan URL Fungsi Puncak Supabase Anda:

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

   Penting: Gunakan URL Fungsi Puncak Supabase Anda

   TIDAK BOLEH gunakan URL redirect dari Petunjuk Pengaturan Login Apple Android. Panduan tersebut menggunakan URL server backend khusus. Untuk integrasi Supabase, Anda harus gunakan URL Fungsi Puncak Supabase Anda.

   Persyaratan Match yang Tepat

   URL Pengembalian harus sesuai secara tepat apa yang Anda konfigurasi di sini. Apple sangat ketat tentang matching URI redirect.

3. Kumpulkan semua nilai yang diperlukan

   Setelah menyelesaikan panduan pengaturan Apple, Anda harus memiliki:

   • APPLE_TEAM_ID: ID Tim Pengembang Apple Anda
   • APPLE_KEY_ID: ID Kunci dari Portal Pengembang Apple
   • APPLE_PRIVATE_KEY: File kunci pribadi Anda (.p8) yang harus dikodekan base64
   • ID Layanan Android: ID Layanan Apple Anda (misalnya, com.example.app.service)
   • URL Redirect Dasar: URL tautan dalam yang dalam (misalnya, capgo-demo-app://path)

   URL Tautan dalam

   adalah skema tautan dalam yang telah dikonfigurasi di BASE_REDIRECT_URL Ini adalah tempat backend akan mengalihkan setelah autentikasi. AndroidManifest.xmlNilai tautan dalam Anda bergantung pada

   __CAPGO_KEEP_0__. Jika Anda telah mengatur android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" Ini di dalam AndroidManifest.xmlKemudian tautan dalamnya akan menjadi capgo-demo-app://path.

Langkah 3: Atur Rahasia Supabase

Sekarang kita perlu mengatur variabel lingkungan (rahasia) untuk Fungsi Edge Supabase.

1. Enkripsi kunci pribadi Anda

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

   base64 -i AuthKey_XXXXX.p8

   Salin seluruh output (ini adalah string panjang tunggal).

2. Atur 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 Tempat Penyimpanan

   Ganti semua nilai tempat penyimpanan dengan nilai sebenarnya dari Langkah 2.

3. Alternatif: Atur rahasia di Dashboard Supabase

   Jika Anda lebih suka menggunakan dashboard:

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

Konfigurasi Aplikasi Android

Konfigurasi Petunjuk Konfigurasi Login Apple untuk Android sudah mencakup mengkonfigurasi aplikasi Android Anda:

• Mengambahkan filter intent deep link ke AndroidManifest.xml
• Mengambahkan onNewIntent handler ke MainActivity.java

Pastikan Anda telah menyelesaikan langkah-langkah tersebut sebelum melanjutkan. Scheme deep link yang Anda konfigurasi di sana akan digunakan di BASE_REDIRECT_URL Langkah 4: Gunakan Bantuan Autentikasi

Bagian berjudul "Langkah 4: Gunakan Bantuan Autentikasi"

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

   context: Bug bounty program page. Role: UI label. Seen in: page bug-bounty.astro. Message key `bug_bounty_important_label` (Bug Bounty Important Label).

   Penting (Label Penting Program Hadiah Bug). 'your.service.id.here' dengan ID Layanan Apple Anda yang sebenarnya (nilai yang sama yang Anda gunakan untuk ANDROID_SERVICE_ID di Langkah 3).

Lihat implementasi lengkap sebagai referensi.

Langkah 5: Uji Integrasi

1. Bangun dan jalankan aplikasi Android Anda

   npx cap sync android
   npx cap run android

2. Uji alur autentikasi

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

3. Verifikasi aliran

   Aliran lengkap harus seperti ini:

   1. Pengguna mengetuk “Masuk dengan Apple”
   2. Aplikasi membuka browser dengan Apple OAuth
   3. Pengguna otentikasi dengan Apple
   4. Apple mengarahkan ke: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Fungsi Edge menukar 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. App mengakses Supabase dengan token identitas

Troubleshooting

Jika proses autentikasi gagal:

• URI Redirect tidak sesuaiPastikan URL Pengembalian di Portal Pengembang Apple sesuai dengan APPLE_REDIRECT_URI rahasianya
• Tautan dalam tidak berfungsiPeriksa bahwa AndroidManifest.xml filter intent sesuai dengan BASE_REDIRECT_URL
• Rahasia hilangPastikan semua rahasia telah disetel dengan benar menggunakan supabase secrets list
• Kegagalan pertukaran token: Periksa log fungsi tepi di Dashboard Supabase untuk pesan kesalahan rinci
• Gagal menerima panggilan balik: Pastikan onNewIntent telah diimplementasikan dengan benar di MainActivity
• Review contoh aplikasi __CAPGO_KEEP_0__ example app code Bagaimana Cara Kerjanya

context: Halaman pembangun Capgo / produk halaman pembangun native cloud. Peran: Judul bagian atau halaman. Pesan kunci `native_build_how_it_works_title` (Judul Pembangun Native Bagaimana Cara Kerjanya). | Halaman: Bagian masalah/solusi halaman utama. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman premium-support.astro. Pesan kunci `ps_how_it_works` (Ps Bagaimana Cara Kerjanya). | Halaman: Halaman produk update hidup. Peran: Judul bagian atau halaman. Dilihat di: halaman live-update.astro. Pesan kunci `live_update_how_it_works_title` (Judul Update Hidup Bagaimana Cara Kerjanya).

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

1. Inisialisasi: Plugin ini diinisialisasi dengan ID Layanan dan URL Redirect Backend Anda
2. Alur OAuth: Membuka browser/Tab Chrome Kustom dengan halaman OAuth Apple
3. Callback Backend: Apple mengarahkan ke fungsi Edge Supabase Anda dengan otorisasi code
4. Antar Token: Fungsi Edge mengganti code dengan token menggunakan endpoint token Apple
5. Redirect Deep Link: 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 dengan Apple.

Teruskan dari Supabase Login Apple di Android

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