Pular para o conteúdo principal
Recomendamos o Instagram Business Login como o método de autenticação preferido, pois fornece uma configuração mais simples e uma melhor experiência para o desenvolvedor. Por favor, consulte este guia para mais detalhes. Nós encerraremos o suporte para o Instagram via Facebook Login no futuro, a partir da v4.1 em diante.

Pré-requisitos

  1. Uma conta válida no Facebook.
  2. Uma página válida no Facebook.
  3. Uma conta profissional válida no Instagram.

Registrar um Aplicativo no Facebook

Para usar o Canal do Instagram, você deve criar um aplicativo do Facebook no portal de desenvolvedores. Você pode encontrar mais detalhes sobre como criar um aplicativo de desenvolvedor do Facebook aqui.
  1. Clique no botão “Create App” (Criar Aplicativo).
facebook_create_app
  1. Selecione a opção “Other” (Outro).
facebook_other_app
  1. Para o tipo de aplicativo, escolha “Business” (Empresa).
facebook_business
  1. Insira detalhes básicos como o nome do aplicativo e e-mail.
facebook_business_details Após registrar seu Aplicativo do Facebook, você precisará obter o App Id (ID do Aplicativo) e o App Secret (Chave Secreta do Aplicativo). Esses valores estarão disponíveis nas configurações do aplicativo e serão necessários ao configurar as variáveis de ambiente do AirysChat. facebook_app_id

Configurando as Variáveis de Ambiente no AirysChat

Configure as seguintes variáveis de ambiente do AirysChat com os valores que você obteve durante a configuração do aplicativo do Facebook. O IG_VERIFY_TOKEN deve ser uma string única e segura que você fornece ao configurar o aplicativo do Instagram. Reinicie o servidor do AirysChat após atualizar as variáveis de ambiente.
IG_VERIFY_TOKEN=
FB_APP_SECRET=
FB_APP_ID=

Configurar o Aplicativo do Facebook

  1. Nas configurações do aplicativo, adicione o “domínio de instalação do AirysChat” como o domínio do seu aplicativo. facebook_app_domain
  2. Adicione o produto “Instagram Graph API” através do painel do aplicativo do Facebook. instagram_product
  3. Vá para as configurações do aplicativo e selecione “Webhooks”. A partir daí, escolha Instagram e clique no botão “Subscribe to this object” (Inscrever-se neste objeto). instagram_webhooks
  4. Forneça a URL de Callback como {your_AirysChat_installation_url}/webhooks/instagram e o Token de verificação como IG_VERIFY_TOKEN da sua variável de ambiente. instagram_webhook_url

Conectar a página do facebook com a conta do instagram

  1. Vá para Páginas do Facebook, selecione sua página e abra as configurações.
facebook_page_settings
  1. Vá para “Linked accounts” (Contas vinculadas) e conecte sua conta profissional do instagram.
facebook_connect_instagram
  1. Selecione a opção “Business” (Empresa). instagram_connect_facebook
  2. Selecione a categoria da conta do instgram.
select_category_instagram
  1. Se tudo estiver certo, você verá a mensagem “Instagram connected” (Instagram conectado).
instagram_connect_success

Criar uma Caixa de Entrada do Instagram no AirysChat

  1. Acesse o AirysChat e crie uma caixa de entrada do Messenger. Por favor, consulte este guia para mais detalhes sobre como criar uma caixa de entrada do Messenger no AirysChat.
Dessa forma, sempre que você receber qualquer mensagem no Instagram, ela será redirecionada para a sua página do Facebook.

Testando o canal do Instagram

Até que o aplicativo seja aprovado para produção, o Facebook não enviará as novas mensagens no seu instagram para o AirysChat. Para testar as alterações até que o aplicativo seja aprovado para produção, siga os passos abaixo:
  1. Crie um aplicativo de Teste (Test app) para o seu aplicativo.
facebook_instagram_test
  1. Adicione o produto Instagram Graph API através do painel do aplicativo do Facebook. instagram_product
  2. Vá para as configurações do aplicativo e selecione “Webhooks”. A partir daí, escolha Instagram e clique no botão “Subscribe to this object” (Inscrever-se neste objeto). instagram_webhooks
  3. Forneça a URL de Callback como {your_airyschat_installation_url}/webhooks/instagram e o Token de verificação como IG_VERIFY_TOKEN da sua variável de ambiente. instagram_webhook_url
  4. Abra o aplicativo de teste e adicione um produto extra para o aplicativo de teste: Instagram Basic Display.
instagram_basic_display
  1. Nas configurações do aplicativo, adicione a plataforma “Website” e coloque a Site URL como a sua URL de instalação.
instagram_app_platform
  1. Acesse a seção do Instagram Basic Display e crie um novo aplicativo.
instagram_basic_display_settings
  1. Adicione Testadores do Instagram clicando no botão “Add or Remove Instagram Testers” (Adicionar ou Remover Testadores do Instagram).
instagram_testers
  1. Certifique-se de ter selecionado a função Instagram Tester ao criar um novo testador.
instagram_tester_list
  1. Clique em Edit subscriptions (Editar assinaturas) em Webhook > Instagram e inscreva-se nos seguintes campos:
message_reactions
messages
messaging_seen
instagram_subscription
Você deve realizar este passo tanto para aplicativos normais quanto de teste.
  1. Acesse o AirysChat e crie uma caixa de entrada do Messenger. Por favor, consulte este guia para mais detalhes sobre como criar uma caixa de entrada do Messenger no AirysChat.
  2. Envie uma mensagem para a conta do Instagram conectada usando a conta dos Testadores do Instagram, e ela deve aparecer no AirysChat agora.

Entrando em produção

Antes que você possa começar a usar o seu aplicativo do Facebook em produção, você precisará que ele seja verificado pelo Facebook. Consulte a documentação sobre como ter seu aplicativo verificado. Obtenha acesso avançado às permissões necessárias mencionadas abaixo para o seu aplicativo do Facebook:
instagram_manage_messages
instagram_basic
pages_show_list (Para listar as páginas a serem conectadas no airyschat)
pages_manage_metadata (Assinar webhooks em nome da página)
pages_messaging (Para enviar mensagens em nome da página)
business_management (Para acessar a foto do perfil e o nome das pessoas que contatam a página)
Se a versão do seu aplicativo do facebook for superior a 7.0, então você precisará de uma permissão extra de acordo com a política atualizada do facebook. Certifique-se de obter a permissão para:
pages_read_engagement

Desenvolvendo ou Testando a Integração do Facebook na sua máquina

Instale o ngrok na sua máquina. Isso será necessário já que as APIs do Facebook Messenger se comunicarão apenas via https.
brew cask install ngrok
Configure o ngrok para rotear para a porta do seu servidor Rails.
ngrok http 3000
Vá para a página de desenvolvedores do Facebook e navegue até as configurações do seu aplicativo. Adicione localhost como o domínio do seu aplicativo e adicione uma URL de política de privacidade nas configurações do aplicativo. Nas configurações Webhook > Instagram mostradas na imagem acima, configure a url de callback com o seguinte valor.
{your_ngrok_url}/webhooks/instagram
Atualize o token de verificação nas suas variáveis de ambiente do AirysChat. Você também terá que adicionar uma página do Facebook à sua seção Access Tokens na sua página de configurações do Messenger. Reinicie o servidor local do AirysChat. Então, sua configuração do AirysChat estará pronta para receber mensagens do Facebook.

Testar sua Configuração local

  1. Após terminar a configuração acima, crie uma caixa de entrada do Messenger após fazer login na sua Instalação do AirysChat.
  2. Envie uma mensagem para sua Página do Facebook a partir da sua conta do Instagram.
  3. Aguarde e confirme as requisições de entrada para o endpoint /webhooks/instagram na sua tela do ngrok.
  4. Você também pode verificar sua URL de callback clicando em Test para os campos do Instagram inscritos. Vá para o webhook do Instagram e clique em Test com v11.0 subscribe
Você só pode ter um aplicativo conectado ao AirysChat para o Instagram e Facebook combinados, pois a plataforma do Messenger é comum. Mas suponha que você queira ter canais separados para o Instagram e o Facebook. Nesse caso, você pode ter várias páginas do Facebook dentro do seu aplicativo que estariam conectadas a usuários do Facebook e usuários do Instagram separadamente e, em seguida, conectadas a diferentes caixas de entrada na página do AirysChat.

Lista de verificação (Checklist)

  1. Integre o aplicativo de teste do Facebook e envie uma mensagem a partir da conta do testador do Instagram para a conta conectada.
  2. Certifique-se de que a sua conta do Instagram é uma conta comercial (business account).
  3. Se a conta de teste do Instagram puder receber a mensagem e encaminhá-la para a URL do webhook, então envie-a para revisão.
  4. Se a conta de teste do Instagram não conseguir receber a mensagem e encaminhá-la para a URL do webhook:
    • Verifique os logs se você está recebendo a mensagem em {your-app-url}/webhooks/Instagram.
    • Se os logs estiverem presentes para o endpoint acima e houver algum erro, entre em contato conosco. Nós ajudaremos você.
    • Se os logs não estiverem presentes para o endpoint acima, abra um bug para a equipe do Facebook ou acompanhe este bug https://developers.facebook.com/support/bugs/468852858104743/
  5. Se você não estiver enfrentando o problema acima e conseguir receber a mensagem, mas a revisão não estiver passando, entre em contato com o revisor.
    • Quando o seu aplicativo for rejeitado, abra a submissão rejeitada. Você pode ver o ícone do messenger no canto inferior direito para obter suporte com a sua revisão rejeitada.
    • Você pode falar com a equipe de suporte e fazer suas perguntas sobre a submissão e o motivo da rejeição.
  6. Se o seu aplicativo de teste passou na revisão, ele está pronto para entrar em produção.
  7. Se você enfrentar um problema em produção em que não consiga receber as mensagens, entre em contato conosco com os logs de erro.