Cómo usar una API de Google con autenticación a través de OAuth2

06/03/2018
Cómo usar una API de Google con autenticación a través de OAuth2

¿Qué es Google OAuth2?

El uso de las aplicaciones cloud de Google está ampliamente aceptado y extendido. Queda atrás el tiempo en el que los que usaban Gmail eran esos frikis que habían dejado de conectarse al messenger. 

Ya nadie te mira mal si le dices que le vas a compartir un documento en Google Drive, es más, ahora son los propios clientes los que te vienen con la idea de integrar alguno de sus servicios o productos con algunos de los servicios que ofrece Google.

Bueno pues ahí es donde nos vamos a situar, pues el primer paso para la integración con alguno de los servicios Google es, claro está, avisar a Google de que los vamos a usar.

Si accedemos a la documentación técnica de Google OAuth2[1] el mismo título nos indica que se trata de un mecanismo de autenticación y autorización que nos permite usar las APIs de Google.

Nota: El paradigma de autenticación/autorización es un concepto importante que se manejará a lo largo de este post, por lo que si no sabes muy bien la diferencia, puedes leerte esta página[2].

Alta de tu aplicación en Google

Nada más y nada menos. Para poder hacer uso de cualquier servicio de Google, debes dar de alta tu aplicación (ya sea una aplicación web, una aplicación móvil, o un bot). 

Para ello debes acceder a la consola de desarrolladores Google (Google Developers Console[3]) y crear un nuevo proyecto:

Creación de un proyecto en consola de Google

Una vez añadido, añadimos las APIs que queramos (en nuestra prueba, Google Drive):

add_api.png

Con esto tenemos habilitado el acceso a las APIS que queramos usando este proyecto. Sin embargo, nos falta dar de alta los clientes que lo vayan a usar, es decir, la web o la aplicación móvil en cuestión.

Para ello, seleccionamos el menú de credenciales (Credentials) y seleccionamos la opción de crear un nuevo cliente:

add_client.png

Aquí es donde le decimos que tipo de cliente queremos crear:

  • Aplicación web: Cualquier web que valla a hacer uso de los serivicios de Google usando credenciales de usuarios.
  • Cuenta de servicio: Esta cuenta se usa generalmente para el acceso a datos de una cuenta específica del servicio, es decir, no requiere autenticación u autorización del usuario de la aplicación
  • Aplicación instalada: Aplicación instalada a nivel de SO (realmente para Android o IPhone)

Como la prueba la vamos a hacer desde una web, le tenemos que especificar la url. La prueba está alojada en github[4] y no tendremos URL de retorno para la autorización (la leeremos por post), por tanto la configuración correcta es:

A este nivel ya queda de mano del desarrollador el permitir el acceso desde distintas URLs para un mismo cliente o generar distintos clientes por cada URL que vaya a acceder. 

Pantalla de permisos

Antes de entrar en materia, necesitarás configurar la pantalla de consentimiento de tu proyecto. 

Desde la misma consola de desarrolladores de Google:

consent_screen.png

Es necesario configurar al menos el nombre y el email, de lo contrario Google nos devolverá un error al intentar autorizar a nuestra aplicación.

El flujo de Google OAuth2

Si has llegado hasta aquí te estarás preguntando: ¿eso es todo? ¿tan fácil es? bueno pues sí y no.

Me explico, hasta aquí todo es relativamente sencillo, a partir de aquí es donde entra la magia negra y la confianza ciega, pues, si bien existe documentación al respecto, a mi entender es algo confusa y corta.

En el caso que nos ocupa[5], el flujo que sigue la autenticación es:

webflow.png

Y como podéis apreciar, aparecen una serie de conceptos a tener en cuenta dentro de este flujo:

Authorization code

Es una cadena de texto que nos devolverá Google, pero que no nos permite acceder a sus servicios, sino solicitar el token (access o refresh)

Token

Se trata de una cadena larga con un hash que nos devolverá Google. A su vez se dividen en:

Access Token

Token que servirá para un acceso normal de nuestra aplicación a los servicios. Generalmente caducará a la hora de ser expedido.

Refresh Token

Token que permitirá generar access tokens posteriormente de forma que nuestra aplicación no nos pedirá más permiso. 

Este tipo de token se generará una única vez por par cliente/servicio(s) (o client_id/scope(s)) a no ser que se revoque. 
¿Cómo? Pues que si pedimos permiso para acceder a Google Drive de forma offline y luego pedimos permiso para acceder a Google Drive y a GMail al mismo tiempo, Google nos devolverá dos refresh token válidos y diferentes, pero si repetimos cualquiera de estas peticiones Google no nos devolverá ningún refresh token, por lo que tenemos que guardar el refresh token que nos de y revocarlo en caso de ser inservible siempre.

¿Y cuando se revoca? La documentación de Google al respecto[6] nos dice que dependiendo de la cantidad de tokens que pida nuestra aplicación, empezará a caducar los antiguos. Además, podremos revocar un token desde nuestra aplicación o revocarlo el propio usuario desde la configuración de seguridad de su cuenta Google[7]; por lo que tendremos que tener en cuenta estos supuestos al modelar la integración.

Integración de una aplicación web para acceso online

La integración más sencilla a nivel conceptual es la que realizaremos de forma online, es decir, contaremos con que el usuario tendrá una sesión abierta con su cuenta Google en el navegador. 

A este nivel podemos: 

  • Construir las peticiones a Google de forma manual
  • Hacer uso del cliente beta Javascript[8]

En nuestro caso hemos optado por la segunda opción. 

Google APIs Client for Javascript en detalle

Esta librería forma parte de la masa oscura de Google. Quiero decir con esto, que busques lo que busques no encontrarás ningún código fuente y si pretendes depurarla, prepárate para tener la consola Javascript comiéndose toda tu RAM formateando el javascript comprimido e ilegible.

Encontrarás mucha documentación de uso y muchos ejemplos (incluso oficiales[9]), pero a la hora de buscar un error en el flujo de autenticación (que probablemente será tuyo) te volverás loco intentando bajar a las tripas.

Mis únicos consejos a este nivel son:

  1. Tened claro el flujo que seguirá tu aplicación respecto a la autorización/autenticación y uso de servicios de Google
  2. Empezad por algo sencillo, es decir, si, por ejemplo, vas a usar Google Drive, empieza por about y ya te complicarás listando directorios o subiendo ficheros.
  3. Armaros de paciencia y observad las peticiones que se van montando desde la API con la consola Javascript.

Con propósito de hacer una demostración al respecto, he preparado una página de demostración que permite:

  • Pedir permisos a Google para uno de sus servicios 
  • Mostrar la información básica del usuario (actualmente sólo para Google Drive a través del servicio about[10])

Para verla en acción sencillamente accede a: http://alediator.github.io/gapi-ext/ y pulsa en ‘Start demo’.

¿Te interesa la API de Google? Conoce los nuevos términos del servicio y políticas de desarrollo en YouTube API Services

Referencias

Comentarios

#94

hola, tengo este problema, no

hola, tengo este problema, no soy desarrollador de software, quiero acceder a youtube pero necesito actualizar este protocolo OAuth 2. mi móvil es un GT-S5250. Ayúdame, gracias

Buenas Jose. Probablemente lo

Buenas Jose. Probablemente lo que tengas que hacer es actualizar la versión de la aplicación de Youtube en tu móvil. Las versiones más recientes están integradas con Google OAuth2.

#95

Hola, tu articulo me informo

Hola, tu articulo me informo mucho, sin embargo me genero una duda es posible que tenga un servicio en la nube (una aplicación web),el cual a su vez se comunique con un servicio de google work (drive y docs) y mis cliente alli llenen algunos formularios de excel, como se deberia llevar la implementacion y se podria hacer que mi cliente no acceda directamente a google drive o al menos no sea visible para el ?

Gracias Fabio. Puedes usar la

Gracias Fabio. Puedes usar la Sheets API para realizar la edición de este tipo de documentos, pero simpre deberás mostrar un prompt inicial solicitándole al usuario los permisos en cuestión. En este caso, el scope sería https://spreadsheets.google.com/feeds

#96

Buena tarde, estoy haciendo

Buena tarde, estoy haciendo una aplicación web (.NET) en donde los usuarios suben todo tipo de archivos y deseo guardar estos archivos en mi cuenta personal de Google Drive, Necesito la autorización de los clientes para esto ? ¿ Tienes algun sitio donde pueda mirar como se hace? Cordial saludo.
#97

Hola Alejandro, muchas

Hola Alejandro, muchas gracias por tu post, es muy ilustrativo. Actualmente tengo este error al autenticar usuarios: 400. That’s an error. Error: origin_mismatch Application: TvGram You can email the developer of this application at: jecote89@gmail.com Request Details That’s all we know. yo se que es porque no se configurar los origenes de javascript, ya que lo estoy haciendo desde localhost. Sin embargo utilizo los datos AUTHORIZED JAVASCRIPT ORIGINS -> http://alediator.github.io AUTHORIZED REDIRECT URIS -> http://alediator.github.io/gapi-ext luego pruebo mi api key en http://alediator.github.io/gapi-ext y le coloco en scopes https://www.googleapis.com/auth/youtube y todo corre OK cuando le doy start demo. que puedo estar haciendo mal, o que me falta para que me funcione la autenticacion. quedo atento, muchas gracias.

Buenas, 

Buenas, 

Tú problema son los origins en la configuración del proyecto en Google. Han cambiado la interfaz de administración. Ahora accedes de este modo:

credentials.png

Lo que debes añadir es el dominio desde el que vas a hacer uso de la API (en tu caso la URL por la que accedes a tu aplicación TvGram) aquí:

credentials2.png

Saludos.

#98

Hola Mi nombre es Javier eh

Hola Mi nombre es Javier eh implementado OAuth2 a mi web encontré entre toda la información un JavaScript oficial que en si ya hace el trabajo de autenticar al usuario pero mi problema esta en que estuve viendo que no se puede redirigir la pagina al momento de loguearse pues si me permite ingresar pero se queda en la misma pagina y me eh pasado mucho tiempo viendo ese tema y aun no encuentro nada si pudieras ayudarme seria genial saludos.
#99

Así que una página de

Así que una página de demostración eh... XD
#144

Hola, estoy intentando hacer…

Hola, estoy intentando hacer una aplicacion con appcelerator titanium y nesecito hacer un autentificador con gmail pero no se como :c alguna idea ?

#148

Hola que tal? Tengo el…

Hola que tal? Tengo el siguiente problema.

Tengo una pagina web donde quiero mostrar mis videos y sus subtitulos de forma mas linda. Ahora lo que pasa es que si o si para cuando una persona accede cualquier persona necesita loguearse, es posible hacer este paso, es decir, loguarse yo (dueño de los videos) sin que el usuario se entere?

Saludos

Añadir nuevo comentario

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.