Lompat ke konten

Pengaturan Login Facebook

GitHub

Dalam panduan ini, Anda akan belajar cara mengatur Facebook Login dengan Capgo Social Login. Anda memerlukan:

  • Akun Pengembang Facebook
  • Nama paket aplikasi Anda/ID paket
  • Akses ke terminal untuk menghasilkan hash kunci (Android)

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

  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 merilis aplikasi ke publik, ikuti ini tutorial untuk mempublikasikannya

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

  1. CLIENT_TOKEN:

    Dashboard pengembang Facebook menampilkan tempat mencari token klien
  2. APP_ID:

    Dashboard pengembang Facebook menampilkan tempat mencari ID aplikasi
  3. APP_NAME:

    Dashboard pengembang Facebook menampilkan tempat mencari nama aplikasi

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 API
  • instagram_manage_insights - Akses ke Instagram Insights
  • pages_show_list - Daftar Halaman yang dikelola oleh orang ini
  • pages_read_engagement - Baca data interaksi dari Halaman
  • pages_manage_posts - Kelola postingan di Halaman
  • business_management - Kelola aset bisnis

Lihat Referensi Izin Facebook untuk daftar izin lengkap.

Persyaratan konfigurasi:

  1. Aplikasi Facebook Anda harus dikonfigurasi sebagai Aplikasi Bisnis di Konsole Pengembang Facebook.
  2. Izin bisnis mungkin memerlukan Tinjauan Aplikasi Facebook sebelum penggunaan produksi.
  3. Aplikasi Anda harus mematuhi kebijakan Penggunaan Bisnis Facebook.
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'],
},
});
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 rate yang berbeda.
  • Lihat dokumentasi platform Facebook saat ini sebelum peluncuran. Ikuti Petunjuk Integrasi Bisnis Facebook
  1. Tambahkan izin internet ke aplikasi Anda AndroidManifest.xml

    Pastikan baris ini ada:

    <uses-permission android:name="android.permission.INTERNET"/>
  2. Buatlah hash kunci Android Anda

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

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

    Ketika diminta untuk memasukkan kata sandi, gunakan: android

  3. Tambahkan hash kunci ke aplikasi Facebook Anda

    1. Lihat dashboard aplikasi Anda di Facebook Developers
    2. Navigasikan ke Pengaturan > Dasar
    3. Gulir 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 rilis
  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>
  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>
  4. Ubah 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

Judul Bagian “Menggunakan Login Facebook di Aplikasi Anda”
  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
    }
    }
  3. di sini

    Ambil Profil Pengguna

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

    . Perlu diingat bahwa beberapa bidang mungkin memerlukan izin tambahan.: Batasan Jenis Token getProfile Hanya dapat berfungsi ketika Anda memiliki token akses. akses token (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.

Server backend Anda harus menangani dua jenis token yang berbeda karena pengguna iOS dapat menerima token akses atau token JWT tergantung pada pilihan kebijakan pelacakan aplikasi mereka, sementara pengguna Android selalu menerima token akses.

PlatformPengaturan Login TerbatasPilihan Toko PenggunaTipe Token Hasil
iOStrueSistem ApapunToken JWT
iOSfalseMengizinkan PelacakanToken Akses
iOSfalsePenggunaan iOSToken JWT (otomatis override)
AndroidMana punTidak AdaToken Akses (selalu)
  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');
    }
    }

Token Akses (Login Standar):

  • Android: Selalu tersedia (pengaturan iOS-only tidak berlaku)
  • iOS: Hanya ketika pengguna secara eksplisit mengizinkan pengikatan aplikasi
  • ✅ 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 Cross-platform: Harus mengimplementasikan kedua metode penanganan token

Syarat-Syarat Konteks yang Aman (Web/Capacitor)

Judul Bagian “Syarat-Syarat Konteks yang Aman (Web/Capacitor)”

Alur Login Facebook yang Diperbarui memerlukan API Web Kriptografi 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 Umum: ionic serve dengan URL HTTP mengganggu autentikasi Facebook

LingkunganCrypto API TersediaLogin 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
  1. Gunakan localhost untuk tes web

    Jendela Terminal
    # Instead of ionic serve --host=0.0.0.0
    ionic serve --host=localhost
  2. Aktifkan HTTPS di Ionic

    Jendela Terminal
    ionic serve --ssl
  3. Tes pada perangkat nyata

    Jendela Terminal
    # 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));
    }
    }

Dokumentasi Firebase Terbaru Membutuhkan Token JWT dengan Nonce untuk Otentikasi Facebook, Terlepas dari Pengaturan Masuk. 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 Lokalhost), Otentikasi Facebook Akan Gagal Karena Keterbatasan Kriptografi API. Gunakan Lokalhost atau HTTPS untuk Pengujian Web.

  1. Kesalahan hash kunci pada Android

    • Periksa kembali apakah Anda telah menambahkan hash kunci yang benar ke dashboard Facebook
    • Pastikan Anda telah menambahkan kedua hash kunci debug dan release
    • Pastikan Anda menggunakan keystore yang benar saat menghasilkan hash
  2. Tombol login Facebook tidak muncul

    • Periksa semua entri manifest yang benar
    • Pastikan ID Aplikasi Facebook dan Token Klien Anda benar
    • Pastikan Anda telah menginisialisasi SDK dengan benar
  3. Issues iOS Umum

    • Pastikan semua entri Info.plist sudah benar
    • Verifikasi skema URL sudah terkonfigurasi dengan benar
    • Periksa apakah ID paket Anda sesuai dengan yang terdaftar di dashboard Facebook
  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 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

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 Autentikasi dua faktor untuk detail implementasi dalam Autentikasi dua faktor.