I am trying to implement WhatsApp Embedded Signup using the Facebook SDK, but FB.login() does not return the expected authorization code in the callback function. Below is my implementation as official documentation here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedded Signup</title>
</head>
<body>
<!-- SDK loading -->
<script async defer crossorigin="anonymous" src=".js"></script>
<script>
// SDK initialization
window.fbAsyncInit = function() {
FB.init({
appId: 'appId', // my app ID
autoLogAppEvents: true,
xfbml: true,
version: 'v22.0' // Graph API version
});
};
// Session logging message event listener
window.addEventListener('message', (event) => {
if (event.origin !== "; && event.origin !== ";) return;
try {
const data = JSON.parse(event.data);
if (data.type === 'WA_EMBEDDED_SIGNUP') {
console.log('message event: ', data); // Debugging log
}
} catch {
console.log('message event: ', event.data); // Debugging log
}
});
// Response callback
const fbLoginCallback = (response) => {
if (response.authResponse) {
const code = response.authResponse.code; // Expected authorization code
console.log('response: ', code); // Debugging log
} else {
console.log('response: ', response); // Debugging log
}
};
// Launch method and callback registration
const launchWhatsAppSignup = () => {
FB.login(fbLoginCallback, {
config_id: 'config_id', // my configuration ID
response_type: 'code',
override_default_response_type: true,
extras: {
setup: {},
featureType: '',
sessionInfoVersion: '3',
}
});
};
</script>
<!-- Launch button -->
<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>
</body>
</html>
Here simple function in Django to run the html page
@csrf_exempt
def hello_view(request):
return render(request, 'test.html')
Clicking the "Login with Facebook" button triggers launchWhatsAppSignup(), but the authResponse object in the callback does not contain the expected authorization code. It seems to that Django doesn't wait until the user finish Signup. It through none immediately after I click on the button. However when I try this html in native JavaScript, it works properly. What solution for this ?