Whitelisting Domains for Facebook Send API

(John Jackson) #1

Note that these instructions only work for Messenger bots set up with both an app and a page (the advanced method). It’s not currently possible to get a page access token for a bot set up with only a page.

A customer has run into an issue using the Make a Custom Request action where Facebook expects the domains for images/videos to be whitelisted. Otherwise the request results in this error:

(#100) The URL provided is not whitelisted for messenger extensions

It’s not difficult to do but needs a few steps. I thought it would be useful to explain here (it’s not as bad as it looks because I’ve included every tiny step!).

  1. Head over to https://developers.facebook.com/tools/explorer to get an access token for your page.
  2. On the right hand side of the explorer you’ll see an Application drop down box. Choose the same app you selected in Flow XO when you set up the bot.
  3. Accept any authorization requests that pop-up.
  4. Once that’s done, click the Get Token button. Select your page name under Page Access Tokens.
  5. You’ll now have your page access token in the long field at the top, copy/save it.
  6. Now you need to fire off a request to Facebook to send the domains you want to whitelist. You can do this in Flow XO.
  7. Create a new flow with any trigger you want.
  8. Add a Webhook & HTTP > Make a HTTP Request action.
  9. The URL should be https://graph.facebook.com/v2.6/me/thread_settings?access_token=, adding your access token from the previous steps at the end.
  10. Make the Method “POST” and the Content Type “Raw Body”.
  11. In the Body field, paste in the request (see below).
  12. Add a Header with “Content-Type” on the left and “application/json” on the right.
  13. Trigger the flow, then check the log to make sure the response was a 200 status code and the message indicated your domains were whitelisted.

Here’s the request you need for step 11. Of course you need to replace the domains with your own (add up to 10):

{
  "setting_type": "domain_whitelisting",
  "whitelisted_domains": [
    "https://petersfancyapparel.com",
    "http://example.com"
  ],
  "domain_action_type": "add"
}

Your webhook settings should look like this:

download (2).png1236×908 63.9 KB

You only need to do this once (per page), then your requests should work OK from then on.

How to Use the GitHub Webview repo code in flowxo using webhook
How to Use the GitHub Webview repo code in flowxo using webhook
(Anish Duggal) #2

@johnjackson
Thank you, thank you, thank you.

Will test and update shortly.

1 Like
(Anish Duggal) #3

@johnjackson

Hi John,

So I tried this and something went wrong.

I’m using a Bot–>New Message–>Webhook HTTP request the webhook is set up as below:

Webhook URL
https://graph.facebook.com/v2.8/me/thread_settings?access_token=[my page access token] (I have it just didn’t want to share in public)

HTTP Method
POST
Content Type
Raw Body
Body
{
“setting_type” : “domain_whitelisting”,
“whitelisted_domains” : [
“https://reachnexus.com”,
],
“domain_action_type”: “add”
}
Headers
Content-Type: application/json

I get this error:

Status Code
403
Body
{“error”:{“message”:"(#230) Requires pages_messaging permission to manage the object",“type”:“OAuthException”,“code”:230,“fbtrace_id”:“Fm1ipqkc/nX”}}
Data
{
“error”: {
“message”: “(#230) Requires pages_messaging permission to manage the object”,
“type”: “OAuthException”,
“code”: 230,
“fbtrace_id”: “Fm1ipqkc/nX”
}
}

Thanks for your help in advance.

(Anish Duggal) #4

@johnjackson

Ok so here is something interesting.

My first bot on your platform was made thru creating an app on Facebook.

This was before FlowXo had the capability to connect directly to a page.

My second bot was created directly to the page at which time i deleted from FlowXo my first bot.

So using your above step by step guide with the graph.facebook.com token for page access I kept getting the 403 Status Code and the #230 error.

I then chose my first app based bot in the top right of the graph.facebook.com explorer and generated a page access token after selecting that bot. When using this token everything worked perfectly fine and I received the 200 Status Code.

It may be that page_messaging_permissions are only available to registered app bots and not to bots connected directly to pages. If so this is something that can be added to the above step by step guide to make it easier for others. If I’m wrong about this and they should also work direct to page bots then please take a look and tell me what I’m doing wrong in my previous post.

Thank you for your amazing support.

(John Jackson) #5

This must be a problem with the access token. Go back to the test console,
and make sure you have the test console itself chosen as the app, and
choose the page that you’ve connected to Flow for the access token. Try
again with that?

(Anish Duggal) #6

@johnjackson

Sorry Test Console? Is this the graph.facebook.com explorer?

In there I get the below:

under Graph API Explorer drop down

Pasted image256×610 28.8 KB

And

or this:

Under my previouse App connected bot name.

Pasted image252×587 27.5 KB

I’m a bit confused. Thanks

(Nagesh) #7

Hi John,

So I tried this and something went wrong. Please help me on this…

This is my post body with content type as “text/plain”.

ReqUrl:

https://graph.facebook.com/v2.6/me/thread_settings?access_token={page_Access_token}

postbody:

{
“setting_type”: “domain_whitelisting”,
“whitelisted_domains”: [
“https://google.com”
],
“domain_action_type”: “add”
}

When i post this to FB Graph API, iam getting below response:

Response:
400 bad Request.
{
“error”: {
“message”: “(#100) The parameter setting_type is required”,
“type”: “OAuthException”,
“code”: 100,
“fbtrace_id”: “CaqLcENcZM/”
}
}

(Daniel Beckett) #8

Hi Nagesh,

Just a quick check, have you set your headers to have “Content-Type” on the left and “application/json” on the right?

(Rong Sen Ng) #9

I’m using v2.11 as of writing.
My code written in Node.js that works for the domain whitelisting API:

/** Import project dependencies */
import querystring from 'querystring';
import fetch from 'make-fetch-happen';

async function main() {
  try {
    const url = process.env.FB_GRAPH_URL;
    const params = querystring.stringify({
      access_token: process.env.FB_PAGE_ACCESS_TOKEN,
    });
    const fetchOpts = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        setting_type: 'domain_whitelisting',
        domain_action_type: 'add',
        whitelisted_domains: [
          process.env.APP_HOST || '',
          'https://www.messenger.com',
          'https://www.facebook.com',
        ],
      }),
    };
    const r = await fetch(`${url}/me/thread_settings?${params}`, fetchOpts);
    const d = await r.json();

    console.log('#', d);
  } catch (e) {
    throw e;
  }
}

main();
(Daniel Beckett) #10

Interesting solution there! :slight_smile:

Facebook have actually made this a bit easier (finally!) and you can whitelist domains directly from the page settings in the ‘Messenger platform’ section.

1 Like
(Danny Kater) #11

I can’t find the page settings in the ‘Messenger platform’ section daniel?

Could you provide a URL maybe? Or a screenshot?

EDIT: Found it, it’s in the settings of your Facebook Page > Messenger-platform > Whitelisted Domains