Supabase Apple Login pada Android

Persyaratan

Ini panduan untuk mengintegrasikan Sign-In Apple dengan Supabase Authentication pada Android. Kami asumsikan Anda telah menyelesaikan:

• the Pengaturan Umum Login Apple Supabase.

Important

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

Judul Bagian “Langkah 1: Deploy Fungsi Edge Backend”

Pertama, kita perlu mengaktifkan fungsi Edge Supabase yang akan mengelola panggilan balik OAuth Apple.

1. Navigasikan ke direktori proyek Supabase Anda

   cd your-project/supabase

2. Create the edge function (jika tidak ada)

   supabase functions new apple-signin-callback

3. Salin fungsi edge code

   Implementasi fungsi edge lengkap tersedia di aplikasi contoh Aplikasi Contoh.

   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 - Fungsi edge utama __CAPGO_KEEP_0__ jose library untuk tanda tangan JWT)

4. Konfigurasi verifikasi JWT

   Endpoint panggilan balik Apple OAuth harus publik (tidak memerlukan autentikasi) karena Apple akan mengarahkan ke sana. Perbarui file: 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

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

5. Jalankan fungsi

   supabase functions deploy apple-signin-callback

6. Olehkan 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 URL apple-signin-callback URL panggilan balik Apple Sign-In Supabase Functions

   Simpan URL ini

   Anda akan 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 dibutuhkan.

URL Fungsi

Pastikan Anda memiliki URL Fungsi Supabase Edge dari Langkah 1 sebelum melanjutkan. Anda akan membutuhkannya 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. 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 Anda:

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

   Penting: Gunakan URL Fungsi Edge Supabase Anda

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

   Persyaratan Exact Match

   URL Pengembalian harus sesuai benar-benar 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 Kunci dari Portal Pengembang Apple
   • Kunci Privat Apple: File kunci pribadi .p8 Anda (perlu dienkripsi base64)
   • ID Layanan ANDROID: ID Layanan Apple Anda (misal, com.example.app.service)
   • URL Redirect Dasar: URL tautan dalam yang dalam (misal, capgo-demo-app://path)

   Tautan Tautan dalam

   The BASE_REDIRECT_URL apakah skema tautan dalam yang dalam telah dikonfigurasi di AndroidManifest.xmlini adalah tempat backend akan mengarahkan 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.xmlSetelah itu, tautan dalamnya 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 hasilnya (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 Tidur

   Ganti semua nilai tempat tidur 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 Pemotong Pita → Pengaturan → Rahasia
   3. Tambahkan variabel rahasia masing-masing dengan nilai

Konfigurasi Aplikasi Android

Karena Panduan Konfigurasi Login Apple Android Sudah menangani konfigurasi aplikasi Android Anda:

• Mengambahkan filter intent tautan dalam AndroidManifest.xml
• Mengambahkan onNewIntent handler ke MainActivity.java

Pastikan Anda telah menyelesaikan langkah-langkah tersebut sebelum melanjutkan. Scheme tautan dalam yang Anda konfigurasi di sana akan digunakan di 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 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

Menggunakan fungsi bantuan, Anda authenticateWithAppleSupabase Menggunakan fungsi bantuan, Anda Wajib 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

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

Lihat contoh lengkap untuk referensi. Langkah 5: Uji Integrasi

Langkah 5: Uji Integrasi

1. Judul Bagian “Langkah 5: Uji Integrasi”

   npx cap sync android
   npx cap run android

2. Cobalah menguji alur autentikasi

   • Tekan tombol "Masuk dengan Apple"
   • Anda harus melihat halaman OAuth Apple di browser
   • Setelah otentikasi, Anda seharusnya diarahkan kembali ke aplikasi Anda
   • Cek log konsol untuk kesalahan apa pun

3. Verifikasi alur

   Alur lengkap seharusnya:

   1. Pengguna menekan “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

Mengatasi Masalah

Jika Autentikasi Gagal:

• Mismatch Redirect URIVerifikasi URL Pengembalian di Portal Pengembang Apple sesuai dengan APPLE_REDIRECT_URI Rahasia
• Tautan Deep Tidak Berfungsi: Periksa bahwa AndroidManifest.xml Filter Niat sesuai dengan BASE_REDIRECT_URL
• Rahasia Hilang: Verifikasi semua rahasia telah disetel dengan benar menggunakan supabase secrets list
• Gagal Mengubah Token: Periksa log fungsi tepi di Dashboard Supabase untuk pesan kesalahan yang lebih rinci
• App tidak menerima panggilan balik: Pastikan onNewIntent adalah diimplementasikan dengan benar di MainActivity
• Ulasan example app code Bagaimana Cara Kerjanya

Bagaimana Cara Kerjanya

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

1. InitializationPlugin ini diinisialisasi dengan ID Layanan Anda dan URL redirect backend Anda.
2. Aliran OAuth: Membuka browser/Tab Chrome Kustom dengan halaman OAuth Apple
3. Callback 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. Redirect Tautan dalam: Fungsi Edge mengarahkan kembali ke aplikasi Anda dengan token identitas
6. Autentikasi Supabase: Aplikasi menerima token dan masuk ke Supabase

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

Teruskan dari Login Apple Supabase di 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, Menggunakan @capgo/capacitor-social-login untuk detail implementasi di Menggunakan @capgo/capacitor-social-login, Menggunakan @capgo/capacitor-passkey untuk detail implementasi di Menggunakan @capgo/capacitor-passkey, Menggunakan @capgo/capacitor-native-biometric untuk detail implementasi di Menggunakan @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.