Mengatur autentikasi di aplikasi mobile dapat kompleks, tetapi menggabungkan Supabase dengan Capgo Plugin Login Sosial membuatnya lebih mudah. Tutorial ini akan mengajarkan Anda cara mengintegrasikan autentikasi sosial (Google, Apple, Facebook) dengan Supabase di aplikasi Capacitor Anda.
Mengapa Menggunakan Supabase dengan Login Sosial?
Supabase menawarkan backend sebagai layanan yang kuat dengan autentikasi bawaan, sementara plugin @capgo/capacitor-login Sosial menawarkan autentikasi sosial asli di platform iOS, Android, dan web. Untuk integrasi Supabase yang lebih erat, @capgo/capacitor-Supabase menambahkan bantuan autentikasi asli dan akses JWT. Bersama-sama, mereka menyediakan:
- Autentikasi sosial yang halus
- Manajemen token yang aman
- Kemampuan kompatibilitas lintas platform
- Integrasi basis data waktu nyata
- Manajemen pengguna bawaan
Persyaratan
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
Terlebih dahulu, pasang plugin Capgo Login Sosial:
npm install @capgo/capacitor-social-login
npx cap sync
Lihat halaman Login Sosial dan plugin Supabase halaman plugin untuk pengaturan platform tertentu.
Langkah 2: Atur Projek Supabase
Buat dan Konfigurasi Projek Supabase Anda
-
Buat Projek Supabase:
- Pergi ke supabase.com dan daftar/masuk
- Klik “Buat Projek Baru”
- Pilih Organisasi Anda
- Masukkan (misalnya, “Auth MyApp”) Contoh: "MyApp Auth"
- Atur Kata Sandi Database (simpan dengan aman)
- Pilih wilayah Anda Region Pilih yang paling dekat dengan pengguna Anda
- Click Dapatkan kreditan proyek Anda
-
Setelah dibuat, pergi ke:
- Pengaturan > __CAPGO_KEEP_0__ Pengaturan > API
- Salin kode Anda URL Proyek (contoh,
https://your-project-ref.supabase.co) - Salin URL Anda anon publik Kunci API
- Simpanlah ini untuk digunakan di aplikasi Anda nanti.
Konfigurasi Pengaturan Autentikasi
-
Konfigurasi Pengaturan Autentikasi:
- Pergi ke Autentikasi > Pengaturan
- Under Di bawah pengaturan umum:
- Konfigurasi URL Situs ke URL aplikasi Anda (misalnya,
https://yourdomain.comatauhttp://localhost:3000untuk pengembangan) - Tambahkan URL Redirect tambahan Jika diperlukan: jika diperlukan:
http://localhost:3000 https://yourdomain.com capacitor://localhost (for mobile apps)
- Konfigurasi URL Situs ke URL aplikasi Anda (misalnya,
-
(opsional tetapi disarankan): (opsi, tetapi disarankan):
- Under Pengaturan SMTPKonfigurasi penyedia email Anda
- Mengaktifkan konfirmasi email dan pengaturan kata sandi ulang
- Untuk pengembangan, Anda dapat menggunakan layanan email bawaan
Aktifkan Penyedia Autentikasi Sosial
- Akses bagian penyedia:
- Pergi ke Autentikasi > Penyedia di dashboard Supabase Anda
- Anda akan melihat daftar penyedia sosial yang tersedia
- Setiap penyedia memiliki Aktifkan toggle dan opsi pengaturan
Sekarang mari kita konfigurasi setiap penyedia jejaring sosial secara rinci:
Langkah 3: Konfigurasi Penyedia Jejaring Sosial di Supabase
Konfigurasi 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
- Mengonfigurasi layar persetujuan
- Mendapatkan ID dan rahasia klien yang diperlukan
Setelah menyelesaikan pengaturan Google, konfigurasi di Supabase:
- aktifkan penyedia Google di Supabase:
- Pada dashboard Supabase Anda, pergi ke Autentikasi > Penyedia
- Cari Google dan aktifkan ON
- Fill in the configuration:
- ID Klien: ID OAuth Google Anda Web ID Klien Web Anda (dari Google Cloud Console)
- Kunci Klien: Rahasia Google OAuth Web Kunci Klien
- URL Pengalihan Web:
https://your-project-ref.supabase.co/auth/v1/callback(auto-filled)
- Klik “Simpan”
PentingGunakan : Gunakan ID Klien Web dan Kunci Rahasia Klien Web Dalam Supabase, bahkan jika Anda sedang membangun aplikasi mobile. ID klien mobile digunakan secara terpisah dalam pengaturan plugin.
Pengaturan Autentikasi Apple di Supabase
Ambil kunci rahasia Apple:
Ikuti panduan setup Apple yang rinci kami: Pengaturan Autentikasi Apple
Panduan ini mencakup:
- Pengaturan Akun Pengembang Apple
- Membuat ID Aplikasi dan ID Layanan
- Mengonfigurasi Kemampuan Masuk dengan Apple
- Menghasilkan kunci pribadi yang diperlukan
- Pengaturan spesifik platform untuk iOS, Android, dan Web
Setelah menyelesaikan pengaturan Apple, konfigurasi di Supabase:
- Mengaktifkan penyedia Apple di Supabase:
- Pergi ke Autentikasi > Penyedia dan aktifkan Apple ON
- Fill in the configuration:
- ID Klien: ID Identifikasi Layanan Anda (misalnya,
com.yourapp.signin) - Rahasia Klien: Buatlah JWT ini menggunakan kunci pribadi Apple Anda (lihat Supabase Dokumen Apple untuk format JWT)
- URL Redirect:
https://your-project-ref.supabase.co/auth/v1/callback(auto-filled)
- ID Klien: ID Identifikasi Layanan Anda (misalnya,
- Klik “Simpan”
Pertahankan: 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
Dapatkan kunci Facebook:
Ikuti panduan pengaturan Facebook lengkap kami: Pengaturan Autentikasi Facebook
Petunjuk ini membahas tentang:
- Membuat akun pengembang Facebook dan aplikasi
- Menambahkan produk Facebook Login
- Mengonfigurasi URI redirect OAuth
- Mendapatkan ID Aplikasi, Rahasia Aplikasi, dan Token Klien
- Mengonfigurasi platform khusus untuk iOS dan Android
Setelah menyelesaikan pengaturan Facebook, konfigurasi di Supabase:
- Mengaktifkan penyedia Facebook di Supabase:
- Pergi ke Autentikasi > Penyedia dan aktifkan Facebook On
- Fill in the configuration:
- 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”
PentingPastikan Anda menambahkan URL panggil balik Supabase.https://your-project-ref.supabase.co/auth/v1/callback) ke aplikasi Facebook Anda URI Redirect OAuth yang Sah di pengaturan Facebook Login.
Catatan Penting Pengaturan Supabase
Sistem Keamanan Tingkat Baris (RLS):
- Setelah mengatur autentikasi, aktifkan RLS pada tabel Anda
- Buka Database > Tabel dan aktifkan Aktifkan RLS untuk setiap tabel
- Buat kebijakan untuk mengontrol akses data berdasarkan pengguna yang telah diotentikasi
Pengelolaan Pengguna:
- Tampilkan pengguna yang telah masuk di Pengguna > Pengguna
- Monitor kejadian autentikasi di Pengguna > Log
- Set up template email di Pengguna > Template Email
Pengujian Konfigurasi:
- Gunakan alat uji autentikasi bawaan Supabase
- Pergi ke Pengguna > Pengguna dan klik “Undang pengguna” untuk menguji aliran email
- Periksa bagian Log Bagian untuk kesalahan autentikasi
Langkah 4: Konfigurasi Plugin Login Sosial
Sekarang bahwa Supabase telah dikonfigurasi, Anda perlu mengatur plugin Login Sosial dengan kreditensi yang sesuai. ImportantPlugin ini memerlukan kunci OAuth dari provайдer asli (sedangkan Supabase mengelola autentikasi sisi server)
Bagaimana Alur Autentikasi Berfungsi
Sebelum memasuki konfigurasi, pahami alurannya:
- Plugin melakukan autentikasi dengan 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 ID Klien Web Anda ID Klien Web untuk semua platform dan opsional untuk fitur-fitur iOS tertentu: Poin-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'
}
});
Poin penting untuk Google:
- Gunakan ID Klien Web untuk aplikasi (tidak ID klien Android/iOS)
webClientIdUntuk - Plugin ini akan berfungsi pada semua platform dengan hanya menggunakan ID Klien Web.
- The
iOSClientIdopsional dan hanya digunakan untuk fitur Google spesifik iOS
Konfigurasi Plugin Apple
Konfigurasi Apple berbeda antara iOS dan Android:
Untuk iOS (tanda tangan 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 tanda tangan Sign in dengan Apple (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 baik 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:
- Pakai ID Aplikasi yang sama yang Anda konfigurasi di Supabase
- Token Klien ditemukan di Pengaturan Dasar Aplikasi Facebook Anda
limitedLogin: trueMengaktifkan fitur Pendaftaran Terbatas Facebook yang fokus pada privasi (hanya iOS)- Pentinglihat Petunjuk pengaturan Facebook untuk informasi rinci tentang Pendaftaran Terbatas, termasuk pertimbangan ATT
Inisialisasi Plugin Selesai
Berikut cara menginisialisasi semua penyedia bersama-sama:
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()once Hanya konfigurasi penyedia yang Anda rencanakan untuk gunakan - Anda hanya perlu mengonfigurasi penyedia yang Anda rencanakan untuk digunakan
- Kredensial di sini berasal dari provайдer asliLangkah 5: Konfigurasi Klien Supabase
- Pastikan kredensial penyedia sesuai dengan apa yang Anda konfigurasi di Supabase
Buat layanan Supabase:
Instalasi klien Supabase:
npm install @supabase/supabase-js
Buat 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
Buatlah 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: Implementasikan di Aplikasi Anda
Mulai layanan dan tangani 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();
Buatlah 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 Spesifik Platform
Konfigurasi iOS
Untuk instruksi setup iOS yang lebih rinci, lihat panduan spesifik platform kami:
- Pengaturan iOS Google - Konfigurasi URL scheme, Info.plist
- Pengaturan iOS Apple - Pengaturan kemampuan Sign in dengan Apple
- Konfigurasi Facebook iOS (dalam umumnya panduan Facebook) - 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 lengkap, lihat panduan spesifik platform kami:
- Konfigurasi Android Google - Jejak SHA-1, konfigurasi Layanan Google
- Konfigurasi Android Apple - Konfigurasi ID Layanan untuk Android
- Pengaturan Facebook untuk Android (Petunjuk Umum Facebook) - Integrasi Facebook SDK
Pengaturan Android Dasar:
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 petunjuk platform terkait untuk pengaturan Android lengkap termasuk pengaturan Google Play Services dan pengaturan nama paket.
Langkah 9: Menggunakan Database Supabase dengan Pengguna Terotentikasi
Setelah pengguna terautentikasi, 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 Penting
- Jangan pernah mengungkapkan kunci sensitif in your client code
- Gunakan variabel lingkungan untuk pengaturan
- Aktifkan Row Level Security di Supabase
- Validasi token di backend jika diperlukan
- Handle ulang token otomatis dengan Supabase
Masalah Umum yang Dapat Diperbaiki
Kesalahan Token Tidak Sesuai
- Pastikan konfigurasi penyedia OAuth Anda sesuai antara plugin login sosial dan Supabase
- Periksa bahwa URL pengalihan telah dikonfigurasi dengan benar
Masalah yang Spesifik untuk 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 kesalahan yang tepat untuk masalah jaringan
- Tambahkan status pengalihan selama autentikasi
Kesimpulan
Anda telah memiliki sistem autentikasi yang lengkap yang menggabungkan backend yang kuat dari Supabase dengan kemampuan login sosial asli.
- Autentikasi sosial yang aman dan asli
- Manajemen token yang halus
- Pengintegrasian basis data waktu nyata
- Kompatibilitas lintas platform
Kombinasi Supabase dan plugin Autentikasi Sosial Capgo menawarkan solusi autentikasi yang kuat dan skalabel untuk aplikasi Capacitor Anda.
Untuk fitur-fitur yang lebih canggih seperti Autentikasi multi-faktor atau klaim khususklaim kustom , lihat dokumentasi Supabase dan Documentasi plugin Login Sosial.
Teruskan dari Pengaturan Autentikasi Supabase dengan Capacitor Plugin Login Sosial
Jika Anda menggunakan Pengaturan Autentikasi Supabase dengan Capacitor Plugin Login Sosial 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-native untuk detail implementasi di @capgo/capacitor-biometrik-native, Pengaturan Autentikasi Dua Faktor untuk detail implementasi di Dua-Faktor Autentikasi, dan SSO (Enterprise) untuk detail implementasi di SSO (Enterprise).