Integrar Google Sign-in para logarse en sitio web

2018-03-15 15:20:05

Google Api dispone de una serie de librerías estupendas para el desarrollador, una de ellas es la que permite inicar sesión y/o registrarse en tu sitio web empleando una cuenta de google. Es muy práctico para el usuario porque le permite conectarse de forma sencilla sin llevar a cabo distintos pasos de validación durante el registro en un nuevo sitio web.

Primeros pasos con Google Sign-in Api



Para crear el proyecto presiona el botón azul "CONFIGURE A PROJECT". Se desplegará un poput con un campo desplegable donde podrás seleccionar un proyecto (en el caso que tengas uno creado) o crear un nuevo proyecto. Crea un nuevo proyecto desplegando el campo y presionando sobre la primera opción "Create a new project" y presiona el botón "NEXT". 



En el siguiente paso debes indicar un nombre de proyecto y presionar "NEXT". El siguiente paso es similar donde te pide un nuevo nombre. Puedes poner el mismo si lo deseas. 



Ahora debes seleccionar donde implementarás la api. Selecciona la primera opción "Web browser" e intorduce en nombre del dominio de tu sitio web. Finalmente presiona el botón "CREATE".



Finalmente verás algo como esta imagen. Descarga el archivo de configuración. Para este ejemplo utilizaremos el Client ID. Copia este código ya que lo necesitaremos para la configuración dentro de una metatag en la cabecera de la pagina web.

Configuración básica de la página con google sign-in

El primer paso es añadir una nueva etiqueta metatag dentro del header de la página como muestra el siguiente código. Debes introducir en content el Client ID creado anteriormente.
A continuación es añadir la libreria de javascript de google sign-in y crear una función con el nombre de onSignIn(googleUser) como muestra el siguiente código.
Finalmente en el body incluir un div.

<html> 
    <head> 
        <meta name="google-signin-client_id" content="580632994665-fqmpkv5sfthcs8qc07cs138c284alhtn.apps.googleusercontent.com"> 
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <script>
            function onSignIn(googleUser) {
                var profile = googleUser.getBasicProfile();
            }
        </script>
    </head>
    <body>
        <div class="g-signin2" data-onsuccess="onSignIn"></div>
    </body>
</html> 

Este ejemplo es muy básico. Lo único que hará es mostrar un botón donde el usuario al presionar se abrirá un poput donde podrá seleccionar la cuenta y dar permiso de inicio de sesión al sitio. Inmediatamente se lanza la función onSignIn. Dentro deberá contener el código necesario para enviar los datos al servidor (por ajax) para crear la sesión y almacenar los datos.

Información que se puede obtener con google sign-in

El objeto googleUser.getBasicProfile() contiene los siguientes métodos para obtener los datos del usuario:

  • getId()
  • getName()
  • getImageUrl()
  • getEmail()
Código de ejemplo
function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    var email = profile.getEmail();
    alert(email)
}

Configuración avanzada con jquery y php

El ejemplo anterior solo nos permite conectar y traer los datos del usuario pero no crea ninguna sesión en nuestro servidor web. En este ejemplo crearemos una sesión de usuario en nuestro servidor web.

<?php 
session_start();
$id = '';
$nombre = '';
$imagen = '';
if (filter_input(INPUT_POST,"cerrarsesion")){
    session_destroy();
}else{
    if(isset($_SESSION['id'])) {
        $id = $_SESSION['id'];
        $nombre = $_SESSION['nombre'];
        $imagen = $_SESSION['imagen'];
    }else{
        if(filter_input(INPUT_POST,"id") != ""){
            $id = $_SESSION['id'] = filter_input(INPUT_POST,"id");
            $nombre = $_SESSION['nombre'] = filter_input(INPUT_POST,"nombre");
            $imagen = $_SESSION['imagen'] = filter_input(INPUT_POST,"imagen");
        }
    }
}
?>

<html>
    <head>
        <meta name="google-signin-client_id" content="580632994665-fqmpkv5sfthcs8qc07cs138c284alhtn.apps.googleusercontent.com">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>
        <script>
            $(document).ready(function(){
                //boton para cerrar la sesión
                $('#btncerrarsesion').click(function(){
                    signOut();
                });
            });
            
            
            function onLoad() {
                gapi.load('auth2', function() {
                    var auth2 = gapi.auth2.init();
                    auth2.then(function(){
                        var isSignedIn = auth2.isSignedIn.get();
                        //Mostraremos el boton de iniciar sesión de google unicamente si el usuario no está conectado
                        if (!isSignedIn) {
                            gapi.signin2.render('google-signin-button', {
                              'onsuccess': 'onSignIn'  
                            });
                        }else{
                            //mostramos el boton de cerrar la sesión
                            $('#btncerrarsesion').show();
                        }
                    });
                });
            }
            
            //funcion automatica que llama sign-in
            function onSignIn(googleUser) {
                var profile = googleUser.getBasicProfile();
                
                $('#id').val(profile.getId());
                $('#nombre').val(profile.getName());
                $('#imagen').val(profile.getImageUrl());
                $('#email').val(profile.getEmail());
                $('#formlogin').submit();
            }
            
            //funcion para cerrar la sision en google sign-in
            function signOut() {
                var auth2 = gapi.auth2.getAuthInstance();

                var isSignedIn = auth2.isSignedIn.get();

                if(isSignedIn){
                    auth2.disconnect().then(function () {
                        logout();
                    });
                }else{
                    logout();
                }
            }
            
            //hacemos el post para finalizar la sesión en nuestro servidor
            function logout() {
                $('#formlogout').submit();
            }
        </script>
    </head>
<body> <!-- MOSTRAMOS INFO DEL USUARIO SI ESTA CONECTADO--> <?php if($id != ""){ ?> <h4>Usuario conectado: <br/><img src="<?php echo $imagen; ?>" width="30"/> <?php echo $nombre; ?></h4> <?php }else{ ?> <h4>Ningun usuario conectado</h4> <?php } ?> <!-- FORMULARIO PARA INICIAR LA SESIÓN--> <form method="POST" id="formlogin"> <input type="hidden" id="id" name="id" /> <input type="hidden" id="imagen" name="imagen" /> <input type="hidden" id="email" name="email" /> <input type="hidden" id="nombre" name="nombre" /> </form> <!-- FORMULARIO PARA CERRAR LA SESION--> <form method="POST" id="formlogout"> <input type="hidden" name="cerrarsesion" value="1"/> </form> <!-- BOTON PARA CERRAR LA SESION--> <button type="button" id="btncerrarsesion" style="display: none;">Desconectar</button> <!-- DIV PARA EL BOTÓN DE GOOGLE--> <div id="google-signin-button"></div> </body> </html>

La primera parte del código en color naranja corresponde a la creación y eliminación de la sesión con php. El cual se pasan por variables por medio de POST en formularios dentro del html y enviados con javascript.

Podrás observar que al cargar la librería de google sign-in hemos introducido  ?onload=onLoad (en color verde). Será necesario para crear el objeto para mostrar el botón de iniciar sesión de google solo cuando el usuario no este conectado y poder cerrar sesión posteriormente.

El cuerpo del html hemos creado dos formularios. uno para el inicio de sesión donde creamos cuatro campos para los datos del usuario y otro formulario para finalizar la sesión con un único campo de control. Ambos formularios se enviarán por POST por medio de javascript.


Comentar

Para poder realizar comentarios. Primero debes inicar sesión o crear una cuenta.