Supabase Apple Login pada Android

Prasyarat

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

• the Pengaturan Umum Supabase Apple Login.

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 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 tidak ada)

   supabase functions new apple-signin-callback

3. Salin fungsi edge code

   Implementasi lengkap fungsi edge 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 menandatangani JWT)

4. Konfigurasi verifikasi JWT

   Apple harus membuat endpoint callback OAuth-nya publik (tidak memerlukan autentikasi) karena Apple akan mengarahkan ke sana. Perbarui dengan 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 Apple tidak menyertakan header autentikasi Supabase dalam redirect OAuth-nya. Endpoint ini sendiri yang memvalidasi alur OAuth.

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

1. Ikuti Panduan Pengaturan Login Apple Android

   Lengkapi langkah Panduan Pengaturan Login Apple Android untuk:

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

2. Atur URL Kembali di Portal Pengembang Apple

   When mengatur 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

   Penting: Gunakan URL Fungsi Edge Supabase Anda

   TIDAK gunakan URL pengalihan dari Petunjuk Pengaturan Login Android Apple. Panduan itu menggunakan URL server backend kustom. Untuk integrasi Supabase, Anda harus gunakan URL Fungsi Edge Supabase Anda.

   Pemetaan Tepat Diperlukan

   URL Pengembalian harus sesuai apa yang Anda konfigurasi di sini. Apple sangat ketat tentang match URI redirect. Kumpulkan semua nilai yang diperlukan

3. Setelah menyelesaikan panduan pengaturan Apple, Anda harus memiliki:

   ID TIM APPLE

   • : ID Tim Pengembang Apple AndaID KUNJUNGAN APPLE
   • : ID Kunjungan dari Portal Pengembang AppleKUNJUNGAN APPLE Pribadi
   • : File kunci pribadi .p8 Anda (perlu dikodekan base64)ID JASA ANDROID
   • : ID Jasa Apple Anda (misal,__CAPGO_KEEP_0__ com.example.app.service)
   • BASE_REDIRECT_URL: URL URL Anda (misalnya, capgo-demo-app://path)

   URL Deep Link

   Adalah BASE_REDIRECT_URL adalah skema URL deep link yang dikonfigurasi di AndroidManifest.xml. Ini adalah tempat backend akan mengalihkan setelah autentikasi.

   Nilai URL deep link Anda bergantung pada android:scheme="capgo-demo-app" code. Jika Anda telah mengatur android:scheme="capgo-demo-app" di AndroidManifest.xml, maka URL deep link Anda 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 placeholder dengan nilai nyata 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 Pemangku → Pengaturan → Rahasia
   3. Tambahkan variabel rahasia masing-masing dengan nilai

Konfigurasi Aplikasi Android

The Petunjuk Pengaturan Login Apple Android sudah mencakup pengaturan aplikasi Android Anda:

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

Pastikan Anda telah menyelesaikan langkah-langkah tersebut sebelum melanjutkan. Scheme deep link 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 di file aplikasi contoh. supabaseAuthUtils.ts Menggunakan Bantuan Autentikasi

Bab 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);
}

Bab berjudul “Perbarui Fungsi Bantuan”

wajib authenticateWithAppleSupabase mengupdate nilai-nilai berikut untuk sesuai dengan konfigurasi Anda: example app’s file.

1. Perbarui redirectUrl - Atur 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 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 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

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

   Aliran lengkap harus seperti ini:

   1. Pengguna menekan tombol “Masuk dengan Apple”
   2. Aplikasi membuka browser dengan Apple OAuth
   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 Perbaikan

If otentikasi gagal:

• URI Redirect tidak sesuai: Pastikan URL Pengembalian di Portal Pengembang Apple sesuai dengan APPLE_REDIRECT_URI rahasia
• 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 tepi di Dashboard Supabase untuk pesan kesalahan rinci
• Aplikasi tidak menerima panggilan kembali: Pastikan onNewIntent diimplementasikan dengan benar di MainActivity
• Review aplikasi contoh __CAPGO_KEEP_0__ example app code Bagaimana Cara Kerjanya

Bab berjudul “Bagaimana Cara Kerjanya”

Penyiapan

1. : Plugin ini diinisialisasi dengan ID Layanan Anda dan URL redirect backendAliran OAuth
2. : Membuka browser/Tab Chrome Kustom dengan halaman OAuth AppleAliran OAuth ini digunakan untuk mengautentikasi pengguna
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 dengan Apple.

Teruskan dari Supabase Apple Login on Android

Panggilan Balik Backend Supabase Apple Login on Android untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-sosial untuk kemampuan native di Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial untuk detail implementasi di @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-biometrik-native untuk detail implementasi di @capgo/capacitor-biometrik-native, dan Dua faktor autentikasi untuk detail implementasi di Dua faktor autentikasi.