Supabase Apple Login pada 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.

Perlu diingat

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

Langkah 1: Deploy Backend Edge Function

Pertama, kami perlu mengdeploy Supabase Edge Function yang akan menghandle callback 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 berikut file 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 penandatangan JWT)

4. Konfigurasi verifikasi JWT

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

   [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"

   Penting

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

5. Tunggu hingga proses pengunduhan selesai

   supabase functions deploy apple-signin-callback

6. Dapatkan URL fungsi Anda

   Setelah proses pengunduhan selesai, Anda akan mendapatkan URL seperti:

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

   Jika Anda tidak dapat menemukannya, Anda dapat melakukan hal berikut:

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

   Simpan alamat URL ini.

   Anda memerlukan alamat URL ini di langkah berikutnya ketika mengonfigurasi Portal Pengembang Apple.

Langkah 2: Mengonfigurasi Portal Pengembang Apple

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

Alamat URL Fungsi

Pastikan Anda memiliki alamat URL Fungsi Edge Supabase dari Langkah 1 sebelum melanjutkan. Anda memerlukan alamat URL tersebut untuk mengonfigurasi Alamat Kembali di Portal Pengembang Apple.

1. Ikuti Panduan Pengaturan Login Apple Android

   Lengkapi __CAPGO_KEEP_0__ Lengkapi Panduan Pengaturan Login Apple Android ke:

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

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

   Perlu diingat: Gunakan URL Fungsi Edge Supabase

   Jangan gunakan URL redirect dari Panduan Pengaturan Android Apple Login. Panduan tersebut menggunakan URL server backend kustom. Untuk integrasi Supabase, Anda harus gunakan URL Fungsi Edge Supabase Anda sendiri.

   Diperlukan Cocokan Tepat

   URL Kembali harus cocok secara tepat dengan apa yang Anda atur di sini. Apple sangat ketat tentang cocokan URI redirect.

3. Kumpulkan semua nilai yang diperlukan

   Setelah menyelesaikan panduan pengaturan Apple, Anda harus memiliki:

   • __CAPGO_KEEP_0__: ID Tim Pengembang Apple Anda
   • : ID Kunci dari Portal Pengembang Apple: File kunci pribadi .p8 Anda (perlu dikodekan base64)
   • : ID Layanan Apple Anda (misalnya,: URL Redirect yang dalam (misalnya,
   • URL Tautan dalam__CAPGO_KEEP_1__ com.example.app.service)
   • __CAPGO_KEEP_2____CAPGO_KEEP_3__ capgo-demo-app://path)

   URL Tautan dalam

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

   Nilai tautan dalam Anda bergantung pada android:scheme="capgo-demo-app" code android:scheme="capgo-demo-app" Jika Anda telah menetapkan AndroidManifest.xmldi capgo-demo-app://path.

maka tautan dalam Anda akan menjadi

Judul bagian “Langkah 3: Atur Rahasia Supabase”

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

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

   base64 -i AuthKey_XXXXX.p8

   Salin seluruh output (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. Arahkan ke dashboard project Supabase Anda
   2. Navigasikan ke Fungsi Edge → Pengaturan → Rahasia
   3. Tambahkan variabel rahasia masing-masing dengan nilai

Konfigurasi Aplikasi Android

The Petunjuk pengaturan login Apple untuk Android sudah mencakup mengonfigurasi aplikasi Android Anda:

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

Pastikan Anda telah menyelesaikan langkah-langkah tersebut sebelum melanjutkan. Skema tautan dalam 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 dalam 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 harus 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. Update 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 Anda yang sebenarnya (nilai yang sama yang Anda gunakan untuk ANDROID_SERVICE_ID di Langkah 3).

Lihat implementasi yang lengkap sebagai referensi.

Langkah 5: Tes Integrasi

1. Bangun dan jalankan aplikasi Android Anda

   npx cap sync android
   npx cap run android

2. Uji alur autentikasi

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

3. Verifikasi alur

   Alur lengkap harus seperti ini:

   1. Pengguna mengetuk tombol “Masuk dengan Apple”
   2. Aplikasi membuka browser dengan OAuth Apple
   3. Pengguna mengautentikasi dengan Apple
   4. Apple mengarahkan ke: 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 token identitas

Pengaturan

URI Redirect tidak sesuai

• : Periksa URL Kembali di Portal Pengembang Apple cocok dengan persis dengan : Periksa URL Kembali di Portal Pengembang Apple cocok dengan persis dengan APPLE_REDIRECT_URI __CAPGO_KEEP_0__
• Tautan dalam tidak berfungsi: Periksa bahwa AndroidManifest.xml filter intent sesuai dengan BASE_REDIRECT_URL
• Kunci rahasia hilang: Pastikan semua kunci rahasia telah diset dengan benar menggunakan supabase secrets list
• Pertukaran token gagal: Periksa log fungsi tepi di Dashboard Supabase untuk pesan kesalahan rinci
• Aplikasi tidak menerima panggilan balik: Pastikan onNewIntent telah diimplementasikan dengan benar di MainActivity
• Ulangi ulasan contoh aplikasi code untuk referensi

Bagaimana Cara Kerjanya

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

1. Inisialisasi: Plugin ini diinisialisasi dengan ID Layanan Anda dan URL panggilan balik 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. Pertukaran Token: The edge function mengganti code dengan token menggunakan endpoint token Apple
5. Deep Link Redirect: The edge function mengarahkan kembali ke aplikasi Anda dengan token identitas
6. Supabase Authentication: Aplikasi menerima token dan masuk ke Supabase

Aliran ini diperlukan karena Apple tidak menyediakan dukungan native Android untuk Sign in dengan Apple.

Teruskan dari Supabase Apple Login on Android

Jika Anda menggunakan Supabase Apple Login on Android untuk merencanakan autentikasi dan aliran akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli di @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.