Supabase Apple Login pada Android

Prasyarat

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

• Supabase Apple Login - Pengaturan Umum 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

Bagian berjudul “Langkah 1: Deploy Fungsi Edge Backend”

Beralih ke direktori proyek Supabase Anda

1. Jendela terminal

   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 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 tanda tangan JWT)

4. Konfigurasi Verifikasi JWT

   Endpoint panggilan 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. Deploy fungsi

   supabase functions deploy apple-signin-callback

6. Dapatkan URL fungsi Anda

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

   Simpan URL ini

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

Langkah 2: Konfigurasi Portal Pengembang Apple

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

1. Ikuti Panduan Pengaturan Login Apple Android

   Selesai dengan Panduan Pengaturan Login Apple Android ke:

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

2. Set the Return URL di Portal Pengembang Apple

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

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

   Perlu diingat: Gunakan URL Fungsi Edge Supabase

   Jangan gunakan URL pengalihan dari Panduan Pengaturan Login Android Apple. Panduan tersebut menggunakan URL server backend khusus. Untuk integrasi Supabase, Anda harus

   Sesuai Persyaratan Pasti-Sesuai

   URL Pengembalian harus sesuai satu persatu Apple sangat ketat tentang matching URI redirect.

3. Kumpulkan semua nilai yang diperlukan

   Setelah menyelesaikan panduan pengaturan Apple, Anda harus memiliki:

   • ID TIM APPLE: ID Tim Pengembang Apple Anda
   • : ID Kunci dari Portal Pengembang Apple: File kunci pribadi .p8 Anda (perlu dikodekan base64)
   • ID JASA ANDROID__CAPGO_KEEP_0__
   • __CAPGO_KEEP_0__: ID Layanan Apple Anda (misalnya, com.example.app.service)
   • BASE_REDIRECT_URL: URL tautan dalam (misalnya, capgo-demo-app://path)

   Tautan Tautan dalam

   Deep Link URL BASE_REDIRECT_URL adalah skema tautan dalam yang dikonfigurasi di AndroidManifest.xml. Ini adalah tempat backend akan mengalihkan setelah autentikasi.

   Nilai tautan dalam Anda bergantung pada android:scheme="capgo-demo-app" code. Jika Anda telah mengatur android:scheme="capgo-demo-app" di AndroidManifest.xml, maka tautan dalam Anda akan menjadi capgo-demo-app://path.

Langkah 3: Atur Rahasia Supabase

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

1. Enkripsi kunci pribadi Anda

   Pertama, enkripsi kunci pribadi Apple Anda (.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. Bergi ke dashboard proyek Supabase Anda
   2. Navigasikan ke Fungsi Pintu Masuk → Pengaturan → Rahasia
   3. Tambahkan setiap variabel rahasia dengan nilai

Konfigurasi Aplikasi Android

The Petunjuk Pengaturan Login Apple Android sudah mencakup pengaturan aplikasi Android Anda: Sudah menambahkan filter intent link dalam yang dalam

• Sudah menambahkan AndroidManifest.xml
• handler ke onNewIntent Pastikan Anda telah menyelesaikan langkah-langkah tersebut sebelum melanjutkan. Scheme link dalam yang Anda atur di sana akan digunakan dalam MainActivity.java

di Langkah 3. BASE_REDIRECT_URL Langkah 4: Gunakan Bantuan Autentikasi

Judul bagian “Langkah 4: Gunakan Bantuan Autentikasi”

Now you can use the authentication helper in your app code.

Implementasi

Implementasi lengkap tersedia di file aplikasi contoh. supabaseAuthUtils.ts Menggunakan Bantuan Autentikasi

Bagian berjudul “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);
}

Bagian berjudul “Perbarui Fungsi Bantuan”

fungsi bantuan, Anda authenticateWithAppleSupabase harus __CAPGO_KEEP_0__ update the following values to match your konfigurasi:

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 Anda yang sebenarnya (nilai yang sama yang Anda gunakan untuk ANDROID_SERVICE_ID di Langkah 3).

Lihat implementasi complete implementation untuk referensi.

Langkah 5: Uji Integrasi

1. Buat dan jalankan aplikasi Android Anda

   npx cap sync android
   npx cap run android

2. Uji alur autentikasi

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

3. Verifikasi aliran

   Aliran lengkap seharusnya:

   1. Pengguna mengetuk “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 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. Aplikasi masuk ke Supabase dengan token identitas

Pengaturan Perbaikan

Jika otentikasi gagal:

• URI Redirect tidak sesuai: Pastikan URL Kembali di Portal Pengembang Apple sesuai dengan APPLE_REDIRECT_URI __CAPGO_KEEP_0__
• Tautan dalam mendalam tidak berfungsi: Periksa bahwa AndroidManifest.xml filter tujuan sesuai dengan BASE_REDIRECT_URL
• Rahasia hilang: Pastikan semua rahasia telah diset dengan benar menggunakan supabase secrets list
• Pertukaran Token gagal: Periksa log fungsi pinggir di Dashboard Supabase untuk pesan kesalahan rinci
• Aplikasi tidak menerima callbackPastikan onNewIntent dibuat dengan benar di MainActivity
• Tinjau contoh aplikasi __CAPGO_KEEP_0__ example app code Bagaimana Cara Kerjanya

Bagian berjudul “Bagaimana Cara Kerjanya”

Pengaturan Awal

1. : Plugin ini diinisialisasi dengan ID Layanan Anda dan URL redirect backendAlur OAuth
2. Alur OAuth FlowTerbuka browser/Tab Chrome khusus dengan halaman OAuth Apple
3. Callback 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. Pindah Link dalam Kedalaman: 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 Apple Login pada Android

Jika Anda menggunakan Supabase Apple Login 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.