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 simples.

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

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 permita el acceso para recuperar los informes de YouTube Analytics del usuario. Usa la autorización incremental para asegúrate de que el nuevo token de acceso cubra todos los permisos a los que a las que se otorgó acceso a la aplicación. La URL también establece valores para el se requieren redirect_uri, response_type y Parámetros client_id y state parámetro. 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%2Fyt-analytics.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 JavaScript muestra cómo iniciar el flujo de autorización en JavaScript sin usar la biblioteca cliente de las APIs de Google para JavaScript. Ya que este módulo de OAuth El extremo 2.0 no admite el uso compartido de recursos entre dominios (CORS), el fragmento crea un 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/yt-analytics.readonly',
                '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 una solicitud de token de acceso.

Si el usuario aprueba la solicitud, la respuesta contendrá un token de acceso. Si el usuario no aprueba la solicitud, la respuesta contiene un mensaje de error. El token de acceso el mensaje de error en el fragmento hash del URI de redireccionamiento, 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 del fragmento también contiene el parámetro token_type, que siempre está establecido en Bearer y el parámetro expires_in, que especifica la la vida útil del token, en segundos. Si se especificó el parámetro state de la solicitud de 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:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.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, se te redireccionará a http://localhost/oauth2callback Esa URL mostrará un 404 NOT FOUND, a menos que tu máquina local entregue un archivo en con esa dirección. En el siguiente paso, se proporcionan más detalles sobre la información que se devuelve en el Es el URI que se usa cuando se redirecciona al usuario de vuelta a tu aplicación.

Extremos de OAuth 2.0

Luego de que la aplicación obtenga un token de acceso, puedes usarlo para realizar llamadas a un servicio en nombre de un proveedor de servicios de usuario si se otorgaron los permisos de acceso que requiere la API. Para ello, incluye el token de acceso en una solicitud a la API mediante una consulta access_token o un valor de encabezado HTTP Bearer Authorization. Cuando sea posible, se prefiere el encabezado HTTP, ya que las cadenas de consulta tienden a ser visibles en los registros del servidor. En la mayoría puedes usar una biblioteca cliente para configurar las llamadas a las APIs de Google (por ejemplo, cuando Invoca la API de YouTube Analytics).

Ten en cuenta que la API de YouTube Analytics no es compatible con la cuenta de servicio. de tu flujo de trabajo. La API de informes de YouTube admite cuentas de servicio solo para propietarios de contenido de YouTube que poseen y administran varios canales de la plataforma, como como sellos discográficos y estudios cinematográficos.

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

Ejemplos de solicitudes GET de HTTP

Un llamado a la reports.query extremo (la API de YouTube Analytics) con el HTTP Authorization: Bearer el encabezado podría verse de la siguiente manera. Ten en cuenta que debes especificar tu propio token de acceso:

GET /youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Esta es una llamada a la misma API para el usuario autenticado con access_token. Parámetro de cadena de consulta:

GET https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

Ejemplos de curl

Puedes probar estos comandos con la aplicación de línea de comandos de curl. Este es un ejemplo que usa la opción de encabezado HTTP (preferida):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

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

curl https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

Código de muestra de JavaScript

El siguiente fragmento de código demuestra cómo usar CORS (uso compartido de recursos entre dominios) para enviar un 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 estás usando la biblioteca cliente, el Compatibilidad con CORS de la documentación de esa biblioteca te resultará útil para comprender mejor estas solicitudes.

En este fragmento de código, la variable access_token representa el token que tienes que se obtienen para hacer solicitudes a la API en nombre del usuario autorizado. La fase completa El ejemplo muestra cómo almacenar ese token en el almacenamiento local del navegador y recuperarlo. cuando realizas una solicitud a la API.

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

Extremos de OAuth 2.0

Esta muestra de código muestra cómo completar el flujo de OAuth 2.0 en JavaScript sin usar el Biblioteca cliente de las APIs de Google para JavaScript. El código es para una página HTML que muestra un botón para prueba una solicitud a la API. Si haces clic en el botón, el código verifica si la página almacenó una 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, se 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 OAuth 2.0 de Google, que solicita acceso a la API de Permiso de https://www.googleapis.com/auth/yt-analytics.readonly.
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 del fragmento.

3. La página utiliza el token de acceso para realizar la solicitud de API de muestra.

   Esta solicitud a la API invoca el elemento reports.query de la API de YouTube Analytics. para recuperar los recuentos de vistas del canal de YouTube del usuario autorizado.

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

Puedes revocar el acceso a la app mediante la Permisos para las Cuenta de Google. La aplicación aparecerá como OAuth 2.0 Demo for Google API Docs.

Para ejecutar este código de manera local, debes establecer valores de YOUR_CLIENT_ID y YOUR_REDIRECT_URI que corresponden credenciales de autorización. La variable YOUR_REDIRECT_URI se debe establecer en la misma URL en la que se entrega 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 el API Console Credentials pageSi este valor no coincide con un URI autorizado, obtendrás un redirect_uri_mismatch . Tu proyecto también debe tener habilitó 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/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
          '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/yt-analytics.readonly',
                  '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 el datos de YouTube Analytics del usuario, además de cualquier otro acceso al que el usuario ya otorgaste a la aplicación.

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

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

El fragmento compara los permisos para los cuales el token de acceso es válido con el alcance que deseas 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 la que se proporcionó en paso 2 (y se proporciona más adelante en la sección completa ejemplo).

var SCOPE = 'https://www.googleapis.com/auth/yt-analytics.readonly';
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, la aplicación realiza una solicitud a https://oauth2.googleapis.com/revoke e 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 de acceso o 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 es 200 Para las condiciones de error, se muestra el 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 usar el Biblioteca cliente de las APIs de Google para JavaScript. Desde el extremo de OAuth 2.0 de Google para revocar Los tokens no admiten el uso compartido de recursos entre dominios (CORS), el código crea un formulario y lo envía. el formulario en el extremo, en lugar de usar el método XMLHttpRequest() para publicar el para cada 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();
}