Pengaturan Login Facebook

Petunjuk Pemasangan

Dalam panduan ini, Anda akan belajar cara mengatur Facebook Login dengan Capgo Pemasangan Sosial. Anda memerlukan hal-hal berikut:

• Nama Paket Pengembang Facebook
• Nama Paket/Bundel Aplikasi Anda
• Akses ke Terminal untuk Menghasilkan Hash Kunci (Android)

Pemasangan Umum

Jika Anda belum memiliki aplikasi Facebook yang dibuat, ikuti langkah-langkah berikut:

1. Buat Aplikasi Facebook

   Ikuti tutorial untuk Buat Aplikasi

2. Tambahkan Login Facebook ke aplikasi Anda

   Di Dashboard Pengembang Facebook Anda, tambahkan produk Login Facebook ke aplikasi Anda

3. Sebelum Anda dapat mengeluarkan aplikasi ke publik, ikuti tutorial ini tutorial untuk mempublikasikannya

Informasi Penting

Berikut adalah tempat Anda dapat menemukan informasi kunci yang dibutuhkan untuk integrasi:

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Pengaturan Android

1. Tambahkan izin internet ke aplikasi Anda AndroidManifest.xml

   Pastikan baris ini ada:

   <uses-permission android:name="android.permission.INTERNET"/>

2. Generasi hash kunci Android Anda

   Langkah ini sangat penting untuk keamanan Facebook. Buka terminal Anda dan jalankan:

   keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 -A

   Ketika diminta password, gunakan: android

   Catatan

   Untuk aplikasi rilis, Anda perlu menggunakan keystore rilis Anda:

   keytool -exportcert -alias your-key-name -keystore your-keystore-path | openssl sha1 -binary | openssl base64 -A

3. Tambahkan hash kunci ke aplikasi Facebook Anda

   1. Buka dashboard aplikasi Anda di Pengembang Facebook
   2. Navigasikan ke Pengaturan > Dasar
   3. Geser ke bawah ke bagian “Android”
   4. Klik “Tambahkan Platform” jika Android belum ditambahkan dan isi detailnya
   5. Tambahkan hash kunci yang Anda buat
   6. Untuk produksi, tambahkan kedua hash kunci debug dan release

4. Perbarui AndroidManifest.xml untuk mencakup:

   <application>
       ...
       <activity android:name="com.facebook.FacebookActivity"
           android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
           android:label="@string/app_name" />
   
       <activity
           android: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>

   Peringatan

   Pastikan Anda mengganti [APP_ID] dengan ID aplikasi Facebook Anda yang sebenarnya di android:scheme atribut

Pengaturan iOS

1. Tambahkan platform iOS di Konsole Pengembang Facebook

   1. Buka dashboard aplikasi Anda di Pengembang Facebook
   2. Navigasikan ke Pengaturan > Dasar
   3. Gulir ke bagian bawah halaman dan klik “Tambah Platform”
   4. Pilih iOS dan isi detail yang diperlukan

2. Buka proyek Xcode Anda dan navigasikan ke Info.plist

3. 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>

   Peringatan

   Ganti nilai-nilai berikut:

   • [APP-ID] dengan ID aplikasi Facebook Anda
   • [CLIENT-TOKEN] dengan token klien Anda
   • [APP-NAME] dengan nama aplikasi Anda

4. Modifikasi AppDelegate.swift

   import FBSDKCoreKit
   @UIApplicationMain
   class AppDelegate: UIResponder, UIApplicationDelegate {
         func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
           // Override point for customization after application launch.
   
           // Initialize Facebook SDK
           FBSDKCoreKit.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 call
   
           if (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

Peringatan

Sebelum Anda Mulai: Ingatlah bahwa dengan Facebook SDK yang baru, jenis token yang Anda terima sepenuhnya bergantung pada pilihan Pengaturan Aplikasi Pengguna, bukan pada konfigurasi code Anda. Selalu implementasikan pengaturan token akses dan JWT di backend Anda untuk memastikan autentikasi berfungsi untuk semua pengguna.

1. Inisialisasi login Facebook di aplikasi Anda

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   // Initialize during app startup
   await SocialLogin.initialize({
     facebook: {
       appId: 'APP_ID',
       clientToken: 'CLIENT_TOKEN',
     }
   })

2. 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
     }
   }

   Catatan

   Login Terbatas (Hanya iOS): Aktifkan limitedLogin jika Anda ingin menggunakan fitur Login Terbatas Facebook. Ini adalah fitur iOS yang memberikan privasi yang lebih baik dengan membatasi data yang dibagikan selama login.

   Keterbatasan Penting:

   • Hanya iOS: Fitur Login Terbatas hanya mempengaruhi perangkat iOS dan tidak memiliki dampak pada Android
   • Override ATT: Bahkan jika Anda mengatur limitedLogin: false, Facebook akan secara otomatis mengaktifkannya ke true jika pengguna belum memberikan izin Transparansi Pengikatan Aplikasi (ATT)
   • Selalu Tangani Kasus Keduanya: Aplikasi Anda harus selalu siap untuk menangani skenario login terbatas dan penuh

   Mengecek Status ATT:

   // Check if user has granted tracking permission
   const trackingStatus = await SocialLogin.providerSpecificCall({
     call: 'facebook#requestTracking',
     options: {}
   });
   console.log('Tracking status:', trackingStatus.status); // 'authorized', 'denied', 'notDetermined', or 'restricted'

   Implementasi yang Direkomendasikan jika access_token dipilih:

   async function loginWithFacebook() {
     try {
       // Check ATT status first
       const trackingStatus = await SocialLogin.providerSpecificCall({
         call: 'facebook#requestTracking',
         options: {}
       });
   
       const result = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: trackingStatus.status === 'denied' // Auto-adjust based on ATT
         }
       });
   
       // Handle different response types based on limited login
       if (result.result.accessToken) {
         // Your app logic should work with both limited and full login
         console.log('Login successful:', result);
       }
     } catch (error) {
       console.error('Facebook login error:', error);
     }
   }

   Apa yang Terjadi pada Login Terbatas:

   • Akses Data Terbatas: Data pengguna mungkin tidak tersedia
   • Jenis Token Berbeda: Token akses mungkin memiliki kemampuan yang berbeda
   • Kepatuhan Privasi: Membantu memenuhi persyaratan privasi iOS

   Penting: Selalu tes aplikasi Anda dengan skenario login terbatas dan penuh untuk memastikan aplikasi Anda berfungsi dengan baik dalam kedua kasus. Anda dapat mengetahui lebih lanjut tentang Login Terbatas di sini.

3. Ambil 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 login
   async 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);
       }
     }
   }

   Tip

   Bidang Profil Tersedia: Anda dapat meminta bidang mana pun yang tersedia di Grafik Facebook API. Bidang umum termasuk: id, name, email, first_name, last_name, picture, birthday, gender, location, hometown. Perlu diingat bahwa beberapa bidang mungkin memerlukan izin tambahan.

   Keterbatasan Tipe Token: The getProfile hanya berfungsi ketika Anda memiliki token yang sesuai dengan __CAPGO_KEEP_0__. Token Akses (login standar dengan tracking diijinkan). Jika pengguna menolak tracking atau Anda menggunakan login terbatas (hanya token JWT), panggilan ini akan gagal. Dalam kasus tersebut, gunakan data profil yang disediakan dalam respons login awal.

⚠️ Kritis: Pengelolaan Token Backend

Bahaya

CRITISAL Sifat iOS: Login Terbatas dan Transparansi Aplikasi (ATT) adalah Hanya iOS fitur. Pada Android, Anda akan selalu menerima token akses terlepas dari limitedLogin pengaturan.

Sifat Token iOS:

• limitedLogin: true → Selalu token JWT (hanya untuk iOS)
• limitedLogin: false + Pengguna Izinkan tracking → Token akses
• limitedLogin: false + Pengguna TOLAK tracking → Token JWT (iOS secara otomatis menggantikan pengaturan Anda)

Tindakan Token Android : Selalu token akses, limitedLogin pengaturan diabaikan.

Server backend Anda harus menangani dua jenis token yang berbeda karena pengguna iOS dapat menerima token akses atau token JWT tergantung pada pilihan Pengguna untuk Mengatur Transparansi Aplikasi, sementara pengguna Android selalu menerima token akses.

Jenis Token oleh Platform

Platform	Pengaturan Login Terbatas	Pilihan Toko Pengguna	Tipe Token Hasil
iOS	true	Sistem Apapun	Token JWT
iOS	false	Mengizinkan Pelacakan	Token Akses
iOS	false	Mengingkari pelacakan	Token JWT (otomatis override)
Android	Apapun	Tidak Ada	Token Akses (selalu)

Implementasi Backend

1. 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);
     }
   }

2. 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 validation
     try {
       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;
     }
   }

3. Validasi JWT Backend

   // Backend: Validate JWT token from Facebook
   import 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-claims
       const 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 JWT
       const userInfo = {
         id: decoded.sub,
         email: decoded.email,
         name: decoded.name,
         isJWTAuth: true
       };
   
       // Create your app's session/token
       const 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' });
     }
   });

4. Pengolah Token Backend Umum

   // Handle both token types in your backend
   async function authenticateFacebookUser(tokenData: any) {
     if (tokenData.accessToken) {
       // Handle access token - validate with Facebook Graph API
       const 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-claims
       const 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');
     }
   }

Pertimbangan Utama

Bahaya

Penting (Hanya iOS) Pahami:

• iOSPilihan Pengikatan Aplikasi Pengguna menentukan jenis token, BUKAN pengaturan code Anda (bahkan ketika limitedLogin: false)
• Android: Selalu menerima akses token, terlepas dari limitedLogin pengaturan
• Pengaturan Masuk Terbatas hanya tersedia di iOS - Android mengabaikan pengaturan ini sepenuhnya

Akses Token (Pengaturan Masuk Standar):

• ✅ Andoid: Selalu tersedia (pengaturan iOS tidak berlaku)
• ✅ iOS: Hanya ketika pengguna secara eksplisit mengizinkan pengikatan aplikasi
• ✅ Dapat digunakan untuk mengakses Grafik Facebook API
• ✅ Waktu kadaluarsa yang lebih lama
• ✅ Data pengguna yang lebih banyak tersedia
• ❌ Mengalami penurunan pada iOS seiring meningkatnya penolakan pengguna untuk di track

Token JWT (Mode Privasi iOS-Only):

• ❌ Android: Tidak pernah terjadi (tidak didukung)
• ✅ iOS: Ketika pengguna menolak di track atau limitedLogin: true
• ✅ Menghormati preferensi privasi pengguna iOS
• ❌ Mengandung informasi pengguna dasar saja
• ❌ Masa kadaluarsa yang lebih singkat
• ❌ Tidak memiliki akses ke Facebook Graph API
• ⚠️ Sekarang skenario yang paling umum untuk pengguna iOS

Behavior yang Spesifik Platform:

• Aplikasi iOS: Harus menangani baik token akses DAN token JWT
• Aplikasi Android: Hanya perlu menangani token akses
• Aplikasi lintas platform: Harus mengimplementasikan kedua metode pengelolaan token

Trik

Essensial untuk iOS: KAMU HARUS mengimplementasikan kedua metode pengelolaan token. Banyak pengembang iOS menganggap mereka akan selalu mendapatkan token akses dan aplikasi mereka rusak ketika pengguna menolak tracking.

Persyaratan Konteks yang Aman (Web/Capacitor)

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

Masalah Umum: ionic serve dengan URL HTTP memecahkan autentikasi Facebook

Lingkungan	Kripto 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 Pengembangan Capacitor

1. Gunakan localhost untuk tes web

   # Instead of ionic serve --host=0.0.0.0
   ionic serve --host=localhost

2. Aktifkan HTTPS di Ionic

   ionic serve --ssl

3. Tes pada perangkat nyata

   # Capacitor apps run in secure context on devices
   ionic cap run ios
   ionic cap run android

4. Penggantian Nonce Alternatif untuk Pengembangan

   async function generateNonce() {
     if (typeof crypto !== 'undefined' && crypto.subtle) {
       // Secure context - use crypto.subtle
       return 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));
     }
   }

Integrasi Firebase Catatan

Dokumentasi Firebase terbaru memerlukan token JWT dengan nonce untuk autentikasi Facebook, terlepas dari pengaturan login. Pendekatan ini berfungsi dengan baik baik 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.

Tips

Keamanan Produksi: Capacitor aplikasi pada iOS/Android selalu menjalankan konteks yang aman, sehingga keterbatasan ini hanya mempengaruhi lingkungan pengembangan web.

Pengaturan Masalah

Masalah Umum dan Solusi

1. Kesalahan hash kunci pada Android

   • Periksa kembali bahwa Anda telah menambahkan hash kunci yang benar ke dashboard Facebook
   • Untuk rilis, pastikan Anda telah menambahkan hash kunci debug dan rilis
   • Verifikasi bahwa Anda menggunakan keystore yang benar saat menghasilkan hash

2. Tombol login Facebook tidak muncul

   • Verifikasi semua entri manifest yang benar
   • Periksa bahwa ID aplikasi Facebook dan Token Klien Anda benar
   • Pastikan Anda telah menginisialisasi SDK dengan benar

3. Masalah iOS umum

   • Pastikan semua entri Info.plist sudah benar
   • Verifikasi skema URL sudah terkonfigurasi dengan baik
   • Periksa apakah ID aplikasi Anda sesuai dengan yang terdaftar di dashboard Facebook

Pengujian

1. Sebelum melakukan pengujian, tambahkan pengguna uji di Console Pengembang Facebook

   • Pergi ke Roles > Pengguna Uji
   • Buat pengguna uji
   • Gunakan kreditensial ini untuk pengujian

2. Pengujian baik build debug maupun release

   • Build debug dengan hash kunci debug
   • Rilis build dengan hash kunci rilis
   • Test pada emulator dan perangkat fisik secara bersamaan

Ingatlah untuk menguji alur login lengkap, termasuk:

• Login sukses
• Batal login
• Pengaturan error
• Fungsi keluar

Lanjutkan dari Pengaturan Login Facebook

Jika Anda menggunakan Pengaturan Login Facebook untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-media sosial untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-media sosial, @capgo/capacitor-login-media sosial untuk detail implementasi dalam @capgo/capacitor-login-media sosial, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik asli untuk detail implementasi dalam @capgo/capacitor-biometrik asli, dan Autentikasi dua faktor untuk detail implementasi dalam Autentikasi dua faktor.