Login Apple Supabase di Android

Persyaratan

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

• the Pengaturan Umum untuk Login Apple Supabase.

Important

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

Langkah 1: Deploy Fungsi Edge Backend

Pertama-tama, 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. Create the edge function (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 modul untuk dependensi (termasuk) jose library untuk penandatanganan JWT)

4. Konfigurasi Verifikasi JWT

   Endpoint Apple OAuth harus 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"

   Important

   Setting verify_jwt = false Membuat endpoint ini publik. Ini diperlukan karena Apple's OAuth redirect tidak termasuk header autentikasi Supabase. Endpoint ini memvalidasi aliran OAuth sendiri.

5. Tingkatkan Fungsi

   supabase functions deploy apple-signin-callback

6. Dapatkan URL fungsi Anda

   Setelah penginstalan, Anda akan mendapatkan URL seperti:

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

   Setelah pengunduhan, Anda akan mendapatkan URL seperti:

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

   Simpan URL ini

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

Langkah 2: Mengonfigurasi 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 Supabase Edge dari Langkah 1 sebelum melanjutkan. Anda memerlukan itu untuk mengonfigurasi URL Pengembalian di Portal Pengembang Apple.

1. Ikuti Panduan Pengaturan Login Apple Android

   Selesaikan Panduan Pengaturan Login Apple Android ke:

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

2. Setel URL Pengembalian di Portal Pengembang Apple

   Saat 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

   TIDAK gunakan URL pengalihan dari Petunjuk Pengaturan Login Apple AndroidPetunjuk ini menggunakan URL server backend kustom. Untuk integrasi Supabase, Anda harus menggunakan URL Fungsi Edge Supabase bukan.

   Perlu Cocokan Tepat

   URL Kembali harus cocok exactly seperti yang Anda konfigurasi di sini. Apple sangat ketat tentang match URI redirect.

3. Kumpulkan semua nilai yang diperlukan

   Setelah menyelesaikan panduan pengaturan Apple, Anda harus memiliki:

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

   URL Redirect Dasar

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

   Nilai tautan dalam adalah bergantung pada android:scheme="capgo-demo-app" code. Jika Anda telah mengatur android:scheme="capgo-demo-app" dalam 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, encode kunci pribadi Apple Anda (.p8 file) ke base64:

   base64 -i AuthKey_XXXXX.p8

   Salin seluruh hasil (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 Tempat Pemuatan

   Ganti semua nilai tempat pemuatan dengan nilai sebenarnya Anda 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 Pembaruan Pita → Pengaturan → Rahasia
   3. Tambahkan variabel rahasia dengan nilai masing-masing

Konfigurasi Aplikasi Android

Karena Panduan Konfigurasi Login Apple Android itu sudah mencakup mengonfigurasi 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 link deep 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.

Implementation

The complete implementation is available in the 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 fungsi bantuan, Anda authenticateWithAppleSupabase Fungsi bantuan, Anda must Perbarui nilai-nilai berikut untuk sesuai dengan konfigurasi Anda:

1. Update 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 Setel 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,
     },
   });

   Important

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

Lihat contoh Implementasi Lengkap untuk referensi.

Langkah 5: Tes Integrasi

1. Bangun dan jalankan aplikasi Android Anda

   npx cap sync android
   npx cap run android

2. Uji alur autentikasi

   • Tetikkan 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 alur

   Alur lengkap harus seperti ini:

   1. Pengguna mengetuk “Masuk dengan Apple”
   2. Aplikasi membuka browser dengan OAuth Apple
   3. Pengguna autentikasi 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

Pembelajaran

Bagian berjudul “Pembelajaran”

• Jika autentikasi gagal:Verifikasi URL Pengembalian di Portal Pengembang Apple sesuai dengan APPLE_REDIRECT_URI secret
• Tautan dalam tidak berfungsiTautan dalam tidak berfungsi AndroidManifest.xml intent filter sesuai dengan Anda BASE_REDIRECT_URL
• Kunci rahasia hilangVerifikasi semua rahasia telah diset dengan benar menggunakan supabase secrets list
• Token exchange gagal: Periksa log fungsi tepi di Supabase Dashboard untuk pesan kesalahan rinci
• Aplikasi tidak menerima callback: Pastikan onNewIntent telah diterapkan dengan benar di MainActivity
• Periksa example app code Bagaimana Cara Kerjanya

Cara Kerjanya

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

1. Initialization: Plugin ini diinisialisasi dengan ID Layanan Anda dan URL Redirect Backend Anda
2. Aliran 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: Fungsi Edge mengganti code dengan token menggunakan endpoint token Apple
5. Pengalihan 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

Teruskan dari Autentikasi Apple Supabase di Android

Jika Anda menggunakan Autentikasi Apple Supabase di 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-login Sosial 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.