jueves, 10 de julio de 2014

Autenticación con LiveConnect

Aquí está la forma en la que integré autenticación mediante Live Connect en un portal web. Este tipo de autenticación utiliza OAuth y OpenID, pero desgraciadamente la documentación de estas tecnologías no es nada clara y es mas bien hasta un tanto inútil. Por eso describo aquí la forma en que lo resolví.

Lo primero que se necesita es tener una referencia al script de Live Connect:

<script type="text/javascript" src="http://js.live.net/v5.0/wl.js"></script>

Después, se necesitará una función donde se invoque el motor de autenticación de Live Connect:

<script type="text/javascript">
    function InvocarSignIn() {

    }


</script>
 

Dentro de esa función se tienen que ejecutar esencialmente dos instrucciones: La inicialización y la autenticación. La inicialización puede quedar de la siguiente forma:

WL.init({
 
   client_id: "LiveConnect_client_id",

   redirect_uri: "LiveConnect_redirect_uri",

   scope: ["wl.signin", "wl.emails"]


});


Donde el id de cliente se genera en el sitio de LiveConnect  https://account.live.com/developers/applications/index y la url de re direccionamiento tiene que ser una página web que sea parte del portal. Esa página puede estar vacía puesto que solo sirve para recibir la respuesta de LiveConnect y se cerrará automáticamente, pero aún así es necesario que también contenga la referencia al script de wl.js:

<script type="text/javascript" src="http://js.live.net/v5.0/wl.js"></script>

Por último, el parámetro scope contiene todos los permisos que se le necesita solicitar al usuario final.

Después de ejecutar la instrucción de init, se ejecuta la instrucción de login, la cual solicitará que el usuario introduzca su correo y contraseña. Aquí está un ejemplo de esta rutina:


        WL.login().then(

            function(response){ // Exito en sign in

                WL.api({

                    path: "me",

                    method: "GET"

                }).then(

                    function (response) { 
 
                        // exito en la consulta del email

                        alert(response.emails.preferred);

                    },

                    function (responseFailed) {
 
                        // error en la consulta del email

                        alert(responseFailed.error.message);

                    }

                );

            },

            function(responseFailed){ // Error en sign in

                alert(responseFailed.error_description);

            }

        );


La función que invoca la autenticación es WL.login. Cuando se concreta con éxito se ejecuta WL.api para obtener los datos que se requieran del usuario. En este ejemplo solo se ha obtenido el correo electrónico.

Para realizar un LogOut, se necesita nuevamente el script con la referencia a WL.js:

<script type="text/javascript" src="http://js.live.net/v5.0/wl.js"></script>

Y la invocación para el sign out queda de la siguiente forma:

        <script type="text/javascript">

            function InvocarSignOut() {

                // Inicializa el motor de sign out

                WL.init({

                    client_id: "LiveConnect_client_id",

                    redirect_uri: "LiveConnect_redirect_uri",
 
                    scope: ["wl.signin", "wl.signout"],

                    response_type: "token",

                    status: true

                });
 

                WL.Event.subscribe("auth.logout",  LiveConnect_onLogout);

                WL.logout();

            }

            function LiveConnect_onLogout() {

                // logout completado

            }

 
        </script>


Los parámetros de la función WL.init son esencialmente los mismos que se usaron en el login. Y posteriormente antes de ejecutar el logout se debe capturar el evento "auth.logout".

 


No hay comentarios:

Publicar un comentario