3

Tengo la siguiente situación:

  1. El servicio que tengo funciona a medias. No lo hice yo, así que quiero modificarlo un poco para que haga dos pasos en uno, es decir, actualmente cuando doy clic en el botón que tengo para facebook solo registra pero . no me hace el login. Nunca he tocado la api de facebook así que no se por donde empezar...

  2. Tengo lo siguiente: Utilizo un archivo javascript que contiene las funciones que ocupa el accion del boton.

    function FacebookAuthService(config) {
        var self = this;
        this.logged = false;
    
        this.init = function () {
            FB.init({
                appId: config.fbappId,
                cookie: true,
                status: true,
                xfbml: config.fbxfbml,
                version: config.fbversion
            });
            FB.Event.subscribe('auth.authResponseChange', self.userStatusChange);
        };
    
        function fbLogin(perms, callback) {
            perms = perms || '';
            FB.login(function (response) {
                if (response.status === 'connected') {
                    return callback({logged: true, uid: FB.getUserID()});
                }
                return callback({logged: false});
            }, {scope: perms});
        }
    
        this.userStatusChange = function (response) {
            self.logged = (response.status === 'connected');
        };
    
        this.login = function (perms, callback) {
            //if (!self.logged) {
                fbLogin(perms, callback);
            //} else {
            //    callback({logged: true, uid: FB.getUserID()});
            //}
        };
    
        this.getToken = function () {
            return FB.getAccessToken();
        };
    }
    /**
     * Service for Facebook Graph API
     *
     * @constructor
     */
    function FacebookGraphService() {
        /**
         * Calls to graph API
         *
         * @param path
         * @param params
         * @param callback
         */
        this.graph = function (path, params, callback) {
            params = params || {};
            FB.api(path, params, function (response) {
                var status = (response && !response.error);
                callback(status, response);
            });
        };
    }
    /**
     * Service for facebook user
     *
     * @constructor
     */
    function FacebookUserService() {
        /**
         * @type {FacebookGraphService}
         */
        var graphService = new FacebookGraphService();
        /**
         * Returns user's info
         *
         * @param uid
         * @param callback
         */
        this.getUserInfo = function (uid, callback) {
            uid = uid || 'me';
            graphService.graph('/' + uid, {fields: 'id,first_name,last_name,email'}, callback);
        };
    }
    

Dentro de la pagina donde cargo el contenido tengo un script que genera el sdk de facebook e inicializo la funcion principal

 <script type="text/javascript">
   // 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'));
     var fbAuthService = {};
     window.fbAsyncInit = function () {
     fbAuthService = new FacebookAuthService(globalServerData);
     fbAuthService.init();
     };
</script>

Y por ultimo tengo el accion del boton de facebook

$(document).on("click", ".js-login-facebook", function () {
        $(".js-login-normal").attr("disabled", true);
        var l = Ladda.create(document.querySelector(".js-login-facebook"));
        l.start();
        fbAuthService.login('email,public_profile', function (response) {
            if (response.logged) {
                var userService = new FacebookUserService();
                userService.getUserInfo(response.uid, registerFbUser);
                l.stop();
            }
        });
    });
function registerFbUser(status, data) {
    if (status) {
        $.post(globalServerData.ajaxfbloginUrl, data, function (response) {
            bootbox.hideAll();
            console.log(response);
            if (response.status == true) {                    
                return location.reload(true);
            }
            bootbox.alert(response.message);
        }, 'json');

    }
}

La situación es que no se por donde empezar... Se supone que cuando uno clickea el botón se hace el registro en la BD de datos, seguido de esto se recarga la página pero no se inicia sesión automaticamente... Entonces tengo que volver a clickear el boton para poder hacer el login... Ese es el proceso que sigo...

Por ultimo del lado del servidor tengo esto que es parte de facebook

 public function actionFacebookLogin() {
        /** @var Customer $customer */
        try {
            $guest = $this->getGuestActual();
            if ($guest->isCustomer()) {
                throw new ValidationException('Ya tienes una session iniciada.');
            }
            $service = new FacebookUserService();
            $userInfo = $service->getUserInfo();
            $customer = Customer::find()->where(['fb_uid' => $userInfo->id])->one();
            if (empty($customer)) {
                $customerService = new CustomerService();
                $customer = $customerService->createByFacebook($userInfo);
            }
            $this->startCustomerSession($customer);
        } catch (ValidationException $e) {
            return json_encode(['status' => false, 'message' => $e->getMessage()]);
        } catch (\Exception $e) {
            return json_encode(['status' => false, 'message' => 'El usuario no existe.']);
        }
        return json_encode(['status' => true, 'message' => '']);
    }
6
  • quizás ayudaría a quienes leen la pregunta aclarar un poco cuál es el objetivo, cuáles son los 2 pasos que querés unificar (por más que esté en el título, ayudaría que lo marques en el código), y qué parte del código te está trayendo problemas específicamente.
    – Mariano
    el 31 oct. 2016 a las 7:35
  • 2
    Que es lo que básicamente quieres lograr. Trata de explicarte mejor. el 31 oct. 2016 a las 7:40
  • Ok, no es ningún problema como tal, sino que los desarrolladores anteriores crearon el js... Lo que hace el Js es mediante un botón hacer el facebook conect. La funcionalidad de esto es que cuando uno presiona el botón solamente se registra el usuario, pero no se logea automaticamente. Entonces lo que necesito es que se unifique ese paso. Registro y login en un mismo paso sin tener que volver a pulsar el botón para hacer el login.
    – cignius
    el 31 oct. 2016 a las 15:12
  • Debes ser mas especifico. que tipo de autenticación usas... session o token? que libreria esats usando?... si tienes el control de la respuesta ahi debes hace el autologin tu mismo. debes dar más detalles.
    – Alfredo Gt
    el 31 oct. 2016 a las 19:52
  • buenas noches amigo, primero los Srs. tienen razón, debiste colocar mas inf. aunque creo entender,pienso que unificar los dos pasos, no es tu problema, el problema que creo es: que luego de que te registras necesitas verificar el correo(facebook) ya que no esta claro a que estas accesando ... espero estés usando ese botón para entrar y registrarte en tu web y ya hayas pensado en esto y si no es el caso. entonces como dijeron los demás,"te hace falta mucha mas información" el 1 nov. 2016 a las 1:42

2 respuestas 2

3
+50

La situación es que no se por donde empezar... Se supone que cuando uno clickea el botón se hace el registro en la BD de datos, seguido de esto se recarga la página pero no se inicia sesión automaticamente... Entonces tengo que volver a clickear el boton para poder hacer el login... Ese es el proceso que sigo...

Recapitulemos lo que tienes hasta ahora: Cuando haces click en el boton, terminas invocando a FB.login el cual, si es necesario abre un dialogo de Facebook en donde loguearse y/o autorizar tu pagina; hasta aqui todo bien, pero luego en el callback invocas a la funcion registerFbUser y esta, a su vez, hace el registro via Ajax y si todo sale bien, termina invocando a location.reload(true). Esto recarga la pagina haciendo que el modulo FB pierda el estado de "logeado".

La solucion provista por Facebook es implementar un login automatico cuando se carga la pagina; La API ya tiene esta mecanismo de login no interactivo, que solo hace el login si el usuario ya autorizo la pagina y si esta en ese momento logueado en facebook. Ademas es valido tanto para despues del terminar el registro como para cuando el usuario vuelve a visitar tu pagina otro dia, asi pues se logea automaticamente.

El proceso es asi:

  1. Priero invocar FB.init. Asi como esta, parece estar bien.
  2. Luego invocar FB.getLoginStatus() para saber si el usuario ya esta o no logueado a facebook y si esta autorizada tu aplicacion. Esto es lo que causa el login automatico.

Entonces una solucion bastante simple seria que luego de invocar a FB.init, invocar esta otra funcion. Como FB.init se invoca dentro la funcion FacebookAuthService.init podemos ponerlo ahi mismo.

Quedaria algo asi:

// esta es la funcion init de tu FacebookAuthService
this.init = function () {
    FB.init({
        appId: config.fbappId,
        cookie: true,
        status: true,
        xfbml: config.fbxfbml,
        version: config.fbversion
    });

    // Ahora invocamos getLoginStatus
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        // el usuario esta loggeado en facebook y ha autenticado
        // a tu web-app. Ademas, en respose.authReposnse se encuentra
        // el user ID y el Access token necesarios para luego invocar
        // las otras APIs (users y graph) 
        
        var uid = response.authResponse.userID;
        var accessToken = response.authResponse.accessToken;
      
      } else if (response.status === 'not_authorized') {
        // el usuario esta loggeado en facebook, pero no ha
        // atenticado tu aplicacion. 
        
      } else {
        // el usuario no esta logueado a facebook
      }
    });

    // por ultimo registrar el evento 
    FB.Event.subscribe('auth.authResponseChange', self.userStatusChange);
};

La verdad es que no importa que codigo pongas en el callback de getLoginStatus por que invocarlo es lo que cuenta. Sin embargo, fijate en los comentarios y veras que los 3 estados que retorna son muy utiles para determinar como seguir, que botones habilitar, etc, etc.

Salu2

1
  • Antes que respondieses... Implemente eso y es correcto lo que mencionas, no guarda el estado de estar "logeado" aunque se haya mantenido... Lo que realice es mediante una variable en php guardar ese valor y comprobar si existe... Algo así como una cookie
    – cignius
    el 5 nov. 2016 a las 20:04
-1

Tu main

$(function() {

var app_id = '000';//tu id app 
var scopes = 'xxx, user_online_presence';//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>"+
                  "<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.1'
    });


    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', function(response) {
        $('#login').after(div_session);
        $('#login').remove();
        $('#facebook-session strong').text("Bienvenido: "+response.name);
        $('#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;
})

})

Tu index

<!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 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">

Facebook SDK login con Javascript

    <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>

Intenta con esto, me parece que esta versión de Api es diferente a la que tienes, así que ingresa a facebook developers y termina de configurar la app

2
  • Gracias por tu ayuda, pero no me gustaría cambiar lo que ya se tiene hecho... es solo "Como bug" lo que se presentaba Agradezco tu aporte.
    – cignius
    el 5 nov. 2016 a las 20:05
  • tranquilo. para eso es la comunidad el 6 nov. 2016 a las 1:31

Tu Respuesta

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

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