On 12.04.16 Facebook published an API for creating Messenger bots which can send and receive the messages of Messenger users. Here’s how you create a simple bot of your own. I’d like to show you how you can extend the possibilities of your bot by obtaining user permissions.
New options!
On the 1st of July, the API was extended with new options for users/Messenger bots interactions. These include:
- Get Started Button, which is used for server notifications about starting a conversation by the user. The user doesn’t need to write anything to get the bot’s message.
- Persistent menu that contains the main actions which the user can carry out during a conversation. It encourages the user to interact with the bot.
- Greeting text displayed before a conversation is started.
- Especially relevant: Account linking and unlinking that make a user’s linking to FB Page (more precisely, Messenger bot) possible. This mechanism can be used indirectly for getting user permissions.
By default, during a conversation with the user, we only get his/her public profile and zero permissions. Let’s say we wanted to get user likes or perform an action for him/her. We’re faced with the problem of permissions – and how to obtain them. In general, you can get certain permissions via user logging with a certain scope. The problem is that Messenger is not our application, so we can’t change user interactions or buttons. You can only send simple texts or structured messages with action buttons. Those can redirect to a web url or send back to a server event.
Currently we have two solutions. Both are created with user redirections to a specific url. Our first solution refers to redirecting the user only from your server, the second redirects from FB and your server.
The good way
Let’s start with the first one. I assume that you’ve already created your bot and you’re writing your app in Node.js. We need to do the following things:
- Create a new Facebook Passport strategy and add serialize and deserialize functions.
- Add Express middleware that will detect mobile browsers to your app.
- Register three new endpoints. One for starting the authentication process, another for Facebook callback and the last one for closing a new tab on desktop browser.
In closeWindow.html place script:
- Create a new template for the login message.
- Create an event handler for user messages. I also assumed that you already have some function for sending messages and receiving events.
After a successful authentication, the mobile (Messenger app) user is redirected to https://m.me/{pageId}. This opens Messenger in a Page’s thread. On the desktop side, the user’s new browser tab (which was used for authentication) is closed via redirection to HTML with a closing script. That’s assuming that user hasn’t opened any new tab. Now the user should be back to Facebook. After all these procedures we’ll have a user access token! It can be used for the next request (actions, getting info etc.).
Some improvements could be made here. For instance, redirecting mobile and desktop users to the url which FB recently provided (see here). Unfortunately, at this point (08.08.2016), this solution works only for desktop users. If you click this link on mobile operating systems, the system browser opens and it doesn’t go back to the Messenger app. This bug was reported to FB. They’ll try to make some deep linking for it.
The way that’s… a little worse
The second solution is connected to the recently-published Account linking. The difference is that in this case, we’re using a Messenger-embedded mechanism for linking the user to a FB Page. In our case, linking is not that important. What’s more interesting is the button that we can send to the user. Sending a button with account_link type allows us to open a pop-up on the desktop. On mobile, it opens a Messenger browser and shows it as Authentication view. In this view, you can do almost everything in a 5-minute window.
The flow is very similar to the previous one, but in this case, we’ve got actions before and after passport authentication. These are the steps:
- First, we send a Login button with type account_link to the user.
- The user then clicks the button – which contains callback endpoint with page id and sender id.
- FB attaches a url account linking token and redirect uri to our callback. The token is for getting the user’s PSID and the redirect uri is used for success and failure redirections.
- We then redirect a request to Passport authentication internally with token and redirect uri.
- After a successful Passport authentication, redirect the user to redirect uri with some random auth code (see Account Linking docs). It doesn’t really matter what we send (it could be used for secured authentication). Failure? We just redirect the user to redirect uri without auth code.
- The user should now be back in conversation.
I won’t put the code for second solution here, because the first one is better at the moment. It doesn’t use the pop-up, which might not be noticed by the desktop user. In the Messenger app, it works pretty well.
Messenger bots – conclusions
The Messenger platform is still new. It has many dysfunctions and bugs. However, in my opinion, in the near future many companies will use Messenger bots to improve their products’ user experience. In conclusion: I suggest you start building your bots now – to be one step ahead of the competition!
