I am attempting to implementing Facebook Login for Business and as per my requirement I would need to request the client business user to generate a User Access Token.
As per the doc I created a configuration on my Facebook App and am supposed to call it from the sdk as:
<fb:login-button config_id="<CONFIG_ID>" onlogin="checkLoginState();">
</fb:login-button>
I also used the code from here, which gives a full HTML/JS code for the login flow. In the example, I replaced the:
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
To:
<fb:login-button config_id="<CONFIG_ID>" onlogin="checkLoginState();">
</fb:login-button>
I have two Facebook account and
- Has a developer role on the Facebook app
- Has no role at all on the app
I need 2 to be able to login as we don't want our client to have a role on the app and would like to deploy ads on their behalf.
If I am logged in to Facebook using my account 1, I am able to generate an access token. If I am already logged in with account 2 OR I attempt to login I get the following error message:
The links in the error message lead to me an internal FB login page:
I have tried using the non-minified version as mentioned here and even trued replacing the 'sdk' in the source to 'all' which was mentioned in other answers for other Facebook queries during Googling but was unable to make it work and still get the error.
My entire code can be found below:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log('statusChangeCallback');
console.log(JSON.stringify(response)); // The current login status of the person.
console.log(response.status);
if (response.status === 'connected') { // Logged into your webpage and Facebook.
testAPI();
} else { // Not logged into your webpage or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this webpage.';
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function(response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : <APP_ID>,
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : 'v18.0' // Use this Graph API version for this call.
});
FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
statusChangeCallback(response); // Returns the login status.
});
};
function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<!-- The JS SDK Login Button -->
<fb:login-button config_id="<CONFIG_ID>" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk/debug.js"></script>
</body>
</html>
Any help please would be much appreciated, thank you.
Edit: My app is both access verified and app reviewed.