Usa OAuth 2.0 para aplicaciones web de JavaScript

Puntos finales de OAuth 2.0

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

El servidor de autorización de Google admite los siguientes parámetros de cadena de consulta para 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 alcance que permite ver la cuenta de YouTube del usuario. Utiliza 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 la solicitud, redirecciona al usuario a ella.

Código de muestra de JavaScript

El siguiente fragmento de código de JavaScript muestra cómo iniciar el flujo de autorización en JavaScript sin usar la biblioteca cliente de las APIs de Google para JavaScript. Dado que este extremo de OAuth 2.0 no admite el uso compartido de recursos entre dominios (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();
}

Puntos finales de OAuth 2.0

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

Si el usuario aprueba la solicitud, la respuesta contiene un token de acceso. Si el usuario no aprueba la solicitud, la respuesta contiene un mensaje de error. El token de acceso o el mensaje de error se devuelve en el fragmento hash del URI de redirección, como se muestra a continuación:

• 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 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 en tu Google Drive y acceso de solo lectura para ver los eventos de tu 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, su navegador lo redireccionará a OAuth 2.0 Playground, una herramienta para probar flujos de OAuth. Verá que OAuth 2.0 Playground ha capturado 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 alcance en particular, examina el campo scope en la respuesta del token de acceso. Son los permisos de acceso otorgados por el access_token, expresados como una lista de cadenas sensibles a mayúsculas y minúsculas delimitadas por espacios.

Por ejemplo, la siguiente respuesta de muestra del token de acceso indica que el usuario otorgó permiso a tu aplicación para ver, editar y borrar de forma permanente los videos, las calificaciones, los comentarios y los subtítulos de YouTube 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 obtiene un token de acceso, puedes usarlo para llamar a una API de Google en nombre de una cuenta de usuario determinada si se otorgaron los permisos de acceso requeridos por 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 Bearer del encabezado HTTP Authorization. Cuando sea posible, se recomienda usar 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

Esta es 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 que 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, de forma alternativa, la opción del 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 entre dominios) 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, es probable que la guía de compatibilidad con CORS en la documentación de esa biblioteca te ayude 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. El ejemplo completo 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 este ejemplo de código, se muestra 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.

En 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) 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. En la página, se verifica a qué permisos otorgó acceso el usuario a la aplicación.

4. Si el usuario otorgó acceso a los alcances solicitados, la página usa el token de acceso para realizar la solicitud a la API de muestra.

   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 en la página Permisos de tu Cuenta de Google. La app aparece como el nombre de la aplicación proporcionado 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 entrega la página. El valor debe coincidir exactamente con uno de los URIs de redireccionamiento autorizados para el cliente de OAuth 2.0, que configuraste en Cloud Console Clients page. 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>

Puntos finales 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 ámbitos a un token de acceso existente, incluya el parámetro include_granted_scopes en su solicitud al servidor OAuth 2.0 de Google.

El siguiente fragmento de código demuestra cómo hacerlo. El fragmento asume que ha almacenado los ámbitos para los cuales su token de acceso es válido en el almacenamiento local del navegador. (El código del ejemplo completo almacena una lista de ámbitos para los cuales el token de acceso es válido al configurar la propiedad oauth2-test-params.scope en el almacenamiento local del navegador).

El fragmento compara los ámbitos para los cuales el token de acceso es válido con el ámbito que desea utilizar para una consulta particular. Si el token de acceso no cubre ese alcance, se inicia el flujo OAuth 2.0. Aquí, la función oauth2SignIn es la misma que la 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.
}

Puntos finales de OAuth 2.0

Para revocar un token de forma programática, tu aplicación realiza una solicitud a https://oauth2.googleapis.com/revoke y, luego, incluye el token como 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 de acceso y tiene un token de actualización correspondiente, también se revocará el token de actualización.

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

El siguiente fragmento de JavaScript muestra cómo revocar un token en JavaScript sin utilizar la biblioteca de cliente de API de Google para JavaScript. Dado que el punto final 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 punto final 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();
}