Autentikasi Login Bisnis

Login Bisnis (biasanya dikenal sebagai Facebook Login) adalah titik masuk yang memungkinkan pemilik bisnis untuk menghubungkan bisnis mereka di platform Anda ke profil Facebook atau Instagram mereka, menggunakan tombol yang Anda tempatkan di situs Anda.

Login Bisnis ada di permukaan platform Anda (biasanya di panel admin internal di situs Anda) dan memicu alur Login Bisnis. Pemilik bisnis akan menggunakan alur ini untuk mengaitkan profil Facebook mereka dengan eksistensi bisnis mereka di situs Anda dan mengaktifkan fitur Meta Business Extension (MBE).

Solusi Bisnis Atas Nama/On-Behalf-Of (OBO) menghubungkan partner dan bisnis klien dibuat selama penginstalan MBE. Ini memungkinkan partner untuk mendapatkan token akses pengguna sistem MBE menggunakan kredensial pengguna sistem admin Pengelola Bisnis partner, selain kredensial admin Pengelola Bisnis klien (metode saat ini).

Persyaratan

Aplikasi Anda mungkin perlu menyelesaikan Tinjauan Aplikasi untuk mendapatkan izin berikut:

• catalog_management — Hanya jika aplikasi Anda akan mengaktifkan fitur Katalog. Atau, Anda dapat meminta izin ads_management jika Anda juga ingin mengelola iklan pelapak atas nama klien.
• business_creative_management — Jika aplikasi Anda adalah aplikasi kreatif yang menggunakan API tirai.

Menyiapkan Alur Login

Untuk menyiapkan alur login, tinjaulah opsi berikut:

• Muat Login Bisnis melalui URL—Direkomendasikan jika Anda tidak berniat untuk menggunakan Facebook SDK untuk JavaScript. Opsi ini mengharuskan Anda menautkan ke URL yang dibuat secara dinamis per bisnis dari sebuah tombol di situs Anda.

• Muat Login Bisnis melalui Facebook SDK—Facebook SDK menyediakan fungsi umum sisi klien. Kami merekomendasikan opsi ini untuk developer yang lebih terbiasa dengan cara ini karena cara ini menawarkan pendekatan yang lebih standar untuk meluncurkan alur yang sama.

Muat Login Bisnis melalui URL

Untuk memicu Login Bisnis melalui URL, tempatkan tombol yang membuka URL di situs Anda.

URL Login Bisnis harus memiliki parameter kueri ini:

Jika aplikasi Anda memerlukan URI pengalihan dinamis, gunakan parameter status untuk meneruskan kembali informasi dinamis ke URI pengalihan Anda setelah alur Login Bisnis selesai.

Dalam contoh di bawah, parameter kueri extras diformat dengan benar dan menentukan baik objek business_config maupun setup.

Contoh URL

https://facebook.com/dialog/oauth?
client_id=<FB_APP_ID>
&display=page
&redirect_uri="https://partner-site.com/redirectlanding"
&response_type=token
&scope=manage_business_extension
//   alternatively use catalog_management or ads_management
//   &scope=manage_business_extension,catalog_management,ads_management
&extras={
  "setup": {
    "external_business_id": "foo-123",
    "timezone": "America/Los_Angeles",
    "currency": "USD",
    "business_vertical": "APPOINTMENTS"
  },
  "business_config": {
    "business": {
      "name": "Foo Business"
    },
    "page_cta": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business",
      "below_button_text": "Powered by FBE Partner"
    },
    "page_card": {
      "enabled": true,
      "see_all_text": "See All",
      "see_all_url": "https://partner-site.com/foo-business",
      "cta_button_text": "Book"
    },
    "ig_cta": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business"
    },
    "messenger_menu": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business"
    },
    "thread_intent": {
      "enabled": true,
      "cta_button_url": "https://partner-site.com/foo-business"
    }
  },
  "repeat": false
}

Muat Login Bisnis melalui Facebook SDK

Langkah 1. Muat Facebook SDK untuk JavaScript

Anda dapat mengunduh SDK dan host di platform Anda atau menarik SDK yang di-hosting Facebook. Kami merekomendasikan penggunaan SDK yang di-hosting Facebook.

Langkah 2. Lampirkan fungsi fbAsyncInit ke objek Window untuk menyiapkan pengaturan SDK.

Sebelum memuat JavaScript SDK, fungsi fbAsyncInit harus ada di objek window. SDK akan memanggil fungsi untuk menyiapkan panggilan window.fbAsyncInit().

Pengaturan ini mencakup:

• appId: ID Aplikasi Facebook.
• cookie: Mengaktifkan cookie untuk mengizinkan server mengakses sesi ini.
• xfbml: Melakukan parse plugin sosial di halaman ini.
• version: Memberi tahu SDK versi Graph API mana yang akan digunakan (dokumen ini ditulis pada saat v10.0 adalah rilis terbaru)

Sebelum memuat JavaScript SDK, lampirkan fbAsyncInit ke objek window.

Langkah 3. Luncurkan MBE melalui fungsi FB.login() (juga dikenal sebagai "Login Bisnis").

Setelah memuat SDK dan memulai dengan informasi yang tepat, gunakan SDK untuk memuat FB.login(). Parameter penting untuk diteruskan ke fungsi FB.login() adalah:

1. Tanggapan fungsi panggilan balik
2. Objek untuk kolom scope dan extras

Lihat Objek dan Jenis Facebook Business Extension API untuk detailnya.

Contoh:

<script>
    window.fbAsyncInit = function() {
    //2. FB JavaScript SDK configuration and setup
        FB.init({
            appId      : '<app_id>', // FB App ID
            cookie     : true,  // enable cookies to allow the server to access the session
            xfbml      : true,  // parse social plugins on this page
            version    : 'v4.0' // uses graph api version v4.0
        });
    };

    //1. Load the JavaScript SDK asynchronously
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

     //3. Facebook login with JavaScript SDK
    function launchFBE() {
        FB.login(function (response) {
            if (response.authResponse) {
                // returns a User Access Token with scopes requested
                const accessToken = response.authResponse.accessToken;
                const message = {
                    'success':true,
                    'access_token':accessToken,
                };
                // store access token for later  
            } else {
              console.log('User cancelled login or did not fully authorize.');
            }
        }, {
            scope: 'catalog_management,manage_business_extension',
          // refer to the extras object table for details
            extras: {
                "setup":{
                  "external_business_id":"<external_business_id>",
                  "timezone":"America\/Los_Angeles",
                  "currency":"USD",
                  "business_vertical":"ECOMMERCE"
                },
                "business_config":{
                  "business":{
                     "name":"<business_name>"
                  },
                  "ig_cta": {
                    "enabled": true,
                    "cta_button_text": "Book Now",
                    "cta_button_url": "https://partner-site.com/foo-business"
                  }
                },
                "repeat":false
            }
        });
    }
</script>

Langkah 4. Buat tombol atau tautan untuk meluncurkan MBE.

Untuk memuat layar, tambahkan tombol atau tautkan fungsi onClick yang memanggil launchFBE():

<button onclick="launchFBE()"> Launch FBE Workflow </button>

Perangkat Seluler

Untuk penerapan MBE Seluler, lihat Dokumentasi seluler kami.

Pelajari Selengkapnya

• Cara melakukan integrasi Aplikasi Bisnis
• Pelajari tentang Facebook Login
• Lihat Objek dan Jenis MBE API
• Cari tahu selengkapnya tentang Tinjauan Aplikasi dan izin
• Cara menghapus penginstalan MBE