Daina Hodges Daina Hodges - 3 months ago 24
Android Question

Why Javascript Facebook login in iframe does not show native login in the webview android?

I'm trying to implement FB login in my Cordova App. I'm using FB JavaScript SDk to implement the login function in my android app. I have the login page hosted on my website and I included it as an iframe in my app.

When I create an APK file ,install it on my phone (Lenovo) , and press the login button, the login page asks me to leave the app and open the default browser (chrome) I don't know why. I want it to open FB in my current index.html page.
Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="utf-8">
</head>
<body >

<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {

if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML ='Please Log in';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please Log in' ;
}
}

// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
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 page
version : 'v2.8' // use version 2.8
});

FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});

};

// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {

FB.api('/me', {fields: 'name,email,gender,locale,age_range,friends'},
function(response) {
var param=response.id+"/"+response.name+"/" + response.email + "/" +response.gender;
window.parent.postMessage(param, "*");
});
}
</script>
<fb:login-button scope="public_profile,email" size="xlarge" onlogin="checkLoginState();">
</fb:login-button>

</body>
</html>

Answer Source

Add these lines to your config.xml, it will solve the problem

<access origin="https:*"/>
<access origin="https://www.facebook.com"/>
<allow-navigation href="*" />