Pengaturan autentikasi di aplikasi mobile dapat kompleks, tetapi kombinasi Supabase dengan Capgo Plugin Login Sosial Membuatnya menjadi lebih mudah. Tutorial ini akan mengantumkan Anda melalui integrasi autentikasi sosial (Google, Apple, Facebook) dengan Supabase di aplikasi Capacitor Anda.
Mengapa Menggunakan Supabase dengan Login Sosial?
Supabase Menghadirkan backend-as-a-service yang kuat dengan autentikasi bawaan, sementara plugin @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login menawarkan autentikasi sosial asli di platform iOS, Android, dan web. Untuk integrasi Supabase yang lebih erat, @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabase menambahkan bantuan autentikasi asli dan akses JWT. Bersama-sama, mereka menyediakan: @capgo/capacitor-social-login Pengelolaan token yang aman @capgo/capacitor-supabase Pengintegrasian basis data secara real-time
- __CAPGO_KEEP_0__
- __CAPGO_KEEP_1__
- __CAPGO_KEEP_0__
- __CAPGO_KEEP_1__
- Manajemen pengguna bawaan
Prasyarat
Sebelum memulai, pastikan Anda memiliki:
- Proyek Capacitor yang telah terinstal
- Akun dan proyek Supabase
- Akun pengembang untuk penyedia jejaring sosial yang dipilih (Google, Apple, Facebook)
Langkah 1: Pasang dan Konfigurasi Plugin Login Sosial
Pertama, pasang plugin Capgo Login Sosial:
npm install @capgo/capacitor-social-login
npx cap sync
Lihat di Login Sosial dan Supabase halaman plugin untuk pengaturan spesifik platform.
Langkah 2: Setup Proyek Supabase
Buat dan Konfigurasi Proyek Supabase Anda
-
Buat Proyek Supabase:
- Pergi ke supabase.com dan daftar/masuk
- Klik “Buat Proyek Baru”
- Pilih Organisasi Anda
- Masukkan Nama Proyek Setup Supabase dengan Capacitor dan Login Sosial Contoh: "Auth MyApp"
- Set sebuah Kata Sandi Database (simpan dengan aman)
- Pilih wilayah Anda (pilih yang paling dekat dengan pengguna Anda) Klik
- "Buat project baru" Pilih kredit project Anda
-
Setelah dibuat, pergi ke:
- Pengaturan > __CAPGO_KEEP_0__ Settings > API
- Salin URL Projek Anda URL Projek Anda (misalnya,
https://your-project-ref.supabase.co) - Salin kunci anonim Anda __CAPGO_KEEP_0__ API key
- Konfigurasi Pengaturan Autentikasi
Konfigurasi Pengaturan Autentikasi Umum
-
Pergi ke:
- Autentikasi > Pengaturan Di bawah
- Pilih Pengaturan Umum:
- Simpan URL Situs ke URL aplikasi Anda (misalnya,
https://yourdomain.comatauhttp://localhost:3000Bagaimana cara mengintegrasikan Supabase dengan Capacitor untuk login sosial? - ke pengembangan) Tambahkan URL Redirect tambahan jika diperlukan: Pengaturan Email
http://localhost:3000 https://yourdomain.com capacitor://localhost (for mobile apps)
- Simpan URL Situs ke URL aplikasi Anda (misalnya,
-
(opsional tetapi disarankan): Di bawah
- Appflow atau Pengaturan SMTPKonfigurasi penyedia email Anda
- Mengaktifkan konfirmasi email dan pengaturan ulang kata sandi
- Untuk pengembangan, Anda dapat menggunakan layanan email bawaan
Mengaktifkan Penyedia Autentikasi Sosial
- Akses bagian penyedia:
- Pergi ke Autentikasi > Penyedia di dashboard Supabase Anda
- Anda akan melihat daftar penyedia sosial yang tersedia
- Masing-masing penyedia memiliki tombol Mengaktifkan Opsi toggle dan pengaturan
Sekarang mari kita konfigurasi setiap penyedia jejaring sosial secara rinci:
Langkah 3: Konfigurasi Penyedia Jejaring Sosial di Supabase
Mengatur Autentikasi Google di Supabase
Pertama, dapatkan kunci autentikasi OAuth Google Anda:
Ikuti panduan pengaturan Google yang komprehensif: Pengaturan Autentikasi Google
Panduan ini mencakup:
- Membuat Projek Google Cloud
- Mengatur kunci OAuth 2.0 untuk web, iOS, dan Android
- Mengatur layar persetujuan
- Mendapatkan ID dan rahasia klien yang diperlukan
Setelah menyelesaikan pengaturan Google, konfigurasi di Supabase:
- Mengaktifkan penyedia Google di Supabase:
- Pada dashboard Supabase Anda, pergi ke Autentikasi > Penyedia
- Cari Google dan aktifkan ON
- Isi konfigurasi:
- ID Klien: OAuth Google Anda Web ID Klien (dari Konsole Google Cloud)
- Rahasia Klien: OAuth Google Anda Web Rahasia Klien
- URL Redirect:
https://your-project-ref.supabase.co/auth/v1/callback(diisi otomatis)
- Klik “Simpan”
Penting: Gunakan ID Klien Web ID Klien Web dan Rahasia Klien Web di Supabase, bahkan jika Anda sedang membangun aplikasi mobile. ID klien mobile digunakan secara terpisah dalam pengaturan plugin.
Pengaturan Autentikasi Apple di Supabase
Ambil Kredensial Apple:
Ikuti panduan setup Apple yang rinci kami: Pengaturan Autentikasi Apple
Berikut ini yang akan dibahas:
- Pengaturan Akun Pengembang Apple
- Membuat ID Aplikasi dan ID Layanan
- Mengonfigurasi Kemampuan Masuk dengan Apple
- Menghasilkan Kunci Pribadi yang Diperlukan
- Konfigurasi platform khusus untuk iOS, Android, dan Web
Setelah menyelesaikan pengaturan Apple, konfigurasikan di Supabase:
- Mengaktifkan penyedia Apple di Supabase:
- Pergi ke Autentikasi > Penyedia dan aktifkan Apple ON
- Isi konfigurasi:
- ID Klien: Identifikasi ID Layanan Anda (misalnya,
com.yourapp.signin) - Rahasia KlienMenghasilkan JWT ini menggunakan kunci pribadi Apple Anda (lihat Dokumen Apple Supabase untuk format JWT)
- URL Redirect:
https://your-project-ref.supabase.co/auth/v1/callback(diisi secara otomatis)
- ID Klien: Identifikasi ID Layanan Anda (misalnya,
- Klik “Simpan”
Perhatian: Pengaturan autentikasi Apple paling kompleks karena persyaratan Apple untuk ID Layanan, kunci pribadi, dan penghasilan JWT. Ikuti dokumentasi kami dengan teliti untuk setiap platform.
Pengaturan Autentikasi Facebook di Supabase
Ambil kunci akses Facebook:
Ikuti panduan pengaturan Facebook lengkap kami: Konfigurasi Autentikasi Facebook
Panduan ini mencakup:
- Membuat akun pengembang Facebook dan aplikasi
- Menambahkan produk Autentikasi Facebook
- Mengonfigurasi URI redirect OAuth
- Mendapatkan ID Aplikasi, Rahasia Aplikasi, dan Token Klien
- Konfigurasi khusus platform untuk iOS dan Android
Setelah menyelesaikan pengaturan Facebook, konfigurasinya di Supabase:
- Mengaktifkan penyedia Facebook di Supabase:
- Pergi ke Autentikasi > Penyedia dan aktifkan Facebook ON
- Isi konfigurasi:
- ID Klien: ID Aplikasi Facebook Anda
- Rahasia Klien: Rahasia Aplikasi Facebook Anda
- URL Redirect:
https://your-project-ref.supabase.co/auth/v1/callback(diisi otomatis)
- Klik “Simpan”
Penting: Pastikan Anda menambahkan URL panggil balik Supabase (https://your-project-ref.supabase.co/auth/v1/callback) ke pengaturan Facebook Login Anda di Facebook App. Valid OAuth Redirect URIs Penting Catatan Konfigurasi Supabase
Level Keamanan Baris (RLS):
Setelah mengatur autentikasi, aktifkan RLS pada tabel Anda
- Pergi ke
- Database > Tabel dan aktifkan Level Keamanan Baris untuk setiap tabel Enable RLS
- Pembuat kebijakan untuk mengontrol akses data berdasarkan pengguna yang telah masuk
Pengelolaan Pengguna:
- Lihat pengguna yang telah masuk di Autentikasi > Pengguna
- Pantau kejadian autentikasi di Autentikasi > Log
- Atur template email di Autentikasi > Template Email
Tes Konfigurasi:
- Pakai alat tes autentikasi bawaan Supabase
- Pergi ke Autentikasi > Pengguna dan klik “Undang pengguna” untuk menguji aliran email
- Periksa bagian Log context
Page/area: Capgo Builder / produk halaman cloud native. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman native-build.astro. Pesan kunci `native_build_v2_trust_logs_lbl` (Native Build V2 Trust Logs Lbl).
bagian untuk kesalahan autentikasi Langkah 4: Konfigurasi Plugin Login SosialSekarang bahwa Supabase telah dikonfigurasi, Anda perlu mengatur plugin Login Sosial dengan kredit yang sesuai. Penting context
How Cara Kerja Autentikasi Berfungsi
Sebelum memasuki konfigurasi, pahami aliran:
- Plugin melakukan autentikasi terhadap penyedia sosial (Google/Apple/Facebook) secara native
- Plugin menerima token (token akses, token ID) dari penyedia
- Aplikasi Anda mengirimkan token ini ke Supabase menggunakan
signInWithIdToken() - Supabase memvalidasi token dengan penyedia dan membuat sesi pengguna
- Supabase mengembalikan token JWT miliknya untuk permintaan autentikasi aplikasi Anda
Konfigurasi Plugin Google
Plugin ini memerlukan informasi Anda ID Klien Web untuk semua platform dan secara opsional ID Klien iOS untuk fitur iOS tertentu: Poin penting untuk Google:
import { SocialLogin } from '@capgo/capacitor-social-login';
await SocialLogin.initialize({
google: {
// Use the same Web Client ID you configured in Supabase
webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
// Optional: iOS Client ID for iOS-specific features
iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
// Optional: Request offline access for refresh tokens
mode: 'offline'
}
});
Pilih ID Klien Web
- (bukan ID Klien Android/iOS) untuk field Pilih ID Klien Web untuk memastikan plugin ini berfungsi di semua platform
webClientIdPilih ID Klien Web (bukan ID Klien Android/iOS) untuk field - Pilih ID Klien Web untuk memastikan plugin ini berfungsi di semua platform
- The
iOSClientIdtidak wajib dan hanya digunakan untuk fitur Google spesifik iOS
Konfigurasi Plugin Apple
Konfigurasi Apple berbeda antara iOS dan Android:
Untuk iOS (Sign-in Apple native):
await SocialLogin.initialize({
apple: {
// No additional configuration needed for iOS
// The plugin uses the native Apple Sign-In capability
}
});
Untuk Android/Web (memerlukan ID Layanan):
await SocialLogin.initialize({
apple: {
clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
}
});
Poin penting untuk Apple:
- iOS menggunakan Sign in dengan Apple native (tidak perlu konfigurasi tambahan)
- Android/Web memerlukan ID Layanan yang Anda buat di Portal Pengembang Apple
- The
redirectUrlharus sesuai dengan apa yang Anda konfigurasi di portal pengembang Apple dan Supabase
Konfigurasi Plugin Facebook
Facebook memerlukan ID Aplikasi dan Token Klien Anda:
await SocialLogin.initialize({
facebook: {
appId: 'YOUR_FACEBOOK_APP_ID', // From Facebook Developer Dashboard
clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
// Optional: Use Facebook Limited Login (for enhanced privacy)
limitedLogin: false // See our Facebook setup guide for important Limited Login details
}
});
Poin penting untuk Facebook:
- Gunakan ID Aplikasi yang sama yang Anda konfigurasi di Supabase
- Token Klien ditemukan di Pengaturan Dasar Aplikasi Facebook Anda
limitedLogin: truemengaktifkan fitur Login Terbatas Facebook yang fokus pada privasi (hanya iOS)- Penting: Lihat panduan pengaturan Facebook kami untuk informasi rinci tentang Login Terbatas, termasuk pertimbangan ATT Kompletasi Inisialisasi Plugin
See our
Berikut cara menginisialisasi semua penyedia secara bersamaan:
import { SocialLogin } from '@capgo/capacitor-social-login';
export async function initializeSocialLogin() {
await SocialLogin.initialize({
google: {
webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
mode: 'offline'
},
facebook: {
appId: 'YOUR_FACEBOOK_APP_ID',
clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
},
apple: {
// iOS: no config needed
// Android/Web: uncomment the lines below
// clientId: 'YOUR_SERVICE_ID',
// redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
}
});
}
Catatan Penting:
- Panggil
initialize()context: Appflow Migration Step2 sekali - ketika aplikasi Anda dimulai, bukan sebelum setiap login
- Hanya perlu mengonfigurasi penyedia yang Anda rencanakan untuk gunakan Kredensial di sini berasal dari penyedia aslicontext: Appflow Migration Step2
- , bukan dari Supabase
Pastikan kredensial penyedia sesuai dengan apa yang Anda konfigurasi di Supabase
Langkah 5: Setup Supabase Client: Instal klien Supabase:
npm install @supabase/supabase-js
Membuat layanan Supabase:
// services/supabase.ts
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';
export const supabase = createClient(supabaseUrl, supabaseKey, {
auth: {
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: false,
},
});
Langkah 6: Implementasi Alur Autentikasi
Membuat layanan autentikasi yang menggabungkan kedua hal tersebut:
// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';
export class AuthService {
async initializeSocialLogin() {
await SocialLogin.initialize({
google: {
webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
},
facebook: {
appId: 'YOUR_FACEBOOK_APP_ID',
clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
},
apple: {} // iOS configuration
});
}
async signInWithGoogle() {
try {
const result = await SocialLogin.login({
provider: 'google',
options: {
scopes: ['email', 'profile']
}
});
const googleResult = result.result;
if (!googleResult) {
throw new Error('Google login failed');
}
// GoogleLoginResponse is a union type - check responseType to determine flow
if (googleResult.responseType === 'online') {
// Online mode: use idToken directly with Supabase
const { data, error } = await supabase.auth.signInWithIdToken({
provider: 'google',
token: googleResult.idToken!,
});
if (error) throw error;
return data;
} else {
// Offline mode: exchange serverAuthCode on your backend
// Your backend should exchange the code for tokens and create a Supabase session
const response = await fetch('/api/auth/google', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
});
return response.json();
}
} catch (error) {
console.error('Google sign-in error:', error);
throw error;
}
}
async signInWithApple() {
try {
const result = await SocialLogin.login({
provider: 'apple',
options: {
scopes: ['email', 'name']
}
});
const { data, error } = await supabase.auth.signInWithIdToken({
provider: 'apple',
token: result.result?.identityToken!,
});
if (error) throw error;
return data;
} catch (error) {
console.error('Apple sign-in error:', error);
throw error;
}
}
async signInWithFacebook() {
try {
const result = await SocialLogin.login({
provider: 'facebook',
options: {
permissions: ['email', 'public_profile']
}
});
const fbResult = result.result;
if (!fbResult?.accessToken?.token) {
throw new Error('Facebook login failed - no access token received');
}
// Facebook uses accessToken for Supabase authentication
const { data, error } = await supabase.auth.signInWithIdToken({
provider: 'facebook',
token: fbResult.accessToken.token,
});
if (error) throw error;
return data;
} catch (error) {
console.error('Facebook sign-in error:', error);
throw error;
}
}
async signOut() {
// Sign out from Supabase
await supabase.auth.signOut();
// Optionally sign out from social providers
await SocialLogin.logout({
provider: 'google' // or 'apple', 'facebook'
});
}
getCurrentUser() {
return supabase.auth.getUser();
}
onAuthStateChange(callback: (event: string, session: any) => void) {
return supabase.auth.onAuthStateChange(callback);
}
}
export const authService = new AuthService();
Langkah 7: Implementasi di Aplikasi Anda
Menginisialisasi layanan dan mengelola autentikasi:
// main.ts or app component
import { authService } from './services/auth';
async function initializeApp() {
await authService.initializeSocialLogin();
// Listen to auth state changes
authService.onAuthStateChange((event, session) => {
if (event === 'SIGNED_IN') {
console.log('User signed in:', session.user);
// Redirect to authenticated area
} else if (event === 'SIGNED_OUT') {
console.log('User signed out');
// Redirect to login
}
});
}
initializeApp();
Membuat tombol login di UI Anda:
// Login component
async function handleGoogleLogin() {
try {
const user = await authService.signInWithGoogle();
console.log('Signed in with Google:', user);
} catch (error) {
console.error('Login failed:', error);
}
}
async function handleAppleLogin() {
try {
const user = await authService.signInWithApple();
console.log('Signed in with Apple:', user);
} catch (error) {
console.error('Login failed:', error);
}
}
async function handleFacebookLogin() {
try {
const user = await authService.signInWithFacebook();
console.log('Signed in with Facebook:', user);
} catch (error) {
console.error('Login failed:', error);
}
}
async function handleLogout() {
try {
await authService.signOut();
console.log('Signed out successfully');
} catch (error) {
console.error('Logout failed:', error);
}
}
Langkah 8: Konfigurasi Platform-Spesifik
Konfigurasi iOS
Untuk instruksi setup iOS yang lebih rinci, lihat panduan platform khusus kami:
- Pengaturan iOS Google - Schemes URL, konfigurasi Info.plist
- Pengaturan iOS Apple - Konfigurasi kemampuan masuk dengan Apple
- Konfigurasi Facebook iOS (panduan Facebook umum) - Konfigurasi Facebook SDK
Ringkasan singkat - Tambahkan ke ios/App/App/Info.plist:
<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>YOUR_REVERSED_CLIENT_ID</string>
</array>
</dict>
</array>
<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
<string>Default</string>
</array>
Ikuti panduan yang terkait untuk instruksi pengaturan iOS lengkap, termasuk konfigurasi proyek Xcode.
Konfigurasi Android
Untuk instruksi pengaturan Android yang lebih rinci, lihat panduan spesifik platform kami:
- Konfigurasi Android Google - Jejak fingerprint SHA-1, konfigurasi layanan Google Play
- Konfigurasi Android Apple - Konfigurasi ID Layanan untuk Android
- Penyiapan Facebook untuk Android (panduan Facebook secara umum) - Integrasi Facebook SDK
Penyiapan Android yang Diperlukan:
1. Dapatkan Tanda Tangan SHA-1 Anda (diperlukan untuk Google):
# For debug builds (development)
cd android
./gradlew signingReport
# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client
2. Konfigurasi AndroidManifest.xml - Tambahkan ke android/app/src/main/AndroidManifest.xml:
<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- Facebook configuration -->
<meta-data
android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id"/>
<meta-data
android:name="com.facebook.sdk.ClientToken"
android:value="@string/facebook_client_token"/>
3. Tambahkan Sumber Daya Facebook ke android/app/src/main/res/values/strings.xml:
<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>
Ikuti panduan platform terkait untuk konfigurasi Android lengkap termasuk pengaturan Google Play Services dan pengaturan nama paket.
Langkah 9: Menggunakan Basis Data Supabase dengan Pengguna Terotentik
Setelah pengguna terotentik, Anda dapat menggunakan basis data Supabase dengan Row Level Security (RLS):
// Example: Fetch user profile
async function getUserProfile() {
const { data: user } = await supabase.auth.getUser();
if (user) {
const { data, error } = await supabase
.from('profiles')
.select('*')
.eq('id', user.user.id)
.single();
return data;
}
}
// Example: Update user profile
async function updateUserProfile(updates: any) {
const { data: user } = await supabase.auth.getUser();
if (user) {
const { data, error } = await supabase
.from('profiles')
.update(updates)
.eq('id', user.user.id);
return data;
}
}
Pertimbangan Keamanan yang Perlu Diperhatikan
- Jangan pernah mengekspos kunci sensitif di klien code
- Gunakan variabel lingkungan untuk pengaturan
- Aktifkan Row Level Security di Supabase
- Validasi token di backend jika diperlukan
- Tangani pengulangan token otomatis dengan Supabase
Troubleshooting Masalah Umum
Error Kesalahan Token
- Pastikan konfigurasi penyedia OAuth Anda sesuai antara plugin login sosial dan Supabase
- Periksa bahwa URL redirect yang benar telah dikonfigurasi
Masalah Spesifik Platform
- iOS: Pastikan ID paket Anda sesuai dengan konfigurasi pengembang Apple Anda
- Android: Pastikan sidik jari SHA1 Anda telah ditambahkan ke Google Console dengan benar
Interrupsi Alur Autentikasi
- Implementasikan penanganan error yang tepat untuk masalah jaringan
- Tambahkan status loading selama autentikasi
Kesimpulan
Anda telah memiliki sistem autentikasi lengkap yang menggabungkan backend yang kuat dari Supabase dengan kemampuan login sosial asli.
- Autentikasi sosial yang aman dan asli
- Pengelolaan token yang halus
- Integrasi database waktu nyata
- Kemampuan kompatibilitas lintas platform
Kombinasi Supabase dan plugin login sosial Capgo menawarkan solusi autentikasi yang kuat dan skalabel untuk aplikasi Capacitor Anda.
Untuk fitur-fitur yang lebih maju seperti autentikasi multi-faktor atau periksa dokumentasi Supabaseklaim kustom periksa dokumentasi Supabase dan Referensi Dokumentasi Plugin Login Sosial.
Teruskan dari Pengaturan Supabase dengan Plugin Login Sosial Capacitor
Jika Anda menggunakan Pengaturan Supabase dengan Plugin Login Sosial Capacitor untuk merencanakan autentikasi dan alur akun, hubungkannya dengan @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-asli untuk detail implementasi di @capgo/capacitor-biometrik-asli, Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor, dan SSO (Enterprise) untuk detail implementasi di SSO (Enterprise).