Autenticación con Google+ API con Javascript

Share on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someone
Algo fundamental en muchos sitios es la posibilidad de que los usuarios se pueda autenticar con las diferentes redes sociales para facilitar el proceso de ingreso (evita que los usuarios tengan que crear un usuario y password). Este sencillo tutorial busca explicar como poder realizar la autenticación para nuestro sitio web usando Google Plus usando la API de Javascript. 1- En nuestra pagina referenciar la libreria de Google Plus 2- Debemos crear nuestra aplicación en el Administrador. Para ellos ingresamos a https://console.developers.google.com 3- Dentro de la consola creamos un nuevo proyecto Google Console 4- Creamos un nuevo proyecto Crear nuevo proyecto Google Plus   5- En el menu lateral hacemos cli en APIs y Autenticación Opciones aplicación     6- En la sección de APIs habilitamos Google+ API (y cualquier otro servicio que quisiéramos usar para nuestra aplicación) APIs   7- En el menu lateral seleccionamos Credenciales y vamos a Crear ID de cliente nuevo. Autenticación Aplicación 8- Seleccionamos Aplicación Web y procedemos a configurar la pantalla de consetimiento.   Captura de pantalla 2015-03-09 a la(s) 14.15.29   9- La pantalla de consentimiento permite definir los elementos que le saldrán al usuario cuando intente ingresar con su cuenta de Google. Captura de pantalla 2015-03-09 a la(s) 14.15.41   10- Esta ventana nos permite colocar de donde se pueden permitir los origenes de javascript y las direcciones que se utilizaran en el redireccionamiento. Si no se definen aqui al hacer el redireccionamiento se mostrara un error. Captura de pantalla 2015-03-09 a la(s) 14.59.36   11 – Cuando se termina el proceso se genera los datos de nuestra aplicación de ejemplo. Captura de pantalla 2015-03-09 a la(s) 14.59.53 12- Ya con nuestra aplicación configurada creamos nuestra html que hara la autenticación Es necesario determinar que permisos requiere nuestra aplicación para agregar los elementos necesarios en el scope. Podemos encontrar la información al respecto aqui 13-Nuestra pagina HTML 14- Subimos nuestra aplicación al servidor y ya al ingresar con Google Plus no debe de devolver la información del usuario. Para mas información pueden ingresar a la guia oficial aqui.  

Etiquetas:, , , ,

"Trackback" Enlace desde tu web.