Autenticación de inicio de sesión comercial

El inicio de sesión comercial (comúnmente conocido como inicio de sesión con Facebook) es un punto de entrada que permite a los propietarios de empresas conectarlas en tu plataforma con sus perfiles de Facebook o Instagram usando un botón que dispongas en tu sitio.

El inicio de sesión comercial se encuentra en la superficie de tu plataforma (generalmente en un panel de administrador interno de tu sitio) y activa el flujo de inicio de sesión del negocio. Los propietarios de empresas pueden usar este flujo a fin de asociar sus perfiles de Facebook con la presencia de la empresa en tu sitio y, así, activar las funciones de la extensión Facebook Business.

Se crea una solución de representación (OBO) que conecta los negocios del socio y el cliente durante la instalación de la FBE. Permite que el socio obtenga el token de acceso al sistema de la FBE usando la credencial del usuario del sistema del administrador comercial del socio, además de la credencial del administrador comercial del cliente (el método actual).

Requisitos

Tu app debe completar la revisión de apps y recibir los siguientes permisos:

• catalog_management: solo si la app activará las funciones de catálogo. Como alternativa, puedes solicitar el permiso ads_management si solo deseas administrar anuncios de comerciantes en nombre del cliente.
• business_creative_management: en caso de que tu app sea una app de contenido que utiliza la API Draper.

Configuración del proceso de inicio de sesión

Para configurar el proceso de inicio de sesión, revisa estas opciones:

• Carga del inicio de sesión comercial mediante URL: recomendado solo si no piensas usar el SDK de Facebook para JavaScript. Esta opción requiere que te vincules con una URL generada de manera dinámica para cada empresa desde un botón en tu sitio.

• Carga del inicio de sesión comercial mediante el SDK de Facebook: el SDK de Facebook proporciona una funcionalidad común del lado del cliente. Recomendamos esta opción a los desarrolladores que estén más familiarizados con ella, ya que brinda un enfoque más estandarizado para iniciar el mismo proceso.

Carga del inicio de sesión comercial mediante URL

Para disparar el inicio de sesión comercial mediante URL, coloca un botón en tu sitio que abra una URL.

La URL de inicio de sesión comercial debe tener los siguientes parámetros de consulta:

Si tu app requiere URI de redireccionamiento dinámico, usa el parámetro de estado para devolver la información dinámica al URI de redireccionamiento cuando el proceso de inicio de sesión comercial haya terminado.

En el ejemplo de abajo, el parámetro de consulta extras tiene el formato correcto y define los objetos business_config y setup.

URL de ejemplo

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
}

Carga del inicio de sesión comercial mediante el SDK de Facebook

Paso 1: Carga el SDK de Facebook para JavaScript.

Puedes descargar el SDK y alojarlo en tu plataforma, o extraer el SDK alojado por Facebook. Recomendamos que uses el SDK alojado por Facebook.

Paso 2: Adjunta la función fbAsyncInit al objeto Window para configurar los ajustes de SDK.

Para poder cargar el SDK para JavaScript, debe existir la función fbAsyncInit en el objeto window. El SDK llamará a la función para configurar la llamada window.fbAsyncInit() adecuada.

Esta configuración incluye lo siguiente:

• appId: identificador de la app de Facebook.
• cookie: activa las cookies para permitir que el servidor acceda a la sesión.
• xfbml: analiza los plugins sociales en esta página.
• version: le dice al SDK qué versión de API Graph usar (este documento se redactó cuando la versión 6.0 era la más reciente).

Antes de cargar el SDK para JavaScript, adjunta el fbAsyncInit al objeto window.

Paso 3: Inicia la FBE mediante la función FB.login() (también llamada "Inicio de sesión comercial").

Después de cargar el SDK y de iniciarlo con la información adecuada, usa el SDK para cargar FB.login(). Los parámetros importantes que deben completarse para la función FB.login() son los siguientes:

1. Función de devolución de llamada de respuesta
2. Objeto para los campos scope y extras

Consulta Objetos de la API de la extensión Facebook Business y tipos para obtener más información.

Ejemplo:

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

Paso 4: Crea un botón o enlace para iniciar la FBE.

Para cargar la pantalla, agrega un botón o vincula la función onClick que llama a launchFBE():

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

Dispositivo móvil

Para la implementación de FBE en dispositivos móviles, consulta nuestra documentación sobre celulares.

Más información

• Cómo hacer una integración de apps comerciales
• Más información sobre el inicio de sesión con Facebook
• Ver objetos y tipos de API de la FBE
• Más información sobre la revisión de apps y los permisos
• Cómo desinstalar la FBE