Vinculação de Conta (Account Linking) no Facebook Messenger

Os bots estão em ascendência no mercado. Com isso, muitas empresas estão começando a fazer uso dessa tecnologia para se relacionar com seus clientes. Porém, para um melhor relacionamento, é necessário que o bot identifique o usuário.  A partir dessa identificação, a interação torna-se personalizada. Mas como fazer com que o bot, desenvolvido para o Facebook Messenger, obtenha os dados do usuário e inicie uma sessão com o sistema da sua empresa? Para responder a essa pergunta, o Facebook disponibilizou, na API do Messenger, uma funcionalidade chamada Account Linking, em português, Vinculação de Conta.

Neste post, eu irei mostrar como implementar a Vinculação de Conta em um bot para o Facebook Messenger. Vou utilizar a linguagem PHP nessa implementação. Além disso, como eu já ensinei a criar um bot para o Messenger, não vou entrar nesses detalhes e irei direto para a implementação da vinculação de conta. Caso você queira ver o passo a passo da criação de um bot para o Messenger acesse este post aqui do blog.

Are you ready? kkkk

Fluxo da Vinculação de Conta

Antes de escrevermos nossa primeira linha de código (kkkk xD), para que você compreenda melhor o funcionamento da Vinculação de Conta, eu retirei de uma postagem do blog do Ville Rantala a seguinte imagem:

A imagem acima representa o fluxo das mensagens trocadas durante a execução da Vinculação de Conta. Assim, os tópicos a seguir da explicação da implementação serão numerados e baseados em cada uma das nove etapas mostradas na imagem.

1- Inicialização da Vinculação de Conta

Para que a vinculação de conta aconteça é necessário que o usuário dispare esse evento. Sendo assim, no nosso caso, esse evento será disparado quando o usuário digitar a palavra “login”. Neste link, você pode ver o trecho de código que faz a verificação da mensagem.

2- Impressão do Botão de Login

Quando o usuário enviar o comando “login”, o bot, ao recebê-lo, deverá responder com o botão de login. A mensagem a ser enviada para gerar o botão de login deve ter o seguinte formato:

No código acima você pode customizar os atributos title e image_url. No atributo id será o id do usuário e no atributo url você deve por a URL do seu sistema para qual o bot irá redirecionar quando o usuário clicar no botão de login.
Neste link, você pode ver a linha do código na qual essa mensagem é montada.
Após customizada, a mensagem deve ser enviada via POST para: https://graph.facebook.com/v2.6/me/messages?access_token=PAGE_ACCESS_TOKEN.
Se o procedimento for feito corretamente, o usuário receberá uma mensagem contendo o botão de login como a da foto abaixo:

3- Requisição da Vinculação de Conta

Quando usuário clicar no botão “Login”, ele será redirecionado para a URL que você inseriu no comando da sessão anterior.

4- Seu Website Exibido no Messenger

Nesta etapa o bot exibe a tela do seu site para que o usuário possa realizar o login. Como esse tutorial é apenas um exemplo de implementação, eu fiz uma tela de login simples que solicita usuário e senha, como mostra o código abaixo:

Ao redirecionar para a URL do seu sistema, o Facebook te enviará dois parâmetros: redirect_uri e account_linking_token. Esses parâmetros serão usados após a validação da autenticação do usuário no seu sistema.

5-Executar a Autenticação

Quando o usuário digitar os dados e clicar em “Enviar”, você deve gerar para ele um authorization_code. Esse authorization_code deve ser único para cada usuário e serve para confirmar que a vinculação foi realizada com êxito.

Neste exemplo, eu optei por fazer uma validação simples do login, onde eu testo se o usuário e senha são iguais a palavra “teste”, como mostra o código abaixo:

6-Redireciona ao Endpoint Manipulado pelo Bot

No código da sessão anterior, caso os dados estejam corretos, o sistema redireciona o usuário para a URL contida no parâmetro redirect_uri concatenada com o authorization_code. No caso dos dados estarem incorretos, o sistema deve redirecionar para a redirect_uri sem passar nenhum parâmetro.

7-Facebook Completa a Autenticação

Neste passo, o Facebook recebe a requisição e valida o account_linking_token. É importante esclarecer que o account_linking_token é enviado junto com o redirect_uri da fase anterior, ou seja, você não precisa anexá-lo.
Se tudo ocorre da forma correta, a imagem a seguir será exibida:

8-Retorno da Chamada do Vinculação de Conta

Ao final do processo de validação do account_linking_token, o Facebook irá redirecionar o usuário para o Webhook do bot junto com a seguinte mensagem em JSON:

O campo status da mensagem estará setado com linked caso toda a autenticação e validação tenha sido feita com sucesso. Na mensagem também é possível obter o authorization_code.

9-Informando o Login ao Usuário

Se o usuário tiver logado com êxito, o bot deve informá-lo, não é mesmo? xD
Nestas linhas do código do bot, caso o status seja positivo, o bot envia a mensagem “Login feito com sucesso” ao usuário.

No GIF abaixo você pode ver o bot que acabamos de desenvolver neste post funcionando.

O código fonte completo que utilizei neste post pode ser visto neste link: Exemplo Vinculação de Conta

Para conversar com o bot acesse: http://m.me/vinculacaobot

Bom, é isso! O processo de vinculação de conta do Facebook Messenger é cheio de etapas e pode confundir um pouco. Não cobri toda a documentação do Facebook neste post, mas ele já serve como introdução ao tema.

Qualquer dúvida, é só falar.

Um Feliz Natal atrasado (kkkk) e um Ano Novo de muitas alegrias!