Pengaturan Login Facebook
Salin prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.
Pendahuluan
Bab berjudul “Pendahuluan”Dalam panduan ini, Anda akan belajar cara mengatur Facebook Login dengan Capgo Social Login. Anda memerlukan hal-hal berikut:
- Akun Pengembang Facebook
- Nama Paket/ID Bundle Aplikasi Anda
- Akses ke terminal untuk menghasilkan hash kunci (Android)
Pengaturan Umum
Judul bagian “Pengaturan Umum”Jika Anda belum memiliki aplikasi Facebook yang dibuat, ikuti langkah-langkah ini:
-
Buat Aplikasi Facebook
Ikuti tutorial untuk Buat Aplikasi
-
Tambahkan Login Facebook ke aplikasi Anda
Di Dashboard Pengembang Facebook Anda, tambahkan produk Login Facebook ke aplikasi Anda
-
Sebelum Anda dapat merilis aplikasi ke publik, ikuti ini tutorial untuk mempublikasikannya
Informasi Penting
Judul Bagian “Informasi Penting”Berikut adalah tempat untuk menemukan informasi kunci yang Anda butuhkan untuk integrasi:
-
CLIENT_TOKEN:
-
APP_ID:
-
APP_NAME:
Login Bisnis Facebook
Judul Bagian “Login Bisnis Facebook”Plugin ini mendukung Login Bisnis Facebook untuk fitur dan izin bisnis. Akun bisnis dapat meminta izin tambahan di luar login konsumen standar, termasuk pengelolaan Instagram dan Halaman.
Izin bisnis yang didukung termasuk:
instagram_basic- Akses ke Instagram Basic Display APIinstagram_manage_insights- Akses ke Instagram Insightspages_show_list- Daftar Halaman yang dikelola oleh orang tersebutpages_read_engagement- Baca data partisipasi dari Halamanpages_manage_posts- Kelola postingan di Halamanbusiness_management- Kelola aset bisnis
Lihat referensi izin Facebook untuk daftar izin lengkap. Persyaratan konfigurasi: Aplikasi Facebook Anda harus dikonfigurasi sebagai Aplikasi Bisnis di Konsole Pengembang Facebook.
Izin bisnis mungkin memerlukan Tinjauan Aplikasi Facebook sebelum penggunaan produksi.
- Aplikasi Anda harus mematuhi kebijakan Penggunaan Bisnis Facebook.
- Instagram Basic Access
- __CAPGO_KEEP_0__
__CAPGO_KEEP_0__
Bagian berjudul “Akses Dasar Instagram”await SocialLogin.initialize({ facebook: { appId: 'your-business-app-id', clientToken: 'your-client-token', },});
const res = await SocialLogin.login({ provider: 'facebook', options: { permissions: [ 'email', 'public_profile', 'instagram_basic', 'pages_show_list', 'pages_read_engagement', ], },});
const profile = await SocialLogin.providerSpecificCall({ call: 'facebook#getProfile', options: { fields: ['id', 'name', 'email', 'instagram_business_account'], },});Pengelolaan Halaman
Bagian berjudul “Pengelolaan Halaman”const res = await SocialLogin.login({ provider: 'facebook', options: { permissions: [ 'email', 'pages_show_list', 'pages_manage_posts', 'pages_read_engagement', ], },});
const profile = await SocialLogin.providerSpecificCall({ call: 'facebook#getProfile', options: { fields: ['id', 'name', 'accounts{id,name,instagram_business_account}'], },});Catatan penting:
- Anda dapat menguji izin bisnis dengan pengguna uji dan aplikasi pengembangan sebelum Tinjauan Aplikasi.
- Sebagian besar izin bisnis memerlukan Tinjauan Aplikasi Facebook sebelum penggunaan produksi.
- API bisnis memiliki batasan kecepatan yang berbeda.
- Lihat dokumentasi platform Facebook saat ini sebelum peluncuran. Ikuti Petunjuk Integrasi Bisnis Facebook
Konfigurasi Android
Judul bagian ini adalah Konfigurasi Android-
Tambahkan izin internet ke aplikasi Anda
AndroidManifest.xmlPastikan baris ini ada:
<uses-permission android:name="android.permission.INTERNET"/> -
Generasi hash kunci Android Anda
Langkah ini sangat penting untuk keamanan dan diperlukan oleh Facebook. Buka terminal Anda dan jalankan:
Jendela terminal keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 -AKetika diminta untuk memasukkan kata sandi, gunakan:
android -
Tambahkan hash kunci ke aplikasi Facebook Anda
- Pergi ke dashboard aplikasi Anda di Facebook Developers
- Navigasikan ke Pengaturan > Dasar
- Geser ke bawah ke bagian “Android”
- Klik “Tambahkan Platform” jika Android belum ditambahkan dan isi detailnya
- Tambahkan hash kunci yang Anda generasi
- Untuk produksi, tambahkan kedua hash kunci debug dan rilis
-
Perbarui
AndroidManifest.xmluntuk mencakup:<application>...<activity android:name="com.facebook.FacebookActivity"android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"android:label="@string/app_name" /><activityandroid:name="com.facebook.CustomTabActivity"android:exported="true"><intent-filter><action android:name="android.intent.action.VIEW" /><category android:name="android.intent.category.DEFAULT" /><category android:name="android.intent.category.BROWSABLE" /><data android:scheme="FB[APP_ID]" /></intent-filter></activity></application>
Pengaturan iOS
Bagian berjudul “Pengaturan iOS”-
Tambahkan platform iOS di Konsole Pengembang Facebook
- Buka dashboard aplikasi Anda di Pengembang Facebook
- Navigasikan ke Pengaturan > Dasar
- Geser ke bagian bawah halaman dan klik “Tambah Platform”
- Pilih iOS dan isi detail yang diperlukan
-
Buka proyek Xcode Anda dan navigasikan ke Info.plist
-
Tambahkan entri berikut ke Info.plist Anda:
<key>FacebookAppID</key><string>[APP-ID]</string><key>FacebookClientToken</key><string>[CLIENT-TOKEN]</string><key>FacebookDisplayName</key><string>[APP-NAME]</string><key>LSApplicationQueriesSchemes</key><array><string>fbapi</string><string>fb-messenger-share-api</string></array><key>CFBundleURLTypes</key><array><dict><key>CFBundleURLSchemes</key><array><string>fb[APP-ID]</string></array></dict></array> -
Ubah
AppDelegate.swiftimport FBSDKCoreKit@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate {func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {// Override point for customization after application launch.// Initialize Facebook SDKFBSDKCoreKit.ApplicationDelegate.shared.application(application,didFinishLaunchingWithOptions: launchOptions)return true}func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {// Called when the app was launched with a url. Feel free to add additional processing here,// but if you want the App API to support tracking app url opens, make sure to keep this callif (FBSDKCoreKit.ApplicationDelegate.shared.application(app,open: url,sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,annotation: options[UIApplication.OpenURLOptionsKey.annotation])) {return true;} else {return ApplicationDelegateProxy.shared.application(app, open: url, options: options)}}}
Menggunakan Login Facebook di Aplikasi Anda
Judul Bagian “Menggunakan Login Facebook di Aplikasi Anda”-
Inisialisasi login Facebook di aplikasi Anda
import { SocialLogin } from '@capgo/capacitor-social-login';// Initialize during app startupawait SocialLogin.initialize({facebook: {appId: 'APP_ID',clientToken: 'CLIENT_TOKEN',}}) -
Implementasikan fungsi login
async function loginWithFacebook() {try {const result = await SocialLogin.login({provider: 'facebook',options: {permissions: ['email', 'public_profile'],limitedLogin: false // See Limited Login section below for important details}});console.log('Facebook login result:', result);// Handle successful login} catch (error) {console.error('Facebook login error:', error);// Handle error}} -
Copy Profil Pengguna
Setelah login sukses, Anda dapat mengambil informasi profil tambahan:
async function getFacebookProfile() {try {const profileResponse = await SocialLogin.providerSpecificCall({call: 'facebook#getProfile',options: {fields: ['id', 'name', 'email', 'first_name', 'last_name', 'picture']}});console.log('Facebook profile:', profileResponse.profile);return profileResponse.profile;} catch (error) {console.error('Failed to get Facebook profile:', error);return null;}}// Example usage after loginasync function loginAndGetProfile() {const loginResult = await loginWithFacebook();if (loginResult) {const profile = await getFacebookProfile();if (profile) {console.log('User ID:', profile.id);console.log('Name:', profile.name);console.log('Email:', profile.email);console.log('Profile Picture:', profile.picture?.data?.url);}}}Penggunaan Batasan Token:
getProfileberfungsi hanya ketika Anda memiliki token akses (login standar dengan tracking diizinkan). Jika pengguna menolak tracking atau Anda menggunakan login terbatas (token JWT saja), panggilan ini akan gagal. Dalam kasus tersebut, gunakan data profil yang disediakan dalam respons login awal. ⚠️ Kritis: Pengelolaan Token Backend
Judul bagian “⚠️ Kritis: Pengelolaan Token Backend”
BahayaServer backend Anda harus menangani dua jenis token yang berbeda karena pengguna iOS dapat menerima token akses atau token JWT tergantung pada pilihan pengaturan pelacakan aplikasi mereka, sementara pengguna Android selalu menerima token akses.
Jenis Token oleh Platform
Judul Bagian “Jenis Token oleh Platform”| Platform | Pengaturan Login Terbatas | Pilihan Pilihan Pengguna ATT | Tipe Token Hasil |
|---|---|---|---|
| iOS | true | Sistem Apapun | Token JWT |
| iOS | false | Mengizinkan Pelacakan | Token Akses |
| iOS | false | Penggunaan iOS | Token JWT (otomatis override) |
| Android | Mana pun | Tidak Diketahui | Token Akses (selalu) |
Implementasi Backend
Judul Bagian “Implementasi Backend”-
Deteksi Tipe Token dan Tangani Sesuai
async function loginWithFacebook() {try {const loginResult = await SocialLogin.login({provider: 'facebook',options: {permissions: ['email', 'public_profile'],limitedLogin: false // iOS: depends on ATT, Android: ignored}});if (loginResult.accessToken) {// Access token (Android always, iOS when tracking allowed)return handleAccessToken(loginResult.accessToken.token);} else if (loginResult.idToken) {// JWT token (iOS only when tracking denied or limitedLogin: true)return handleJWTToken(loginResult.idToken);}} catch (error) {console.error('Facebook login error:', error);}} -
Contoh Integrasi Firebase
import { OAuthProvider, FacebookAuthProvider, signInWithCredential } from 'firebase/auth';async function handleAccessToken(accessToken: string, nonce: string) {// For access tokens, use OAuthProvider (new method)const fbOAuth = new OAuthProvider("facebook.com");const credential = fbOAuth.credential({idToken: accessToken,rawNonce: nonce});try {const userResponse = await signInWithCredential(auth, credential);return userResponse;} catch (error) {console.error('Firebase OAuth error:', error);return false;}}async function handleJWTToken(jwtToken: string) {// For JWT tokens, send to your backend for validationtry {const response = await fetch('/api/auth/facebook-jwt', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ jwtToken })});const result = await response.json();return result;} catch (error) {console.error('JWT validation error:', error);return false;}} -
Validasi JWT Backend
// Backend: Validate JWT token from Facebookimport jwt from 'jsonwebtoken';import { Request, Response } from 'express';app.post('/api/auth/facebook-jwt', async (req: Request, res: Response) => {const { jwtToken } = req.body;try {// Verify JWT token with Facebook's public key// See: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claimsconst decoded = jwt.verify(jwtToken, getFacebookPublicKey(), {algorithms: ['RS256'],audience: process.env.FACEBOOK_APP_ID,issuer: 'https://www.facebook.com' // From: https://www.facebook.com/.well-known/openid-configuration/?_rdr});// Extract user info from JWTconst userInfo = {id: decoded.sub,email: decoded.email,name: decoded.name,isJWTAuth: true};// Create your app's session/tokenconst sessionToken = createUserSession(userInfo);res.json({success: true,token: sessionToken,user: userInfo});} catch (error) {console.error('JWT validation failed:', error);res.status(401).json({ success: false, error: 'Invalid token' });}}); -
Pengolah Token Backend Umum
// Handle both token types in your backendasync function authenticateFacebookUser(tokenData: any) {if (tokenData.accessToken) {// Handle access token - validate with Facebook Graph APIconst response = await fetch(`https://graph.facebook.com/me?access_token=${tokenData.accessToken}&fields=id,name,email`);const userInfo = await response.json();return {user: userInfo,tokenType: 'access_token',expiresIn: tokenData.expiresIn || 3600};} else if (tokenData.jwtToken) {// Handle JWT token - decode and validate// See: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claimsconst decoded = jwt.verify(tokenData.jwtToken, getFacebookPublicKey());return {user: {id: decoded.sub,name: decoded.name,email: decoded.email},tokenType: 'jwt',expiresIn: decoded.exp - Math.floor(Date.now() / 1000)};} else {throw new Error('No valid token provided');}}
Kriteria Utama
Bagian berjudul “Kriteria Utama”Token Akses (Login Standar):
- ✅ AndroidSelalu tersedia (pengaturan iOS-only tidak berlaku)
- ✅ iOSHanya ketika pengguna mengizinkan aplikasi untuk diikuti
- ✅ Dapat digunakan untuk mengakses Grafik Facebook API
- ✅ Masa kadaluarsa yang lebih lama
- ✅ Data pengguna lebih banyak tersedia
- ❌ Becoming kurang umum pada iOS sebagai pengguna semakin menolak tracking
Token JWT (Modus Privasi iOS-Only):
- ❌ Android: Tidak pernah terjadi (tidak didukung)
- ✅ iOS: Ketika tracking ditolak atau
limitedLogin: true - ✅ Menghormati preferensi privasi pengguna iOS
- ❌ Mengandung informasi pengguna dasar hanya
- ❌ Waktu kadaluarsa yang lebih singkat
- ❌ Tidak ada akses ke Facebook Graph API
- ⚠️ Sekarang skenario yang paling umum untuk pengguna iOS
Tindakan Platform-Spesifik:
- Aplikasi iOS: Harus menangani baik token akses DAN token JWT
- Aplikasi Android: Hanya perlu menangani token akses
- Aplikasi lintas platform: Harus mengimplementasikan kedua metode penanganan token
Syarat Konteks yang Aman (Web/Capacitor)
Judul Bagian “Syarat Konteks yang Aman (Web/Capacitor)”Keterbatasan API Kriptografi
Judul Bagian “Keterbatasan API Kriptografi”Alur Login Facebook yang Diperbarui memerlukan Kriptografi Web API untuk penghasilan nonce, yang hanya tersedia di konteks yang aman:
// This requires secure context (HTTPS or localhost)async function sha256(message: string) { const msgBuffer = new TextEncoder().encode(message); const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer); // ❌ Fails in insecure context // ...}Masalah Lingkungan Pengembangan
Judul Bagian “Masalah Lingkungan Pengembangan”Masalah Umum: ionic serve dengan URL HTTP mengganggu autentikasi Facebook
| Lingkungan | Crypto API Tersedia | Login Facebook Berfungsi |
|---|---|---|
http://localhost:3000 | ✅ Ya | ✅ Ya |
http://127.0.0.1:3000 | ✅ Ya | ✅ Ya |
http://192.168.1.100:3000 | ❌ Tidak | ❌ Tidak |
https://any-domain.com | ✅ Ya | ✅ Ya |
Solusi untuk Capacitor Pengembangan
Judul Bagian “Solusi untuk Capacitor Pengembangan”-
Gunakan localhost untuk tes web
Jendela Terminal # Instead of ionic serve --host=0.0.0.0ionic serve --host=localhost -
Aktifkan HTTPS di Ionic
Jendela Terminal ionic serve --ssl -
Tes pada perangkat nyata
Jendela Terminal # Capacitor apps run in secure context on devicesionic cap run iosionic cap run android -
Generasi nonce alternatif untuk pengembangan
async function generateNonce() {if (typeof crypto !== 'undefined' && crypto.subtle) {// Secure context - use crypto.subtlereturn await sha256(Math.random().toString(36).substring(2, 10));} else {// Fallback for development (not secure for production)console.warn('Using fallback nonce - not secure for production');return btoa(Math.random().toString(36).substring(2, 10));}}
Catatan Integrasi Firebase
Judul bagian “Catatan Integrasi Firebase”Dokumentasi Firebase terbaru memerlukan token JWT dengan nonce untuk autentikasi Facebook, terlepas dari pengaturan login. Pendekatan ini berfungsi dengan baik pada limitedLogin: true dan limitedLogin: false:
// Both modes can return JWT tokens depending on user choice const loginResult = await SocialLogin.login({ provider: 'facebook', options: { permissions: ['email', 'public_profile'], limitedLogin: false, // true = always JWT, false = depends on user tracking choice nonce: nonce } });Keterbatasan Pengembangan: Jika Anda menggunakan ionic serve pada IP jaringan (bukan localhost), autentikasi Facebook akan gagal karena keterbatasan crypto API. Gunakan localhost atau HTTPS untuk pengujian web.
Penyelesaian Masalah
Judul Bagian “Penyelesaian Masalah”Masalah Umum dan Solusinya
Judul Bagian “Masalah Umum dan Solusinya”-
Error hash kunci pada Android
- Periksa kembali apakah Anda telah menambahkan hash kunci yang benar ke dashboard Facebook
- Pastikan Anda telah menambahkan hash kunci debug dan release
- Verifikasi apakah Anda menggunakan keystore yang benar saat menghasilkan hash
-
Tombol login Facebook tidak muncul
- Verifikasi semua entri manifest yang benar
- Periksa apakah ID Aplikasi Facebook dan Token Klien Anda benar
- Pastikan Anda telah menginisialisasi SDK dengan benar
-
Issues iOS Umum
- Pastikan semua entri Info.plist sudah benar
- Pastikan skema URL sudah terkonfigurasi dengan benar
- Periksa apakah ID aplikasi Anda sesuai dengan yang terdaftar di dashboard Facebook
Pengujian
Judul Bagian “Pengujian”-
Sebelum melakukan pengujian, tambahkan pengguna uji di Console Pengembang Facebook
- Pergi ke Roles > Pengguna Uji
- Buat pengguna uji
- Gunakan kreditensial ini untuk pengujian
-
Pengujian baik pada build debug maupun release
- Debug build dengan hash kunci debug
- Release build dengan hash kunci rilis
- Test pada emulator dan perangkat fisik secara bersamaan
Jangan lupa untuk menguji alur login lengkap, termasuk:
- Login sukses
- Batal login
- Pengaturan error
- Fungsi keluar
Lanjutkan dari Pengaturan Login Facebook
Bagian berjudul “Lanjutkan dari Pengaturan Login Facebook”Jika Anda menggunakan Pengaturan Login Facebook Untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-sosial Untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial Untuk detail implementasi dalam @capgo/capacitor-login-sosial, @capgo/capacitor-passkey Untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli Untuk detail implementasi dalam @capgo/capacitor-biometrik-asli, dan Dua faktor autentikasi Untuk detail implementasi dalam Dua faktor autentikasi.