jueves, 28 de septiembre de 2017

Sign in o log in con google+ y javascript


Obteniendo client_id (https://console.developers.google.com)

Paso 1: Ingresar a https://console.developers.google.comPaso 2: Crear proyecto

Paso 3: Habilitar servicio de API de google+Paso 4: Crear credencial -> Id cliente de OAuth -> Configurar pantalla de autorización.Paso 5: Poner nombre de producto mostrado a los usuarios y guardar.
Paso 6: Seleccionar "web", escribir la url autorizada "Orígenes de JavaScript autorizados" y "URIs de redireccionamiento autorizados" y finalmente crear, allí ya se pudo obtener client_id.





Código Javascript en el head
var googleUser = {};
        var startApp = function () {
            gapi.load('auth2', function () {
                auth2 = gapi.auth2.init({
                    client_id: 'CLIENT_ID.apps.googleusercontent.com
                    cookiepolicy: 'single_host_origin',
                    scope: 'profile email'
                });
                attachSignin(document.getElementById('gSignIn'));
            });
        };

        function attachSignin(element) {
            auth2.attachClickHandler(element, {},
                function (googleUser) {
                    var nombre, apellidos, email, foto;
                    foto = googleUser.w3.Paa;
                    email = googleUser.w3.U3;
                    nombre = googleUser.w3.ofa;
                    apellidos = googleUser.w3.wea;
                    console.log(nombre+' '+ apellidos +' '+ email +' '+ foto);                   }, function (error) {
                    var msj_error = JSON.parse(JSON.stringify(error, undefined, 2));
                    if (msj_error.error == "popup_closed_by_user") {
                        alert('ERROR!')
                    }
                });
        }


Código javascript después del cierre de body

startApp();