Posts tagged with facebook-graph-api

I've a login page where I provide external users with an option "Login Using Facebook". The Meta App has a type "Business" & using the product "Facebook Login For Business". I want to able to authenticate the users & then redirect them to "Facebook Messenger URL (https://m.me)". However, whenever I try to log in the user, the login pop-up window becomes a blank white screen after entering the user's credentials. I'm getting the below error when authenticating the user.

ErrorUtils caught an error: Minified invariant #21945;  Subsequent non-fatal errors won't be logged; see https://fburl.com/debugjs.

However, when I switch to the product "Facebook Login", I'm able to authenticate the external user just fine without any issue. So, my question is how can I authenticate external users when using "Facebook Login For Business" or is it even possible to authenticate external users when using "Facebook Login For Business"?

Blank screen & console error on user authentication

Here's my code so far:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Messenger | Demo</title>     <!-- Bootstrap CDN -->     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">     </script> </head> <body>     <div class="row justify-content-center my-5 py-5">         <div class="col-md-6 text-center">             <div class="fb-login-button" data-width="" data-size="large" data-button-type="" data-layout=""                 data-auto-logout-link="false" data-use-continue-as="true" onlogin="redirectToMessenger"></div>         </div>     </div>     <!-- Meta Scripts -->     <script>         function redirectToMessenger() {             FB.login(                 function(response) {                     if (response.status !== 'connected' || !response.authResponse) {                         console.log('User cancelled login or did not fully authorize.');                         return;                     }                     console.log('Welcome!  Fetching your information.... ');                     FB.api('/me', {                         fields: 'name, email'                     }, function(response) {                         console.log(response);                     });                     window.location = 'http://m.me/<id>';                 },                 {                     // scope:          "public_profile,email",                     // return_scopes:  true,                     // config_id:      "<config-id>"                 }             );         }         window.fbAsyncInit = function() {             FB.init({                 appId:      '<app-id>',                 cookie:     true,                 xfbml:      true,                 version:    'v19.0',             });         };     </script>     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script> </body> </html>

Recently I was exploring Graph APIs(https://developers.facebook.com/docs/graph-api/overview) offered by Meta, while checking through couple of APIs like /message-id and /conversation-id for whatsapp message which I sent to one of my contact number (this contact number I am using as customer number) this APIs are working, instead they are showing error message as follows 'Unsupported get request. Object with ID '{message-id goes here}' does not exist'.

Likewise I am getting same error while trying to fetch details about {conversation-id} which I fetched from webhook, which I integrated to receive notifications about message which I will receive from customer.

Also, a point to note is that.. while reading through Graph API documentation for /messages as well as /conversation APIs is says 'An individual message in a Messenger or Instagram Messaging conversation.' and 'A Messenger conversation between a person and a Facebook Page or an Instagram Professional Account.' does this means this Graph APIs is only accessing for data which is shared over facebook page/messages and/or instagram messages.

What I am trying to acheive using Graph API is to get conversation details for whatsapp business API happened between customer and business.

Please help clear my above concerns.

Thanks, Abhishek

I am currently facing an issue with the Meta Cloud API and WhatsApp Business API and I'm seeking some guidance.

Issue Description:

I have a WhatsApp chatbot for customers, and to facilitate testing and development, I've set up three different environments (stages). Each stage has its own test number and is associated with a separate app using the Meta Cloud API and WhatsApp Business API. Every app is connected to its unique webhook and is subscribed to the 'messages' field.

However, I am encountering an unexpected behavior where every webhook is receiving events from all other numbers, not just its corresponding number.

Setup Details:

For each app, I have the following configuration in the meta developer web app:

Quickstart Configuration: To get alerted when you receive a message or when a message's status has changed, a Webhooks endpoint is set up for each app.

Callback URL: Each app has a different callback URL, something like https://.....com/webhook.

Verify token: Different for each app

What actually happens:

Despite having distinct endpoints and configurations for each app, messages intended for one stage are being received by the webhooks of the other stages as well.

Object received from Meta Cloud API when I send "hi" to the test number – gets delivered to all three webhooks:

{     "object": "whatsapp_business_account",     "entry": [         {             "id": "id_1",             "changes": [                 {                     "value": {                         "messaging_product": "whatsapp",                         "metadata": {                             "display_phone_number": "test_stage_phone_no",                             "phone_number_id": "test_stage_phone_no_id"                         },                         "contacts": [                             {                                 "profile": {                                     "name": "Leon"                                 },                                 "wa_id": "my_phone_number"                             }                         ],                         "messages": [                             {                                 "from": "my_phone_number",                                 "id": "wamid.HBgNNDk...",                                 "timestamp": "1704481181",                                 "text": {                                     "body": "hi"                                 },                                 "type": "text"                             }                         ]                     },                     "field": "messages"                 }             ]         }     ] }

Object received from Meta Cloud API when I send "hi" to the production number – gets delivered to all three webhooks:

{     "object": "whatsapp_business_account",     "entry": [         {             "id": "id_2",             "changes": [                 {                     "value": {                         "messaging_product": "whatsapp",                         "metadata": {                             "display_phone_number": "prod_stage_phone_no",                             "phone_number_id": "prod_stage_phone_no_id"                         },                         "contacts": [                             {                                 "profile": {                                     "name": "Leon"                                 },                                 "wa_id": "my_phone_number"                             }                         ],                         "messages": [                             {                                 "from": "my_phone_number",                                 "id": "wamid.HBgNN...",                                 "timestamp": "1704482444",                                 "text": {                                     "body": "hi"                                 },                                 "type": "text"                             }                         ]                     },                     "field": "messages"                 }             ]         }     ] }

As a temporary workaround, in my webhook, I am checking the WhatsApp Business ID from which the message originates and filtering out messages that don't match the Business ID associated with that stage. However, I believe there should be a way to ensure each webhook only receives messages for its specific app.

Questions:

Has anyone else experienced this issue with the Meta Cloud API and WhatsApp Business API?

Is there a configuration step I might be missing that would ensure each webhook only receives messages intended for its associated app? Are there any best practices or additional settings I should consider to isolate the webhook events to their respective apps?

I am using the Whatsapp Business API and I am testing my app using their test format, which gives you a test number and you can add your personal phone number to receive the test template. I am correctly receiving the test template from Meta to my phone number, however when I actually test my app, by me sending a message to that test number, this error shows up:

response: { status: 400, statusText: 'Bad Request', headers: Object [AxiosHeaders] { vary: 'Origin, Accept-Encoding', 'x-business-use-case-usage': '{"199147949938479":[{"type":"whatsapp","call_count":1,"total_cputime":1,"total_time":1,"estimated_time_to_regain_access":0}]}', 'content-type': 'application/json', 'www-authenticate': 'OAuth "Facebook Platform" "invalid_request" "(#131030) Recipient phone number not in allowed list"',

My phone number is definitely in the allowed list as I am receiving their test template with no problems. Maybe there is a problem with my area code? I am from Argentina and my area code is +54. It also has a 9 before the actual phone number. I tried with and without the 9 and in all possible format. No results. Any clues what may be?

  1. 1
  2. ...
  3. 77
  4. 78
  5. 79
  6. 80
  7. 81
  8. 82
  9. 83
  10. ...
  11. 85