Autenticazione con Business Login

Business Login (comunemente noto come Facebook Login) è un punto di ingresso che consente ai titolari di azienda di collegare la propria attività sulla tua piattaforma ai loro profili Facebook o Instagram, utilizzando un pulsante che inserisci nel tuo sito.

Business Login è presente sulla tua piattaforma (di solito in un pannello di amministrazione interno sul tuo sito) e attiva il flusso di Business Login. I titolari di azienda possono utilizzare questo flusso di accesso per associare i rispettivi profili Facebook alla propria presenza professionale sul tuo sito e quindi abilitare le funzioni di Facebook Business Extension (FBE).

Durante l'installazione di FBE, viene creata una soluzione Business On-Behalf-Of (OBO) per la connessione dei Business Manager di partner e cliente. Questo consente al partner di ottenere il token d'accesso dell'utente di sistema per FBE usando le credenziali di un utente di sistema amministratore del Business Manager del partner, in aggiunta alle credenziali dell'amministratore del Business Manager del cliente (il metodo corrente).

Requisiti

La tua app potrebbe dover completare un'Analisi dell'app per ottenere le seguenti autorizzazioni:

• catalog_management: solo se la tua app abiliterà le funzioni dei cataloghi. In alternativa, puoi richiedere l'autorizzazione ads_management se desideri anche gestire le inserzioni dei venditori per conto del cliente.
• business_creative_management: se la tua app è un'app creativa che utilizza l'API Draper.

Configurazione del flusso di accesso

Per configurare il flusso di accesso, considera queste opzioni:

• Caricare Business Login tramite URL: consigliato se non intendi utilizzare l'SDK JavaScript di Facebook. Questa opzione richiede il collegamento a un URL generato dinamicamente per azienda da un pulsante sul tuo sito.

• Caricare Business Login tramite l'SDK di Facebook: l'SDK di Facebook fornisce una funzionalità comune lato client. Consigliamo questa opzione agli sviluppatori che ne hanno una conoscenza approfondita in quanto offre un approccio più standardizzato all'avvio dello stesso flusso.

Caricamento di Business Login tramite URL

Per attivare Business Login tramite URL, inserisci nel tuo sito un pulsante che apre un URL.

L'URL di Business Login deve avere questi parametri di query:

Se la tua app richiede URI di reindirizzamento dinamici, usa il parametro di stato per restituire le informazioni dinamiche all'URI di reindirizzamento al termine del flusso di Business Login.

Nell'esempio seguente, il parametro di query extras è formattato correttamente e specifica entrambi gli oggetti business_config e setup.

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

Caricamento di Business Login tramite l'SDK di Facebook

Passaggio 1. Caricare l'SDK JavaScript di Facebook

Puoi scaricare l'SDK e l'host sulla tua piattaforma o scaricare l'SDK ospitato da Facebook. Ti consigliamo di utilizzare l'SDK ospitato da Facebook.

Passaggio 2. Allega la funzione fbAsyncInit all'oggetto Window per configurare le impostazioni dell'SDK.

Prima di caricare l'SDK JavaScript, la funzione fbAsyncInit deve esistere nell'oggetto window. L'SDK chiamerà la funzione per configurare la chiamata window.fbAsyncInit() corretta.

Questa configurazione include:

• appId: ID app Facebook.
• cookie: abilita i cookie per consentire al server di accedere a questa sessione.
• xfbml: analizza i plug-in social sulla Pagina.
• version: indica all'SDK quale versione dell'API Graph utilizzare (questo documento è stato scritto quando la v10.0 era la versione più recente)

Prima di caricare l'SDK JavaScript, allega fbAsyncInit all'oggetto window.

Passaggio 3. Avvia FBE tramite la funzione FB.login() (nota anche come "Business Login").

Dopo aver caricato l'SDK ed eseguito l'inizializzazione con le informazioni corrette, utilizza l'SDK per caricare FB.login(). I parametri importanti da passare alla funzione FB.login() sono:

1. Funzione di callback di risposta
2. Oggetto per il campo scope e extras

Consulta Oggetti e tipi dell'API Facebook Business Extension per maggiori dettagli.

Esempio:

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

Passaggio 4. Creare un pulsante o un link per avviare FBE.

Per caricare la schermata, aggiungi un pulsante o una funzione di collegamento onClick che chiami launchFBE():

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

Mobile

Per l'implementazione di FBE Mobile, consulta la nostra documentazione sui dispositivi mobili.

Ulteriori informazioni

• Come realizzare un'integrazione di app aziendali
• Scopri di più su Facebook Login
• Visualizza Oggetti e tipi di API FBE
• Scopri di più su Analisi dell'app e autorizzazioni
• Come disinstallare FBE