7

Estoy tratando de integrar «autenticarme» con el SDK JavaScript de Facebook, funciona en Firefox/Chrome/Safari pero en Internet Explorer se queda en "stand by" ya para darle permisos a la aplicación de que pueda acceder a mi información. ¿Hay algo mal o es alguna configuración del IE?.

Captura de login SDK

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;
    })

})
4
  • ¿Versión de IE? ¿Algún mensaje de error de las Herramientas de depuración? Commented el 17 dic. 2015 a las 22:30
  • Internet Explorer 11 y no arroja ningún mensaje de error. Commented el 17 dic. 2015 a las 22:43
  • Hola, he dejado la respuesta abajo, saludos.
    – JuanK
    Commented el 18 dic. 2015 a las 1:32
  • Ese mismo error me pasa cuando me logueo con spotify con Facebook la solución fue editar el archivo host y agregar eso 127.0.0.1 login.spotilocal.com, con eso fue suficiente para solucionar el login con Facebook desde Microsoft edge.
    – ecodrive
    Commented el 25 ene. 2016 a las 14:12

1 respuesta 1

2

Es un problema usual en IE al hacer despliegue en localhost, ya que falla en la redirección por algún tema de políticas de seguridad (sic)

En vez de usar localhost en la URL prueba con. 127.0.0.1 y el puerto en el que estes probando.

http://127.0.0.1:1234

Por un poco tiempo he colgado tu código en este Azure website y al abrirlo en IE funciona sin problema , ya que el error solo ocurre en entorno de ejecución local.

https://juanksitetest.azurewebsites.net/

Y en todo caso... IE11... ? mm es para aplicaciones legacy, si estas en algo nuevo mejor no olvides probarlo en Edge.

2
  • En efecto, al parecer es algo del dominio que estaba utilizando. Veo que funciona perfecto en donde lo subiste. Me sirvio, gracias. Aunque en modo incógnito en Firefox me bloquea un recurso para conectarme a Facebook: "El recurso en "connect.facebook.net/en_US/sdk.js" ha sido bloqueado porque la protección contra rastreo está activada." ...pero ya es otro tema. Commented el 18 dic. 2015 a las 16:05
  • @LuisGómez cool! si te sirvio, no olvides marcar la respuesta como correcta.
    – JuanK
    Commented el 22 dic. 2015 a las 5:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.