4 min de lectura

¿Por qué utilizar una red externa como inicio de sesión?

Anteriormente era claro que la tendencia de crear nuevos usuarios en las emergentes plataformas tenía que ser mediante un correo electrónico, donde el usuario final se veía rebasado dada la gran cantidad de cuentas que terminaba por tener, así como la consecuente avalancha de contraseñas que esto implicaba, de este modo, y con la gradual tendencia de las redes sociales compartidas por una base de usuarios enorme como lo son Google, Facebook, Twitter, etc. Representó un cambio enorme la manera en la que iniciamos sesión en diferentes servicios, por un lado el usuario final tenía la ventaja de centralizar su interacción por internet con una sola cuenta, por lo cual no debería de repetir su correo y contraseña cada vez que busca iniciar sesión en un nuevo sitio, así como la subsecuente ventaja para los desarrolladores que pueden manejar servicios de inicio de sesión y tratamiento de datos mas transparente y automatizada gracias a las API que se ofrecen hoy en día.

Implementar Login con Google (JavaScript)

Configurando nuestra aplicación desde el dashboard de Google

Para iniciar es importante ver que el portal de developers de Google cuenta con la información acerca de como es posible integrar el inicio de sesión mediante diferentes lenguajes de programación, en nuestro caso, necesitaremos entrar al Google Sign-In for Websites, esto en caso de necesitar mayor referencia, sin embargo, desde el primer momento se nos mostrará código HTML con JavaScript embebido de la configuración básica necesaria para obtener los datos del usuario.

Para nuestro caso en particular será necesario seguir estos pasos:

1. Para iniciar deberemos entrar al portal de Google Cloud Platfrom con una cuenta de Google con sesión activa
2. Acto seguido daremos clic en seleccionar un proyecto, y en caso de no tener uno previamente creado daremos clic en nuevo proyecto.

 

3. En la creación del nuevo proyecto nos encontraremos con una pantalla como la siguiente, donde especificaremos el nombre nuestro proyecto así como la organización, esta, en caso de ser necesario es posible dejarla en blanco.

 

 

 

 

4. Seguidamente iremos a la consola de API y servicios del mismo

5. Una vez ahí seleccionaremos la pestaña de credenciales, dejándonos una sección como la siguiente

 

 

 

 

6. Aquí entraremos a la sección pantalla de consentimiento de OAuth, donde agregaremos el nombre de nuestra aplicación, así como un correo para la misma, aquí dentro también especificaremos los datos que buscamos del usuario, para esta práctica en particular se configuró de la siguiente manera:

 

 

 

 

7. Finalmente regresaremos al dashboard anterior y crearemos una credencial de tipo OAuth.

8. En esta sección deberemos de seleccionar el tipo de aplicación a configurar, en nuestro caso esta será Aplicación Web.

9. Después asignaremos un nombre de nuestro proyecto.

10. Para finalizar la configuración deberemos de especificar las restricciones, en este punto es muy importante agregar el sitio web en cuestión que ejecutará la petición para iniciar sesión en con Google, en nuestro caso dado que será una aplicación local, el sitio será el localhost. Quedando de la siguiente manera la configuración.

 

 

 

 

11. Esto nos entregará un ID de cliente, el cual podremos consultar más tarde desde la configuración de nuestra aplicación, sin embargo será necesario tenerlo presente.

Implementando la lógica del login con Google en JavaScript

1. 1. 1. 1. 1. 1. Agregar la Librería de Google en aquellas páginas que tendrán el Google Sign-In
                  
                  1	<a href="https://apis.google.com/js/platform.js">https://apis.google.com/js/platform.js</a>

               2. Especificar el ID de Cliente con un meta element
                  
                  1	<meta name="google-signin-client_id" content="CLIENT-ID-EXAMPLE-0123456789.apps.googleusercontent.com">

               3. Agregar el botón de Sign-In
                  1

                  Cabe destacar que este botón es dinámico, es decir, en función de si la sesión está iniciada o no este botón cambiará su estado.

Obteniendo información

Una vez que se inició sesión será posible tener la información mediante el método getBasicProfile().

Para hacer uso de dicha información Google nos plantea la siguiente función, dicha función está implementada dentro del portal de Google Sign-In for Websites