Usa OAuth 2.0 para aplicaciones web de JavaScript

Extremos de OAuth 2.0

Genera una URL para solicitar acceso desde el extremo de OAuth 2.0 de Google en https://accounts.google.com/o/oauth2/v2/auth. Se puede acceder a este extremo a través de HTTPS; se rechazan las conexiones HTTP sin formato.

El servidor de autorización de Google admite los siguientes parámetros de cadena de consulta para las aplicaciones de servidor web:

Ejemplo de redireccionamiento al servidor de autorización de Google

La siguiente URL de ejemplo solicita acceso sin conexión (access_type=offline) a un permiso que permite acceder para ver la cuenta de YouTube del usuario. Usa la autorización incremental para garantizar que el nuevo token de acceso abarque todos los permisos a los que el usuario otorgó acceso a la aplicación anteriormente. La URL también establece valores para los parámetros obligatorios redirect_uri, response_type y client_id, así como para el parámetro state. La URL contiene saltos de línea y espacios para facilitar la lectura.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

Después de crear la URL de solicitud, redirecciona al usuario a ella.

Código de muestra de JavaScript

En el siguiente fragmento de JavaScript, se muestra cómo iniciar el flujo de autorización en JavaScript sin usar la biblioteca cliente de las APIs de Google para JavaScript. Como este extremo de OAuth 2.0 no admite el uso compartido de recursos de origen cruzado (CORS), el fragmento crea un formulario que abre la solicitud a ese extremo.

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

Extremos de OAuth 2.0

El servidor de OAuth 2.0 envía una respuesta al redirect_uri especificado en tu solicitud de token de acceso.

Si el usuario aprueba la solicitud, la respuesta contendrá un token de acceso. Si no la aprueba, entonces esta contendrá un mensaje de error. El token de acceso o el mensaje de error se devuelven en el fragmento de hash del URI de redireccionamiento, como se muestra en los siguientes ejemplos:

• Una respuesta de token de acceso:

  https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

  Además del parámetro access_token, la cadena de fragmento también contiene el parámetro token_type, que siempre se establece en Bearer, y el parámetro expires_in, que especifica la vida útil del token, en segundos. Si se especificó el parámetro state en la solicitud del token de acceso, su valor también se incluye en la respuesta.

• Una respuesta de error:

  https://oauth2.example.com/callback#error=access_denied

Ejemplo de respuesta del servidor de OAuth 2.0

Para probar este flujo, haz clic en la siguiente URL de ejemplo, que solicita acceso de solo lectura para ver los metadatos de los archivos de tu unidad de Google Drive y acceso de solo lectura para ver tus eventos del Calendario de Google:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

Después de completar el flujo de OAuth 2.0, el navegador te redireccionará a OAuth 2.0 Playground, una herramienta para probar flujos de OAuth. Verás que OAuth 2.0 Playground capturó automáticamente el código de autorización.

Extremos de OAuth 2.0

Para verificar si el usuario otorgó acceso a tu aplicación a un permiso en particular, examina el campo scope en la respuesta del token de acceso. Son los permisos de acceso que otorga el token de acceso, expresados como una lista de cadenas delimitadas por espacios que distinguen mayúsculas de minúsculas.

Por ejemplo, la siguiente respuesta de token de acceso de ejemplo indica que el usuario otorgó permiso a tu aplicación para ver, editar y borrar de forma permanente los videos de YouTube, las calificaciones, los comentarios y los subtítulos del usuario:

  {
    "access_token": "1/fFAGRNJru1FTz70BzhT3Zg",
    "expires_in": 3920,
    "token_type": "Bearer",
    "scope": "https://www.googleapis.com/auth/youtube.force-ssl",
    "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI"
  }

Extremos de OAuth 2.0

Después de que tu aplicación obtenga un token de acceso, puedes usarlo para realizar llamadas a una API de Google en nombre de una cuenta de usuario determinada si se otorgaron los permisos de acceso que requiere la API. Para ello, incluye el token de acceso en una solicitud a la API con un parámetro de consulta access_token o un valor de encabezado HTTP Authorization Bearer. Cuando sea posible, es preferible el encabezado HTTP, ya que las cadenas de consulta suelen ser visibles en los registros del servidor. En la mayoría de los casos, puedes usar una biblioteca cliente para configurar tus llamadas a las APIs de Google (por ejemplo, cuando llamas a la API de YouTube Data).

Ten en cuenta que la API de YouTube Data solo admite cuentas de servicio para los propietarios de contenido de YouTube que poseen y administran varios canales de YouTube, como sellos discográficos y estudios cinematográficos.

Puedes probar todas las APIs de Google y ver sus permisos en OAuth 2.0 Playground.

Ejemplos de HTTP GET

Una llamada al extremo youtube.channels (la API de YouTube Data) con el encabezado HTTP Authorization: Bearer podría verse de la siguiente manera. Ten en cuenta que debes especificar tu propio token de acceso:

GET /youtube/v3/channels?part=snippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Aquí se muestra una llamada a la misma API para el usuario autenticado con el parámetro de cadena de consulta access_token:

GET https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

Ejemplos de curl

Puedes probar estos comandos con la aplicación de línea de comandos de curl. A continuación, se muestra un ejemplo en el que se usa la opción de encabezado HTTP (preferida):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true

O, como alternativa, la opción de parámetro de cadena de consulta:

curl https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

Código de muestra de JavaScript

En el siguiente fragmento de código, se muestra cómo usar CORS (uso compartido de recursos de origen cruzado) para enviar una solicitud a una API de Google. En este ejemplo, no se usa la biblioteca cliente de las APIs de Google para JavaScript. Sin embargo, incluso si no usas la biblioteca cliente, la guía de asistencia de CORS en la documentación de esa biblioteca probablemente te ayudará a comprender mejor estas solicitudes.

En este fragmento de código, la variable access_token representa el token que obtuviste para realizar solicitudes a la API en nombre del usuario autorizado. En el ejemplo completo, se muestra cómo almacenar ese token en el almacenamiento local del navegador y recuperarlo cuando se realiza una solicitud a la API.

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

Extremos de OAuth 2.0

En esta muestra de código, se indica cómo completar el flujo de OAuth 2.0 en JavaScript sin usar la biblioteca cliente de las APIs de Google para JavaScript. El código es para una página HTML que muestra un botón para probar una solicitud a la API. Si haces clic en el botón, el código verifica si la página almacenó un token de acceso a la API en el almacenamiento local de tu navegador. Si es así, ejecuta la solicitud a la API. De lo contrario, inicia el flujo de OAuth 2.0.

Para el flujo de OAuth 2.0, la página sigue estos pasos:

1. Dirige al usuario al servidor de OAuth 2.0 de Google, que solicita acceso al permiso https://www.googleapis.com/auth/youtube.force-ssl.
2. Después de otorgar (o denegar) el acceso a uno o más permisos solicitados, se redirecciona al usuario a la página original, que analiza el token de acceso de la cadena del identificador de fragmento.
3. La página verifica a qué permisos el usuario le otorgó acceso a la aplicación.

4. Si el usuario otorgó acceso a los permisos solicitados, la página usará el token de acceso para realizar la solicitud a la API de ejemplo.

   Esta solicitud a la API llama al método channels.list de la API de YouTube Data para recuperar datos sobre el canal de YouTube del usuario autorizado.

5. Si la solicitud se ejecuta correctamente, la respuesta de la API se registra en la consola de depuración del navegador.

Puedes revocar el acceso a la app a través de la página Permisos de tu Cuenta de Google. La app aparece como el nombre de la aplicación que se proporcionó en la página de desarrollo de la marca dentro de la pantalla de consentimiento de OAuth durante la creación del ID de cliente.

Para ejecutar este código de forma local, debes establecer valores para las variables YOUR_CLIENT_ID y YOUR_REDIRECT_URI que correspondan a tus credenciales de autorización. La variable YOUR_REDIRECT_URI debe establecerse en la misma URL en la que se publica la página. El valor debe coincidir exactamente con uno de los URI de redireccionamiento autorizados para el cliente de OAuth 2.0, que configuraste en la página Clientes de la consola de Cloud. Si este valor no coincide con un URI autorizado, recibirás un error redirect_uri_mismatch. Tu proyecto también debe tener habilitada la API adecuada para esta solicitud.

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var fragmentString = location.hash.substring(1);
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0 && params['state']) {
    if (params['state'] == localStorage.getItem('state')) {
      localStorage.setItem('oauth2-test-params', JSON.stringify(params) );

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) { 
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null); 
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
                  'state': state,
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

Extremos de OAuth 2.0

En este ejemplo, la aplicación que realiza la llamada solicita acceso para recuperar los datos de YouTube Analytics del usuario, además de cualquier otro acceso que el usuario ya haya otorgado a la aplicación.

Para agregar permisos a un token de acceso existente, incluye el parámetro include_granted_scopes en tu solicitud al servidor de OAuth 2.0 de Google.

En el siguiente fragmento de código, se muestra cómo hacerlo. En el fragmento, se supone que almacenaste los permisos para los que tu token de acceso es válido en el almacenamiento local del navegador. (El código del ejemplo completo almacena una lista de permisos para los que el token de acceso es válido configurando la propiedad oauth2-test-params.scope en el almacenamiento local del navegador).

El fragmento compara los permisos para los que el token de acceso es válido con el permiso que quieres usar para una consulta en particular. Si el token de acceso no cubre ese permiso, se inicia el flujo de OAuth 2.0. Aquí, la función oauth2SignIn es la misma que se proporcionó en el paso 2 (y que se proporciona más adelante en el ejemplo completo).

var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl';
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));

var current_scope_granted = false;
if (params.hasOwnProperty('scope')) {
  var scopes = params['scope'].split(' ');
  for (var s = 0; s < scopes.length; s++) {
    if (SCOPE == scopes[s]) {
      current_scope_granted = true;
    }
  }
}

if (!current_scope_granted) {
  oauth2SignIn(); // This function is defined elsewhere in this document.
} else {
  // Since you already have access, you can proceed with the API request.
}

Extremos de OAuth 2.0

Para revocar un token de manera programática, tu aplicación realiza una solicitud a https://oauth2.googleapis.com/revoke y, luego, incluye el token como un parámetro:

curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
        https://oauth2.googleapis.com/revoke?token={token}

El token puede ser un token de acceso o un token de actualización. Si el token es un token de acceso y tiene un token de actualización correspondiente, este también se revocará.

Si la revocación se procesa correctamente, el código de estado HTTP de la respuesta es 200. En caso de condiciones de error, se devuelve un código de estado HTTP 400 junto con un código de error.

En el siguiente fragmento de JavaScript, se muestra cómo revocar un token en JavaScript sin usar la biblioteca cliente de las APIs de Google para JavaScript. Dado que el endpoint de OAuth 2.0 de Google para revocar tokens no admite el uso compartido de recursos de origen cruzado (CORS), el código crea un formulario y lo envía al endpoint en lugar de usar el método XMLHttpRequest() para publicar la solicitud.

function revokeAccess(accessToken) {
  // Google's OAuth 2.0 endpoint for revoking access tokens.
  var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';

  // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', revokeTokenEndpoint);

  // Add access token to the form so it is set as value of 'token' parameter.
  // This corresponds to the sample curl request, where the URL is:
  //      https://oauth2.googleapis.com/revoke?token={token}
  var tokenField = document.createElement('input');
  tokenField.setAttribute('type', 'hidden');
  tokenField.setAttribute('name', 'token');
  tokenField.setAttribute('value', accessToken);
  form.appendChild(tokenField);

  // Add form to page and submit it to actually revoke the token.
  document.body.appendChild(form);
  form.submit();
}