Autenticação do Login de empresa

Login de empresa (conhecido como Login do Facebook) é um ponto de entrada que permite que empresários conectem as empresas que estão na sua plataforma aos próprios perfis do Facebook ou do Instagram usando um botão que você coloca no seu site.

O Login de empresa fica ativo na superfície da sua plataforma (normalmente em um painel administrativo interno no seu site) e dispara o fluxo Login de empresa. Os empresários podem usar esse fluxo para associar os perfis do Facebook deles à presença empresarial no seu site e, assim, habilitar os recursos da Extensão do Facebook para Empresas (FBE).

A solução Empresa em nome de (OBO) que conecta as empresas do parceiro e do cliente é criada durante a instalação da FBE. Ela permite que o parceiro receba o token de acesso do usuário do sistema FBE usando as credenciais do usuário do sistema de administração do Gerenciador de Negócios do parceiro, além das credenciais de administração do Gerenciador de Negócios do cliente (o método atual).

Requisitos

O app pode precisar passar pela análise para receber as seguintes permissões:

• catalog_management: somente se o app for habilitar os recursos de catálogo. Como alternativa, é possível solicitar a permissão ads_management se você também quiser gerenciar anúncios de comerciantes em nome do cliente.
• business_creative_management: caso o app seja de criativo e use a API de Draper.

Configurar o fluxo de login

Para configurar o fluxo de login, veja estas opções:

• Carregar o Login de empresa via URL: recomendado se você não pretende usar o SDK do Facebook para JavaScript. Essa opção requer que você inclua um link para uma URL gerada dinamicamente para cada empresa usando um botão no seu site.

• Carregar o Login de empresa via SDK do Facebook: o SDK do Facebook fornece uma funcionalidade comum no lado do cliente. Recomendamos essa opção para desenvolvedores que estejam familiarizados com ela, pois é uma abordagem mais padronizada à inicialização do mesmo fluxo.

Carregar o Login de empresa via URL

Para disparar o Login de empresa via URL, coloque um botão no seu site que abra uma URL.

A URL do Login de empresa precisa seguir estes parâmetros de consulta:

Se o app exigir URIs de redirecionamento dinâmicos, use o parâmetro de estado para retornar a informação dinâmica ao URI de redirecionamento após a conclusão do fluxo do Login de empresa.

No exemplo abaixo, o parâmetro de consulta extras foi formatado corretamente e especifica os objetos business_config e setup.

Exemplo de 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
}

Carregar o Login de empresa via SDK do Facebook

Etapa 1. Carregue o SDK do Facebook para JavaScript

Baixe o SDK e hospede-o na sua plataforma ou use o SDK hospedado no Facebook. Recomendamos a utilização do SDK hospedado no Facebook.

Etapa 2. Anexe a função fbAsyncInit ao objeto Window para ajustar as configurações do SDK.

Antes de carregar o SDK do JavaScript, a função fbAsyncInit precisa existir no objeto window. O SDK chamará a função para configurar a window.fbAsyncInit() correta.

Essa configuração inclui:

• appId: ID do app do Facebook.
• cookie: habilita cookies para permitir que o servidor acesse esta sessão.
• xfbml: analisa os plugins sociais na página.
• version: informa ao SDK qual versão da Graph API usar (quando o documento foi escrito, a versão mais recente era a 10.0)

Antes de carregar o SDK do JavaScript, anexe fbAsyncInit ao objeto window.

Etapa 3. Inicie a FBE pela função FB.login() (também conhecida como "Login de empresa").

Depois de carregar o SDK e inicializar com as informações corretas, use o SDK para carregar FB.login(). Os parâmetros importantes que devem ser passados para a função FB.login() são:

1. Função de retorno de chamada de resposta
2. Objeto para os campos scope e extras

Consulte Objetos e tipos de API da Extensão do Facebook para Empresas para ver detalhes.

Exemplo:

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

Etapa 4. Crie um botão ou link para iniciar a FBE.

Para carregar a tela, adicione um botão ou link à função onClick que chame launchFBE():

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

Dispositivos móveis

Para a implementação da FBE em dispositivos móveis, consulte a documentação sobre Dispositivos móveis.

Saiba mais

• Como executar uma integração de Apps de Negócios
• Saiba mais sobre o Login do Facebook
• Confira Objetos e tipos da API da FBE
• Saiba mais sobre análise do app e permissões
• Desinstalar a FBE 2.0 da sua plataforma