I'm trying to integrate "authenticate" with the Facebook SDK JavaScript, it works in Firefox / Chrome / Safari but in Internet Explorer it stays in "stand by" already to give the application permission to access my information. Is there something wrong or is it some IE configuration?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Facebook SDK para Javascript</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>Facebook SDK login con Javascript</h1>
<a href="#" id="login" class="btn btn-primary">Iniciar sesión</a>
<script>
// 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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
main.js
$(function() {
var app_id = 'APP_ID_HERE';
var scopes = 'email';
var btn_login = '<a href="#" id="login" class="btn btn-primary">Iniciar sesión</a>';
var div_session = "<div id='facebook-session'>"+
"<strong></strong>"+
"<span></span>"+
"<img>"+
"<a href='#' id='logout' class='btn btn-danger'>Cerrar sesión</a>"+
"</div>";
window.fbAsyncInit = function() {
FB.init({
appId : app_id,
status : true,
cookie : true,
xfbml : true,
version : 'v2.2'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response, function() {});
});
};
var statusChangeCallback = function(response, callback) {
console.log(response);
if (response.status === 'connected') {
getFacebookData();
} else {
callback(false);
}
}
var checkLoginState = function(callback) {
FB.getLoginStatus(function(response) {
callback(response);
});
}
var getFacebookData = function() {
FB.api('/me', { locale: 'en_US', fields: 'name, email' }, function(response) {
$('#login').after(div_session);
$('#login').remove();
$('#facebook-session strong').text("Bienvenido: "+response.name);
$('#facebook-session span').text("Email: "+ response.email);
$('#facebook-session img').attr('src','http://graph.facebook.com/'+response.id+'/picture?type=large');
});
}
var facebookLogin = function() {
checkLoginState(function(data) {
if (data.status !== 'connected') {
FB.login(function(response) {
if (response.status === 'connected')
getFacebookData();
}, {scope: scopes});
}
})
}
var facebookLogout = function() {
checkLoginState(function(data) {
if (data.status === 'connected') {
FB.logout(function(response) {
$('#facebook-session').before(btn_login);
$('#facebook-session').remove();
})
}
})
}
$(document).on('click', '#login', function(e) {
e.preventDefault();
facebookLogin();
})
$(document).on('click', '#logout', function(e) {
e.preventDefault();
if (confirm("¿Está seguro?"))
facebookLogout();
else
return false;
})
})