I'm using the newest embed SignupFlow for Whatsapp cloud API.
since I'm its returning this message:
{"error":{"message":"(#100) You must provide an app access token, or a user access token that is an owner or developer of the app","type":"OAuthException","code":100,"fbtrace_id":"A8zmgXoQ4iVYPBqOu36aTHL"}}
I cant continue the integration to Fetch shared WABA IDs.
I created this configuration id and I'm the developer of the app too.
<script>
var apiVersion = "v19.0";
function debugToken(inputToken){
const url = new URL(`https://graph.facebook.com/${apiVersion}/debug_token`);
url.searchParams.set('input_token', inputToken);
console.log('url');
console.log(url);
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});
}
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '490956132922840',
autoLogAppEvents : true,
xfbml : true,
version : apiVersion
});
};
</script>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js">
</script>
<script>
// Facebook Login with JavaScript SDK
function launchWhatsAppSignup() {
// Launch Facebook login
FB.login(function (response) {
console.log('response');
console.log(response);
if (response.authResponse) {
const accessToken = response.authResponse.code;
debugToken(accessToken);
//Use this token to call the debug_token API and get the shared WABA's ID
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {
config_id: '944207277310917', // configuration ID obtained in the previous step goes here
response_type: 'code', // must be set to 'code' for System User access token
override_default_response_type: true,
extras: {
sessionInfoVersion: 2, // Receive Session Logging Info
}
});
}
</script>
<button onclick="launchWhatsAppSignup()"
style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">
Login with Facebook
</button>
Trying to figure out those APIs myself so this might not be a complete answer but at least some extra information.
You can use response.authResponse.code
in https://graph.facebook.com/{api_version}/oauth/access_token?client_id={app_id}&client_secret={app_secret}&code={code}
(no auth header needed) to get access_token
. That token has type=SYSTEM_USER and when calling /debug_token
you can specify it as input_token
but you'd still need the USER-type token for the Authorization
header, not sure how to get around this. But you could use that token for other APIs (e.g. that token works as a Bearer token for /{api_version}/{waba_id}/phone_numbers
)
If you need to get the WABA ID selected by the user, you could add an event listener for a message
event, as described in Facebook docs (this works only if you have "sessionInfoVersion": 2
in extras
):
const sessionInfoListener = (event) => {
if (event.origin !== "https://www.facebook.com" && event.origin !== "https://web.facebook.com") {
return;
}
try {
const data = JSON.parse(event.data);
if (data.type === 'WA_EMBEDDED_SIGNUP') {
// if user finishes the Embedded Signup flow
if (data.event === 'FINISH') {
const {phone_number_id, waba_id} = data.data;
}
// if user cancels the Embedded Signup flow
else {
const{current_step} = data.data;
}
}
} catch {
// Don’t parse info that’s not a JSON
console.log('Non JSON Response', event.data);
}
};
window.addEventListener('message', sessionInfoListener);