How do I implement Facebook login in Messenger browser (web-view)?

How do I implement Facebook login in Messenger browser (web-view)?

There are many scenarios in Facebook Messenger that require us to create an in-app web-view. One of them is an account linking with a Facebook login. Some clients rely heavily on a user's Facebook login to identify the user's account.

However, since Facebook Messenger will block any pop-up window that appear within the in-app web-view, the login button provided by Facebook Javascript SDK on the web-view will not work in this situation.

To resolve this, we suggest you manually create a login flow for users on that landing page.

  1. Go to Facebook App Dashboard. Under "Products", choose Facebook Login > Settings.
  2. Under "Client OAuth Settings", switch on an option called Embedded Browser OAuth Login.
  3. Add your custom redirect URL(s) under "Valid OAuth Redirect URIs".

Custom Redirect URL(s) Configuration
  1. Follow the official Facebook guide to set up a Facebook login by Redirect URL.

    • Related Articles

    • How can I set up the persistent menu?

      You may set up the persistent menu under the Platform section in each channel. Please refer to our documentation for details. Please note that only Web Chat and Facebook Messenger support the persistent menu.
    • How to set up a Facebook Chatbot?

      Our Standard Procedure Documentation provides step-by-step guidelines on how to build your first chatbot on Facebook. It will also highlight the tips you should pay attention to during your chatbot-building journey.
    • How to set up Click-to Messenger Ad to my Facebook Messenger chatbot?

      An impactful chatbot solution not only creates an amazing chatbot but also makes it viral. Apart from existing users, what tools can you use to bring new users to your bot? There’s more than one way to do it in the market, but running ...
    • How do I add Facebook Messenger to my website?

      Please follow the below steps to add a Facebook Messenger plugin to your website: 1. Go to your page on Facebook 2. Click Settings 3. Click Messaging 4. Click "Get Started" in Add Messenger to Your Website 5. Follow the instruction to design the ...
    • Can we change the UI (User Interface) of Messenger plugin?

      No, you cannot change the UI or the icon for the Messenger plugin. Please refer to the Facebook Documentation on the customization you could make for the Messenger plugin (i.e. change the color theme).