Skip to main content


Bartlomiej Pasik
Messenger bot

Get user permissions for Facebook Messenger bots

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.

messenger bots

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:

  1. First, we send a Login button with type account_link to the user.
  2. The user then clicks the button – which contains callback endpoint with page id and sender id.
  3. 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.
  4. We then redirect a request to Passport authentication internally with token and redirect uri.
  5. 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.
  6. 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 just starting out. 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!

Zapisz

Zapisz

Zapisz

Share:Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on Pinterest

  • Pm Rivière

    Hi, great tutorial!
    Are you planning to add the code get user to log in with the account link button? It’s actually much better on mobile as yyou don’t need to leave Messenger app!

    • Bartłomiej Pasik

      Unfortunately, we cannot use Account link button here, because app cannot obtain user’s FB permissions in this way.

  • Bartłomiej Pasik

    Unfortunately, we cannot use Account link button here, because app cannot obtain user’s FB permissions in this way.

  • Caim Astraea

    I wonder how did the Foxsy bot people did it ? It’s obviously not using a webview but some sort of callback.
    https://www.messenger.com/t/foxsybot
    Anyone have a clue ?

    • Wendy R

      I think I just figured this out. I think what Foxsy is serving to people is a simple URL log in button where the URL looks like this:
      https://www.facebook.com/v2.8/dialog/oauth?response_type=code&scope=&display=popup&redirect_uri=&client_id=

      Essentially what this is doing is opening a pop up window with a button to accept permissions then redirecting you back to the bot

      There’s a bit of explanation of the various parameters in the FB documentation: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow

      • Caim Astraea

        hmm interesting thanks for the input! I think I read this before but didn’t figure out what to put in the redirect_uri. So if I understand right the redirect uri is the messenger.com/t/something or the m.me link ? Not my express + facebook passport backend ?
        Would I have access to the user info this way inside the messenger bot after the user accepts? Would need to get either their email or the app_scoped_id to figure out if they are an existing user on another service.

        • Bartłomiej Pasik

          Once you aquire user fb permissions, you can make request from your app and get all info you want (limited to permissions).

          If it’s mobile device, you should redirect to messenger link. If it’s desktop, you should close dialog, because user probably is at facebook.com.

  • Caim Astraea

    I’m getting an error on the url 🙁 .addLoginButton(`http://127.0.0.1:3000/auth/facebook/test/${request.senderId}/?pageId=${request.recipientId}`).get()

    [Error: Valid URL is required for Login button] ?? What gives 🙁

    • Bartłomiej Pasik

      Probably https is needed and some external ip.

  • Caim Astraea

    req.session.sender = req.params.senderId; -> TypeError: Cannot set property ‘sender’ of undefined
    at router.get (/Volumes/External/chatbots/botly/app.js:84:22) am I missing some middleware here ? What is res.session ? Do I need this ? https://github.com/expressjs/session

Like what you see?

Get in touch! We'll respond quickly, and we'll keep your data confidential.