Autenticación del inicio de sesión empresarial

El inicio de sesión empresarial (comúnmente conocido como inicio de sesión con Facebook) es un punto de entrada que permite a los propietarios de empresas conectar sus empresas en tu plataforma con sus perfiles de Facebook o Instagram por medio de un botón que colocas en tu sitio.

La opción de inicio de sesión empresarial reside en la superficie de tu plataforma (normalmente en una ventana de administración interna en el sitio) y activa el proceso de inicio de sesión empresarial. Los propietarios de empresas pueden utilizar este proceso para asociar sus perfiles de Facebook a su presencia del negocio en tu sitio y para habilitar las funciones de la extensión de Facebook para empresas (FBE).

Durante la instalación de FBE, se crea una solución empresarial que permite actuar en nombre de otra empresa (OBO) que conecta las empresas del socio y el cliente. Permite al socio obtener el identificador de acceso del usuario del sistema de FBE mediante la credencial de un usuario del sistema de administración del Business Manager del socio, además de la credencial del administrador del Business Manager del cliente (método actual).

Requisitos

Es posible que tu aplicación tenga que completar la revisión de la aplicación para obtener los siguientes permisos:

• catalog_management: solo si la aplicación activará las funciones del catálogo. Como alternativa, puedes solicitar el permiso ads_management si también quieres administrar los anuncios de los comerciantes en nombre del cliente.
• business_creative_management: si tu aplicación es una aplicación de contenido que usa la API de Draper.

Configurar el proceso de inicio de sesión

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

• Cargar el inicio de sesión empresarial mediante la URL: opción recomendada si no tienes previsto utilizar el SDK de Facebook para JavaScript. Esta opción requiere que establezcas un enlace a una URL generada de forma dinámica por empresa mediante un botón en tu sitio.

• Cargar el inicio de sesión empresarial mediante el SDK de Facebook: el SDK de Facebook proporciona funciones de cliente comunes. Esta opción se recomienda para desarrolladores que están más familiarizados con ella, ya que ofrece un enfoque más estandarizado para iniciar el mismo proceso.

Cargar el inicio de sesión empresarial mediante la URL

Para activar el inicio de sesión empresarial a través de la URL, coloca un botón en el sitio que abra una URL.

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

Si tu aplicación requiere URI de redireccionamiento dinámicos, utiliza el parámetro de estado para devolver la información dinámica al URI de redireccionamiento cuando se complete el proceso de inicio de sesión empresarial.

En el ejemplo siguiente, el parámetro de consulta extras está formateado correctamente y especifica ambos 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
}

Cargar el inicio de sesión empresarial mediante el SDK de Facebook

Paso 1. Cargar el SDK de Facebook para JavaScript

Puedes descargar el SDK y el organizador en tu plataforma o bajar el SDK hospedado por Facebook. Se recomienda utilizar el SDK hospedado por Facebook.

Paso 2. Adjunta la función fbAsyncInit al objeto Window para configurar el SDK.

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

La configuración incluye los elementos siguientes:

• appId: identificador de la aplicación de Facebook.
• cookie: activa las cookies para que el servidor pueda acceder a la sesión.
• xfbml: analiza los plugins sociales en esta página.
• version: indica al SDK la versión de la API Graph que debe utilizar (en el momento de redactar este documento, la versión 10.0 era la más reciente).

Antes de cargar el SDK para JavaScript, adjunta la función fbAsyncInit al objeto window.

Paso 3. Inicia FBE a través de la función FB.login() (también conocida como "inicio de sesión empresarial").

Después de cargar el SDK y de inicializar la información correcta, utiliza el SDK para cargar la función FB.login(). Los parámetros importantes que se deben pasar a 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 Tipos y objetos de la API de la extensión de Facebook para empresas 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 un enlace para iniciar FBE.

Para cargar la pantalla, añade un botón o una función de enlace onClick que llame a launchFBE():

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

Móvil

Para obtener información sobre la implementación de FBE para móviles, consulta nuestra documentación para móviles.

Más información

• Cómo realizar una integración de aplicaciones empresariales
• Obtener información sobre el inicio de sesión con Facebook
• Ver tipos y objetos de la API de FBE
• Obtener más información sobre la revisión de la aplicación y los permisos
• Cómo desinstalar FBE