Authentification Business Login

Business Login (communément appelé Facebook Login) est un point d’entrée qui permet aux propriétaires d’entreprises de connecter leur activité sur votre plate-forme à leurs profils Facebook ou Instagram, à l’aide d’un bouton que vous placez sur votre site.

Business Login se trouve à la surface de votre plate-forme (généralement dans un panneau d’administration interne sur votre site) et déclenche le processus Business Login. Les propriétaires d’entreprise peuvent utiliser ce processus pour associer leurs profils Facebook à leur présence professionnelle sur votre site et activer les fonctionnalités de l’extension Facebook Business (FBE).

Une solution OBO (Business On-Behalf-Of) reliant les entreprises des partenaires et des clients est créée lors de l’installation de FBE. Elle permet au partenaire d’obtenir le token d’accès de l’utilisateur système de FBE à l’aide de l’identifiant de l’utilisateur système admin du Business Manager du partenaire, en plus de l’identifiant de l’admin du Business Manager du client (la méthode actuelle).

Conditions requises

Votre application doit peut-être faire l’objet d’un Contrôle app et obtenir les autorisations suivantes :

• catalog_management : uniquement si votre application exploite des fonctionnalités de catalogue. Vous pouvez aussi demander l’autorisation ads_management si vous voulez également gérer les publicités des commerçants pour le compte du ou de la client·e.
• business_creative_management : si votre application est une application de contenu publicitaire utilisant l’API Draper.

Configurer le processus de connexion

Pour configurer le processus de connexion, examinez les options suivantes :

• Charger Business Login via une URL : recommandé si vous n’envisagez pas d’utiliser le SDK JavaScript Facebook. Pour utiliser cette option, vous devez associer un bouton sur votre site à une adresse URL générée dynamiquement depuis chaque entreprise.

• Charger Business Login via le SDK Facebook : le SDK Facebook fournit des fonctionnalités côté client courantes. Nous recommandons cette option aux développeurs qui en connaissent bien le fonctionnement, car elle utilise une approche normalisée pour lancer le même processus.

Charger Business Login via une URL

Pour déclencher Business Login au moyen d’une URL, placez un bouton sur votre site qui permet d’ouvrir une URL.

L’URL de Business Login doit disposer des paramètres de requête suivants :

Si votre application nécessite des URI de redirection dynamique, utilisez le paramètre d’état pour transmettre les informations dynamiques à votre URI de redirection une fois le processus de Business Login terminé.

Dans l’exemple ci-dessous, le paramètre de requête extras est correctement formaté et spécifie à la fois les objets business_config et setup.

Exemple d’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
}

Charger Business Login via le SDK Facebook

Étape 1. Charger le SDK JavaScript Facebook

Vous pouvez télécharger le SDK et l’hôte sur votre plate-forme ou extraire le SDK hébergé par Facebook. Nous recommandons d’utiliser le SDK hébergé par Facebook.

Étape 2. Associer la fonction fbAsyncInit à l’objet Window pour configurer les paramètres du SDK.

Avant de charger le SDK JavaScript, la fonction fbAsyncInit doit exister sur l’objet window. Le SDK appelle alors la fonction permettant de configurer les paramètres corrects de la fonction window.fbAsyncInit().

Ces paramètres sont les suivants :

• appId : ID d’app Facebook.
• cookie : active les cookies pour permettre au serveur d’accéder à cette session.
• xfbml : analyse les plugins sociaux sur cette page.
• version : indique au SDK la version d’API Graph à utiliser (la version la plus récente au moment de la présente documentation était la v10.0)

Avant de charger le SDK JavaScript, associez fbAsyncInit à l’objet window.

Étape 3. Lancez FBE à l’aide de la fonction FB.login() (également connue sous le nom de « Business Login »).

Après avoir chargé le SDK et indiqué les informations de configuration correctes, utilisez le SDK pour charger FB.login(). Les paramètres importants à transmettre à la fonction FB.login() sont les suivants :

1. Fonction de rappel de la réponse
2. Objet pour les champs scope et extras

Consultez objets et types d’API de l’extension Facebook Business pour plus d’informations.

Exemple :

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

Étape 4. Créer un bouton ou un lien pour lancer FBE.

Pour charger l’écran, ajoutez un bouton ou un lien vers la fonction onClick qui appelle launchFBE() :

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

Mobile

Pour l’implémentation de FBE sur mobile, consultez notre documentation Mobile.

En savoir plus

• Comment effectuer une intégration de Business Apps
• En savoir plus sur Facebook Login
• Consultez Types et objets de l’API FBE
• En savoir plus sur le Contrôle app et les autorisations
• Comment désinstaller FBE