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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
