Supabase Login Apple di Android

Prasyarat

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

• ini Pengaturan Umum Sign-In 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 Edge Backend

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

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 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 signing 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 ini publik. Hal ini diperlukan karena redirect OAuth Apple tidak termasuk header autentikasi Supabase. Endpoint ini sendiri yang memvalidasi alur OAuth. verify_jwt = false Tunggu hingga proses deploy selesai

5. Jendela terminal

   supabase functions deploy apple-signin-callback

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

1. Ikuti Panduan Pengaturan Login Apple Android

   Lengkapi Panduan Pengaturan Login Apple Android untuk:

   • 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

   Saat 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 Apple Android. Panduan tersebut menggunakan URL server backend kustom. Untuk integrasi Supabase, Anda harus gunakan URL Fungsi Edge Supabase Anda

   Sesuai Persyaratan yang Tepat

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

3. Kumpulkan semua nilai yang diperlukan

   Setelah menyelesaikan panduan pengaturan Apple, Anda seharusnya memiliki:

   • ID TIM APPLE: ID Tim Pengembang Apple Anda
   • ID KUNJUNGAN APPLE: ID Kunci dari Portal Pengembang Apple
   • KUNJUNGAN PRIVAT APPLE: File kunci pribadi Anda (.p8) yang harus dikodekan base64
   • ANDROID_SERVICE_ID: ID Layanan Apple Anda (misalnya com.example.app.service)
   • BASE_REDIRECT_URL: URL tautan dalam yang Anda gunakan (misalnya capgo-demo-app://path)

   Tautan Tautan dalam

   adalah skema tautan dalam yang telah Anda konfigurasi di BASE_REDIRECT_URL Hal ini adalah tempat backend akan mengarahkan setelah proses autentikasi. AndroidManifest.xmlNilai tautan dalam Anda bergantung pada

   __CAPGO_KEEP_0__. Jika Anda telah mengatur android:scheme="capgo-demo-app" code android:scheme="capgo-demo-app" di dalamnya AndroidManifest.xml, kemudian tautan Anda yang dalam 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 (.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 Placeholder

   Ganti semua nilai placeholder dengan nilai sebenarnya dari Langkah 2.

3. Alternatif: Atur rahasia di Dashboard Supabase

   Jika Anda lebih suka menggunakan dashboard:

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

Konfigurasi Aplikasi Android

Ini Petunjuk Pengaturan Login Apple Android Petunjuk ini sudah mencakup pengaturan 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 digunakan 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 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”

helper authenticateWithAppleSupabase fungsi bantuan, Anda harus 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,
     },
   });

   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: Tes Integrasi

1. Buat dan jalankan aplikasi Android Anda

   npx cap sync android
   npx cap run android

2. Tes aliran autentikasi

   • Sentuh 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 seharusnya:

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

Jika autentikasi gagal:

• URI Redirect tidak sesuai: Periksa URL Kembali di Portal Pengembang Apple apakah sesuai dengan APPLE_REDIRECT_URI Rahasia
• : Pastikan semua rahasia telah diset dengan benar menggunakanTautan dalam mendalam tidak berfungsi AndroidManifest.xml : Periksa apakah BASE_REDIRECT_URL
• filter tujuan sesuai denganRahasia hilang: Periksa semua rahasia telah diset dengan benar menggunakan supabase secrets list
• Tukar Token gagal: Periksa log fungsi tepi di Dashboard Supabase untuk pesan kesalahan rinci
• Aplikasi tidak menerima panggilan balik: Pastikan onNewIntent Auth0
• telah diimplementasikan dengan benar di MainActivity Review 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 redirect backend
2. OAuth Flow: Membuka browser/Tab Chrome Kustom Apple dengan halaman OAuth Apple
3. Backend Callback: Apple mengarahkan ke fungsi Edge Supabase Anda dengan otorisasi code
4. Token Exchange: Fungsi Edge mengganti code dengan token menggunakan endpoint token Apple
5. Deep Link Redirect: Fungsi Edge 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.