Alex Gusev Sistemas web · Ingeniería con agentes

Obtener un token de acceso OAuth2 para Google Cloud API con JavaScript en el navegador

Fecha de publicación: 2023-01-23

En este artículo describo mi experiencia al obtener un token de acceso OAuth2 con la nueva biblioteca gsi/client. El objetivo era obtener el token en una aplicación web mediante JavaScript del lado del cliente. Había muchos artículos sobre Node.js y la biblioteca obsoleta gapi.auth2, pero ninguno servía para la nueva biblioteca.

No entraré en la configuración del proyecto de Google Cloud, ya que está bien explicada en este artículo de Osanda Deshan Nimalarathna. Aquí me concentro en el código de cliente necesario para obtener el token.

Primero hay que incluir el script de la biblioteca en el archivo HTML:

<html>
<head>
  <script src="https://accounts.google.com/gsi/client"></script>
</head>
</html>

La biblioteca añade un objeto google al ámbito global (self o window), que podemos usar para solicitar el token:

const CLIENT_ID = 'XXX.apps.googleusercontent.com';
const SCOPES = 'https://www.googleapis.com/auth/...';

const google = self.google;
function onTokenResponse({access_token, token_type, expires_in, scope} = {}) {
}

const client = google.accounts.oauth2.initTokenClient({
  client_id: CLIENT_ID,
  scope: SCOPES,
  callback: onTokenResponse,
});

client.requestAccessToken();

Este es el fragmento que busqué durante mucho tiempo. Espero que ahorre tiempo a quienes necesitan obtener un token de Google directamente en el navegador.