Pengaturan Login Facebook

Copy prompt pengaturan dengan langkah-langkah instalasi dan panduan markdown lengkap untuk plugin ini.

Pengenalan

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

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

Pengaturan Umum

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

Buat Aplikasi Facebook

Ikuti tutorial untuk Membuat Aplikasi
Tambahkan Facebook Login ke aplikasi Anda

Pada Dashboard Pengembang Facebook, tambahkan produk Facebook Login ke aplikasi Anda
Sebelum Anda dapat merilis aplikasi ke publik, ikuti langkah ini Tutorial Menerbitkan Aplikasi

Informasi Penting

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

CLIENT_TOKEN:
APP_ID:
APP_NAME:

Plugin ini mendukung Facebook Login Bisnis untuk fitur dan izin terkait bisnis. Akun bisnis dapat meminta izin tambahan di atas 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 tersebut
pages_read_engagement - Baca data interaksi dari Halaman
pages_manage_posts - Kelola postingan di Halaman
business_management - Kelola aset bisnis

Lihat referensi Referensi Izin Facebook untuk daftar izin lengkap.

Persyaratan konfigurasi:

Aplikasi Facebook Anda harus dikonfigurasi sebagai Aplikasi Bisnis di Konsole Pengembang Facebook.
Otorisasi bisnis mungkin memerlukan Tinjauan Aplikasi Facebook sebelum penggunaan produksi.
Aplikasi Anda harus mematuhi kebijakan Penggunaan Bisnis Facebook.

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

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.
Izin bisnis paling banyak memerlukan Tinjauan Aplikasi Facebook sebelum digunakan dalam produksi.
API bisnis memiliki batasan kecepatan yang berbeda. Tinjau dokumentasi platform Facebook saat ini sebelum peluncuran.
Ikuti langkah Konfigurasi aplikasi Anda sesuai dengan Pengaturan Android

Bagian berjudul

Pastikan baris ini ada: AndroidManifest.xml

Salin ke clipboard

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

Buat 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 -A
```
Ketika diminta untuk kata sandi, gunakan: android
Catatan
Untuk rilis, Anda akan memerlukan keystore rilis Anda:
Jendela terminal
keytool -exportcert -alias your-key-name -keystore your-keystore-path | openssl sha1 -binary | openssl base64 -A
Tambahkan hash kunci ke aplikasi Facebook Anda
1. Lihat dashboard aplikasi Anda di Facebook Developers
2. Navigasikan ke Pengaturan > Dasar
3. Scroll ke bawah ke bagian “Android”
4. Klik “Tambah 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

Perbarui Anda 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>

Pengaturan iOS

Tambahkan platform iOS di Konsole Pengembang Facebook
1. Pergi ke dashboard aplikasi Anda di Pengembang Facebook
2. Navigasikan ke Pengaturan > Dasar
3. Geser ke bagian bawah halaman dan klik “Tambahkan Platform”
4. 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>

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

Mulai 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',
  }
})

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

Login Terbatas (Hanya iOS): Atur limitedLogin ke true jika Anda ingin menggunakan fitur Login Terbatas Facebook. Fitur ini hanya tersedia di iOS dan memberikan privasi yang lebih baik dengan membatasi data yang dibagikan selama login.

Pentingnya Batasan:

Hanya iOS: Login Terbatas hanya berpengaruh pada perangkat iOS dan tidak memiliki dampak pada Android
OVERRIDE Pengaturan ATT: Meskipun Anda telah menetapkan limitedLogin: false, Facebook akan secara otomatis memaksa untuk true jika pengguna belum memberikan izin Pengaturan Transparansi Pelacakan Aplikasi (ATT)
Selalu Tangani Kasus Kedua: Aplikasi Anda harus selalu siap untuk menangani skenario login yang terbatas dan penuh

Memeriksa 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 Dianjurkan 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 dalam Login Terbatas:

Akses Data yang DikurangiBeberapa data pengguna mungkin tidak tersedia
Jenis Token Berbeda: Token akses mungkin memiliki kemampuan yang berbeda
Kepatuhan PrivasiMengikuti Persyaratan Privasi iOS

PentingSelalu 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 Limited Login di sini.

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

Keterbatasan Tipe Token: getProfile berfungsi hanya ketika Anda memiliki ⚠️ Kritis: Pengelolaan Token Backend (standard login with tracking allowed). If the user denied tracking or you’re using limited login (JWT token only), this call will fail. In that case, use the profile data provided in the initial login response.

⚠️ Kritis: Pengelolaan Token Backend

Server Anda harus mengolah dua jenis token yang berbeda karena pengguna iOS dapat menerima token akses atau token JWT tergantung pada pilihan Penggunaan Data Pengguna, sementara pengguna Android selalu menerima token akses.

Jenis Token oleh Platform

Platform	Pengaturan Login Terbatas	Pilihan Pengguna ATT	Hasil Jenis Token
iOS	`true`	Apa saja	Token JWT
iOS	`false`	Mengizinkan pelacakan	Token Akses
iOS	`false`	Menghalangi pelacakan	Token JWT (otomatis menggantikan)
Android	Apa saja	Tidak ada	Token Akses (selalu)

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

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

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

Konsiderasi Utama

Token Akses (Login Standar):

✅ Android: Selalu tersedia (pengaturan iOS tidak berlaku)
✅ iOS:Hanya ketika pengguna mengizinkan penggunaan aplikasi untuk tracking
✅ Dapat digunakan untuk mengakses Grafik Facebook API
✅ Masa kadaluarsa yang lebih lama
✅ Data pengguna yang lebih banyak tersedia
❌ Menjadi kurang umum pada iOS sebagai pengguna semakin menolak pengikatan

Token JWT (Mode Privasi iOS-Only):

❌ Android: Tidak pernah terjadi (tidak didukung)
✅ iOS: Ketika pengguna menolak diikuti atau limitedLogin: true
✅ Menghormati preferensi privasi pengguna iOS
❌ Mengandung informasi pengguna dasar saja
❌ Masa berlaku yang lebih singkat
❌ Tidak memiliki akses ke Grafik Facebook API
⚠️ Skenario yang paling umum sekarang untuk pengguna iOS

Perilaku yang Spesifik untuk 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

Persyaratan Konteks yang Aman (Web/Capacitor)

Keterbatasan Crypto API

Alur login Facebook yang diperbarui memerlukan Web Crypto API untuk penggunaan nonce, yang hanya tersedia di konteks 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 memutuskan autentikasi Facebook

Lingkungan	Kriptografi 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

Gunakan localhost untuk pengujian web

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

Aktifkan HTTPS di Ionic
Jendela terminal
```
ionic serve --ssl
```

Uji coba pada perangkat nyata

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

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

Catatan Integrasi Firebase

Referensi dokumentasi Firebase terbaru memerlukan token JWT dengan nonce untuk autentikasi Facebook, terlepas dari pengaturan login. Pendekatan ini berfungsi dengan baik baik pada pengaturan login yang 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 di jaringan IP (bukan localhost), login Facebook akan gagal karena keterbatasan crypto API . Gunakan localhost atau HTTPS untuk pengujian web.

Pengembangan Masalah

Judul Bagian: Masalah Umum dan Solusi

Judul Bagian: Kesalahan 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 untuk versi rilis
- Periksa apakah Anda menggunakan keystore yang benar saat menghasilkan hash
Tombol login Facebook tidak muncul
- Periksa semua entri manifest yang benar
- Periksa apakah ID Aplikasi Facebook dan Token Klien Anda benar
- Pastikan Anda telah menginisialisasi SDK dengan benar
Masalah iOS yang umum
- Pastikan semua entri Info.plist Anda benar
- Periksa apakah skema URL Anda telah dikonfigurasi dengan benar
- Periksa apakah ID Paket Anda sesuai dengan yang terdaftar di dashboard Facebook

Pengujian

Sebelum melakukan pengujian, tambahkan pengguna uji di Konsole Pengembang Facebook
- Pergi ke Peran > Pengguna Uji
- Buat pengguna uji
- Gunakan kreditensi ini untuk pengujian
Pengujian baik pada versi debug maupun release
- Pengujian versi debug dengan kunci hash debug
- Pengujian versi release dengan kunci hash release
- Pengujian pada baik emulator maupun perangkat fisik

Jangan lupa untuk menguji alur login yang lengkap, termasuk:

Pengujian login sukses
Pengujian pembatalan login
Pengelolaan kesalahan
Logout functionality

Jika Anda menggunakan Pengaturan Login Facebook untuk merencanakan autentikasi dan aliran akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli dalam Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-login Sosial untuk detail implementasi dalam @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Dua faktor autentikasi untuk detail implementasi di Dua faktor autentikasi.