Usa OAuth 2.0 para aplicaciones web de JavaScript

En este documento, se explica cómo implementar la autorización OAuth 2.0 para acceder a la API de datos de YouTube desde una aplicación web de JavaScript. OAuth 2.0 permite a los usuarios compartir datos específicos con una aplicación al mismo tiempo que mantiene la privacidad de sus nombres de usuario, contraseñas y otra información. Por ejemplo, una aplicación puede usar OAuth 2.0 para obtener permiso y, así, subir videos al canal de YouTube de un usuario.

Este flujo de OAuth 2.0 se denomina flujo de concesión implícito. Se diseñó para aplicaciones que acceden a las APIs solo mientras el usuario está presente en la aplicación. Estas aplicaciones no pueden almacenar información confidencial.

En este flujo, tu app abre una URL de Google que usa parámetros de consulta para identificarla y el tipo de acceso a la API que requiere. Puedes abrir la URL en la ventana actual del navegador o en una ventana emergente. El usuario puede autenticarse con Google y otorgar los permisos solicitados. Luego, Google vuelve a redireccionar al usuario a tu app. El redireccionamiento incluye un token de acceso que la app verifica y, luego, usa para realizar solicitudes a la API.

Biblioteca cliente de las APIs de Google y Google Identity Services

Si usas la biblioteca cliente de las APIs de Google para JavaScript con el objetivo de realizar llamadas autorizadas a Google, debes usar la biblioteca de JavaScript de los Servicios de identidad de Google para controlar el flujo de OAuth 2.0. Consulta el modelo de token de los servicios de identidad de Google, que se basa en el flujo de otorgamiento implícito de OAuth 2.0.

Requisitos previos

Habilita las API para tu proyecto.

Cualquier aplicación que llame a las APIs de Google debe habilitarlas en la API Console.

Sigue estos pasos para habilitar una API en tu proyecto:

  1. Open the API Library en Google API Console.
  2. If prompted, select a project, or create a new one.
  3. Usa la página Biblioteca para encontrar y habilitar la API de datos de YouTube. Busca otras APIs que usará tu aplicación y habilítalas también.

Crea credenciales de autorización

Cualquier aplicación que use OAuth 2.0 para acceder a las APIs de Google debe tener credenciales de autorización que identifiquen la aplicación para el servidor de OAuth 2.0 de Google. En los siguientes pasos, se explica cómo crear credenciales para tu proyecto. Luego, las aplicaciones pueden usar las credenciales para acceder a las APIs que habilitaste para ese proyecto.

  1. Go to the Credentials page.
  2. Haz clic en Crear credenciales > ID de cliente de OAuth.
  3. Selecciona el tipo de aplicación Aplicación web.
  4. Completa el formulario. Las aplicaciones que usan JavaScript para realizar solicitudes autorizadas a la API de Google deben especificar orígenes de JavaScript autorizados. Los orígenes identifican los dominios desde los cuales tu aplicación puede enviar solicitudes al servidor de OAuth 2.0. Estos orígenes deben cumplir con las reglas de validación de Google.

Identifica los permisos de acceso

Los permisos permiten que tu aplicación solo solicite acceso a los recursos que necesita y, al mismo tiempo, permiten a los usuarios controlar la cantidad de acceso que otorgan a tu aplicación. Por lo tanto, puede haber una relación inversa entre la cantidad de permisos solicitados y la probabilidad de obtener el consentimiento del usuario.

Antes de que comiences a implementar la autorización de OAuth 2.0, te recomendamos identificar los permisos a los que tu app necesitará permiso para acceder.

La versión 3 de la API de YouTube Data utiliza los siguientes alcances:

Permisos
https://www.googleapis.com/auth/youtubeAdministrar tu cuenta de YouTube
https://www.googleapis.com/auth/youtube.channel-memberships.creatorVer una lista de los miembros actuales y activos de su canal, su nivel actual y el momento en que se hicieron miembros
https://www.googleapis.com/auth/youtube.force-sslVea, edite y borre de forma permanente sus videos, calificaciones, comentarios y subtítulos de YouTube
https://www.googleapis.com/auth/youtube.readonlyPermite ver tu cuenta de YouTube.
https://www.googleapis.com/auth/youtube.uploadPermite administrar tus videos de YouTube.
https://www.googleapis.com/auth/youtubepartnerVer y administrar sus elementos y el contenido asociado en YouTube
https://www.googleapis.com/auth/youtubepartner-channel-auditPermite ver información privada de tu canal de YouTube que sea relevante durante el proceso de auditoría con un socio de YouTube.

En el documento Permisos de la API de OAuth 2.0, encontrarás una lista completa de los permisos que puedes usar para acceder a las API de Google.

Obtén tokens de acceso de OAuth 2.0

En los siguientes pasos, se muestra cómo interactúa tu aplicación con el servidor de OAuth 2.0 de Google para obtener el consentimiento de un usuario y realizar una solicitud a la API en su nombre. Tu aplicación debe tener ese consentimiento para poder ejecutar una solicitud a la API de Google que requiera la autorización del usuario.

Paso 1: Redireccionar al servidor de OAuth 2.0 de Google

Si deseas solicitar permiso para acceder a los datos de un usuario, redirecciónalo al servidor de OAuth 2.0 de Google.

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 aplicaciones de servidor web:

Parámetros
client_id Obligatorio

El ID de cliente de tu aplicación. Puedes encontrar este valor en API Console Credentials page.

redirect_uri Obligatorio

Determina a dónde el servidor de la API redirecciona al usuario una vez que completa el flujo de autorización. El valor debe coincidir exactamente con uno de los URI de redireccionamiento autorizados para el cliente de OAuth 2.0 que configuraste en la Credentials pagede API Consolede tu cliente. Si este valor no coincide con un URI de redireccionamiento autorizado para el client_id proporcionado, recibirás un error redirect_uri_mismatch.

Ten en cuenta que el esquema http o https, la mayúscula y la barra final ("/") deben coincidir.

response_type Obligatorio

Las aplicaciones de JavaScript deben establecer el valor del parámetro en token. Este valor le indica al servidor de autorización de Google que muestre el token de acceso como un par name=value en el identificador de fragmento del URI (#) al que se redirecciona al usuario después de completar el proceso de autorización.

scope Obligatorio

Una lista de permisos delimitados por espacios que identifican los recursos a los que tu aplicación podría acceder en nombre del usuario. Estos valores informan la pantalla de consentimiento que Google muestra al usuario.

Los permisos permiten que tu aplicación solo solicite acceso a los recursos que necesita y, a su vez, permiten que los usuarios controlen la cantidad de acceso que otorgan a tu aplicación. Por lo tanto, existe una relación inversa entre la cantidad de permisos solicitados y la probabilidad de obtener el consentimiento del usuario.

La versión 3 de la API de YouTube Data utiliza los siguientes alcances:

Permisos
https://www.googleapis.com/auth/youtubeAdministrar tu cuenta de YouTube
https://www.googleapis.com/auth/youtube.channel-memberships.creatorVer una lista de los miembros actuales y activos de su canal, su nivel actual y el momento en que se hicieron miembros
https://www.googleapis.com/auth/youtube.force-sslVea, edite y borre de forma permanente sus videos, calificaciones, comentarios y subtítulos de YouTube
https://www.googleapis.com/auth/youtube.readonlyPermite ver tu cuenta de YouTube.
https://www.googleapis.com/auth/youtube.uploadPermite administrar tus videos de YouTube.
https://www.googleapis.com/auth/youtubepartnerVer y administrar sus elementos y el contenido asociado en YouTube
https://www.googleapis.com/auth/youtubepartner-channel-auditPermite ver información privada de tu canal de YouTube que sea relevante durante el proceso de auditoría con un socio de YouTube.

En el documento Permisos de la API de OAuth 2.0, se proporciona una lista completa de los permisos que puedes usar para acceder a las API de Google.

Recomendamos que tu aplicación solicite acceso a los permisos de autorización en contexto siempre que sea posible. Si solicitas acceso a los datos del usuario en contexto, mediante la autorización incremental, ayudarás a los usuarios a comprender más fácilmente por qué tu aplicación necesita el acceso que solicita.

state Se recomienda

Especifica cualquier valor de string que tu aplicación use para mantener el estado entre tu solicitud de autorización y la respuesta del servidor de autorización. El servidor muestra el valor exacto que envías como un par name=value en el identificador de fragmento de URL (#) de redirect_uri después de que el usuario da su consentimiento o rechaza la solicitud de acceso de tu aplicación.

Puedes usar este parámetro para varios fines, como dirigir al usuario al recurso correcto en tu aplicación, enviar nonces y mitigar la falsificación de solicitudes entre sitios. Como tu redirect_uri es posible adivinar, usar un valor state puede aumentar la seguridad de que una conexión entrante sea el resultado de una solicitud de autenticación. Si generas una string aleatoria o codificas el hash de una cookie o algún otro valor que capture el estado del cliente, puedes validar la respuesta para garantizar, además, que la solicitud y la respuesta se originen en el mismo navegador y brindar protección contra ataques como la falsificación de solicitudes entre sitios. Consulta la documentación de OpenID Connect para ver un ejemplo de cómo crear y confirmar un token state.

include_granted_scopes Opcional

Permite que las aplicaciones usen la autorización incremental para solicitar acceso a permisos adicionales en contexto. Si configuras el valor de este parámetro en true y se otorga la solicitud de autorización, el nuevo token de acceso también abarcará todos los permisos a los que el usuario otorgó acceso a la aplicación anteriormente. Consulta la sección sobre autorización incremental para ver ejemplos.

login_hint Opcional

Si tu aplicación sabe qué usuario está intentando autenticarse, puede usar este parámetro para proporcionar una sugerencia al servidor de autenticación de Google. El servidor usa la sugerencia para simplificar el flujo de acceso, ya sea completando previamente el campo de correo electrónico en el formulario de acceso o seleccionando la sesión de acceso múltiple apropiada.

Establece el valor del parámetro en una dirección de correo electrónico o un identificador sub, que sea equivalente al ID de Google del usuario.

prompt Opcional

Una lista de instrucciones delimitadas por espacios y que distinguen mayúsculas de minúsculas de los mensajes para presentar al usuario. Si no especificas este parámetro, se le pedirá al usuario solo la primera vez que tu proyecto solicite acceso. Consulta Cómo solicitar un nuevo consentimiento para obtener más información.

Los valores posibles son:

none No muestres ninguna pantalla de autenticación o consentimiento. No se debe especificar con otros valores.
consent Solicita el consentimiento del usuario.
select_account Pídele al usuario que seleccione una cuenta.

Redireccionamiento de muestra al servidor de autorización de Google

La URL de ejemplo a continuación solicita acceso sin conexión (access_type=offline) a un alcance que permite el acceso para ver la cuenta de YouTube del usuario. Utiliza autorización incremental para garantizar que el nuevo token de acceso cubra cualquier alcance al que el usuario haya otorgado acceso a la aplicación con anterioridad. 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. Debido a 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 dirigida 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();
}

Paso 2: Google solicita el consentimiento del usuario

En este paso, el usuario decide si le otorga a tu aplicación el acceso solicitado. En esta etapa, Google muestra una ventana de consentimiento que muestra el nombre de tu aplicación y los servicios de la API de Google a los que solicita permiso de acceso con las credenciales de autorización del usuario y un resumen de los permisos de acceso que se otorgarán. Luego, el usuario podrá otorgar acceso a uno o más permisos solicitados por la aplicación, o rechazar la solicitud.

En esta etapa, tu aplicación no necesita realizar ninguna acción, ya que espera la respuesta del servidor de OAuth 2.0 de Google que indique si se otorgó algún acceso. Esa respuesta se explica en el siguiente paso.

Errores

Las solicitudes al extremo de autorización de OAuth 2.0 de Google pueden mostrar mensajes de error para el usuario en lugar de los flujos de autenticación y autorización esperados. A continuación, se indican los códigos de error comunes y las soluciones sugeridas.

admin_policy_enforced

La Cuenta de Google no puede autorizar uno o más permisos solicitados debido a las políticas del administrador de Google Workspace. Consulta el artículo de ayuda para administradores de Google Workspace: Controla qué apps internas y de terceros acceden a los datos de Google Workspace para obtener más información sobre cómo un administrador puede restringir el acceso a todos los permisos o a los permisos sensibles y restringidos hasta que se otorgue acceso de manera explícita a tu ID de cliente de OAuth.

disallowed_useragent

El extremo de autorización se muestra dentro de un usuario-agente incorporado no permitido por las políticas de OAuth 2.0 de Google.

Android

Los desarrolladores de Android pueden encontrar este mensaje de error cuando abren solicitudes de autorización en android.webkit.WebView. En su lugar, los desarrolladores deben usar bibliotecas de Android, como el Acceso con Google para Android o AppAuth para Android de OpenID Foundation.

Los desarrolladores web pueden encontrar este error cuando una app para Android abre un vínculo web general en un usuario-agente incorporado y un usuario navega al extremo de autorización de OAuth 2.0 de Google desde tu sitio. Los desarrolladores deben permitir que se abran vínculos generales en el controlador de vínculos predeterminado del sistema operativo, que incluye los controladores de Android App Links o la app del navegador predeterminada. La biblioteca de pestañas personalizadas de Android también es una opción compatible.

iOS

Los desarrolladores de iOS y macOS pueden encontrar este error cuando abren solicitudes de autorización en WKWebView. En su lugar, los desarrolladores deben usar bibliotecas para iOS, como el Acceso con Google para iOS o AppAuth para iOS de OpenID Foundation.

Los desarrolladores web pueden encontrar este error cuando una app para iOS o macOS abre un vínculo web general en un usuario-agente incorporado y un usuario navega al extremo de autorización de OAuth 2.0 de Google desde tu sitio. Los desarrolladores deben permitir que se abran vínculos generales en el controlador de vínculos predeterminado del sistema operativo, que incluye controladores de vínculos universales o la app de navegador predeterminada. La biblioteca SFSafariViewController también es una opción compatible.

org_internal

El ID de cliente de OAuth en la solicitud es parte de un proyecto que limita el acceso a las Cuentas de Google en una organización de Google Cloud específica. Para obtener más información sobre esta opción de configuración, consulta la sección Tipo de usuario en el artículo de ayuda Configura la pantalla de consentimiento de OAuth.

invalid_client

El origen desde el que se realizó la solicitud no está autorizado para este cliente. Consulta origin_mismatch.

invalid_grant

Cuando usas la autorización incremental, es posible que el token haya vencido o se haya invalidado. Vuelve a autenticar al usuario y solicita su consentimiento para obtener tokens nuevos. Si sigues viendo este error, asegúrate de que la aplicación se haya configurado de forma correcta y de usar los tokens y parámetros correctos en tu solicitud. De lo contrario, es posible que la cuenta de usuario se haya borrado o inhabilitado.

origin_mismatch

Es posible que el esquema, el dominio o el puerto del JavaScript que origina la solicitud de autorización no coincida con un URI de origen de JavaScript autorizado registrado para el ID de cliente de OAuth. Revisa los orígenes autorizados de JavaScript en Google API Console Credentials page.

redirect_uri_mismatch

El redirect_uri pasado en la solicitud de autorización no coincide con un URI de redireccionamiento autorizado para el ID de cliente de OAuth. Revisa los URIs de redireccionamiento autorizados en el Google API Console Credentials page.

Es posible que el esquema, el dominio o el puerto del JavaScript que origina la solicitud de autorización no coincida con un URI de origen de JavaScript autorizado registrado para el ID de cliente de OAuth. Revisa los orígenes autorizados de JavaScript en Google API Console Credentials page.

El parámetro redirect_uri puede hacer referencia al flujo fuera de banda (OOB) de OAuth que dejó de estar disponible y ya no se admite. Consulta la guía de migración para actualizar tu integración.

invalid_request

Se produjo un error con la solicitud que realizaste. Esto podría deberse a varios motivos:

  • La solicitud no tenía el formato correcto
  • Faltan parámetros obligatorios en la solicitud
  • La solicitud usa un método de autorización que Google no admite. Verifica que tu integración de OAuth use un método de integración recomendado

Paso 3: Controla la respuesta del servidor de OAuth 2.0

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, esta 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 muestra en el fragmento de hash del URI de redireccionamiento, como se observa 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 string 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 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 muestra, que solicita acceso de solo lectura para ver los metadatos de los archivos en tu unidad de Google Drive:

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, se te redireccionará a http://localhost/oauth2callback. Esa URL generará un error 404 NOT FOUND, a menos que tu máquina local entregue un archivo en esa dirección. En el siguiente paso, se proporcionan más detalles sobre la información que se muestra en el URI cuando se redirecciona al usuario a tu aplicación.

Llama a las APIs de Google

Extremos de OAuth 2.0

Una vez que tu aplicación obtiene 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. Para ello, incluye un parámetro de consulta access_token o un valor Bearer del encabezado HTTP Authorization. Cuando es 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 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 datos de YouTube).

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

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

Ejemplos de GET HTTP

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 que usa 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

curl ejemplos

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

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

Como alternativa, puedes usar 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 de 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 se obtuvo 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);

Ejemplo completo

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 string del identificador de fragmento.
  3. 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 datos de YouTube para recuperar datos sobre el canal de YouTube del usuario autorizado.

  4. 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 desde la página Permisos de tu Cuenta de Google. La app aparecerá como Demostración de OAuth 2.0 para Documentos de la API de Google.

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 URI de redireccionamiento autorizados para el cliente de OAuth 2.0, que configuraste en la API Console Credentials 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';
  var fragmentString = location.hash.substring(1);

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

  // 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() {
    // 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': 'try_sample_request',
                  '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>

Reglas de validación de origen de JavaScript

Google aplica las siguientes reglas de validación a los orígenes de JavaScript para ayudar a los desarrolladores a proteger sus aplicaciones. Tus orígenes de JavaScript deben cumplir con estas reglas. Consulta la sección 3 de RFC 3986 para obtener la definición de dominio, host y esquema, que se menciona a continuación.

Reglas de validación
Esquema

Los orígenes de JavaScript deben usar el esquema HTTPS, no el simple HTTP. Los URI de host local (incluidos los URI de dirección IP de localhost) están exentos de esta regla.

Host

Los hosts no pueden ser direcciones IP sin procesar. Las direcciones IP de host local están exentas de esta regla.

Dominio
  • Los TLD de host (dominios de nivel superior) deben pertenecer a la lista de sufijos públicos.
  • Los dominios de host no pueden ser “googleusercontent.com”.
  • Los orígenes de JavaScript no pueden contener dominios de acortador de URL (p.ej., goo.gl), a menos que la app sea propietaria del dominio.
  • Información del usuario

    Los orígenes de JavaScript no pueden contener el subcomponente userinfo.

    Ruta de acceso

    Los orígenes de JavaScript no pueden contener el componente de la ruta de acceso.

    Consulta

    Los orígenes de JavaScript no pueden contener el componente de consulta.

    Fragmento

    Los orígenes de JavaScript no pueden contener el componente del fragmento.

    Caracteres Los orígenes de JavaScript no pueden contener ciertos caracteres, incluidos los siguientes:
    • Caracteres comodín ('*')
    • Caracteres ASCII no imprimibles
    • Codificaciones de porcentaje no válidas (cualquier codificación de porcentaje que no siga la codificación de URL de un signo de porcentaje seguido de dos dígitos hexadecimales)
    • Caracteres nulos (un carácter NULL codificado, p.ej., %00, %C0%80)

    Autorización incremental

    En el protocolo OAuth 2.0, la app solicita autorización para acceder a los recursos, que se identifican por alcances. Se considera una práctica recomendada para la experiencia del usuario solicitar la autorización de los recursos en el momento en que los necesitas. Para llevar a cabo esta práctica, el servidor de autorización de Google es compatible con la autorización incremental. Esta función te permite solicitar permisos a medida que sean necesarios y, si el usuario otorga permiso para el alcance nuevo, muestra un código de autorización que se puede intercambiar por un token que contiene todos los permisos que el usuario le otorgó al proyecto.

    Por ejemplo, supongamos que una aplicación ayuda a los usuarios a identificar eventos locales interesantes. La app permite a los usuarios ver videos sobre los eventos, calificarlos y agregarlos a playlists. Los usuarios también pueden usar la app para agregar eventos a sus Calendarios de Google.

    En este caso, durante el acceso, es posible que la app no necesite ni solicite acceso a ningún alcance. Sin embargo, si el usuario intentó calificar un video, agregarlo a una playlist o realizar otra acción de YouTube, la app podría solicitar acceso al alcance https://www.googleapis.com/auth/youtube.force-ssl. Del mismo modo, la app podría solicitar acceso al alcance https://www.googleapis.com/auth/calendar si el usuario intenta agregar un evento de calendario.

    Las siguientes reglas se aplican a un token de acceso obtenido de una autorización incremental:

    • El token se puede usar para acceder a los recursos correspondientes a cualquiera de los permisos incluidos en la nueva autorización combinada.
    • Cuando utilizas el token de actualización para la autorización combinada a fin de obtener un token de acceso, el token representa la autorización combinada y se puede usar para cualquiera de los valores de scope incluidos en la respuesta.
    • La autorización combinada incluye todos los permisos que el usuario otorgó al proyecto de API, incluso si los otorgamientos se solicitaron de diferentes clientes. Por ejemplo, si un usuario otorgara acceso a un alcance mediante el cliente de escritorio de una aplicación y, luego, otorgó otro alcance a la misma aplicación a través de un cliente móvil, la autorización combinada incluiría ambos alcances.
    • Si revocas un token que representa una autorización combinada, se revoca de forma simultánea el acceso a todos los permisos de esa autorización en nombre del usuario asociado.

    En los siguientes ejemplos de código, se indica cómo agregar permisos a un token de acceso existente. Este enfoque permite que tu app evite tener que administrar varios tokens de acceso.

    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 de ejemplo completo almacena una lista de permisos para los cuales el token de acceso es válido si se configura la propiedad oauth2-test-params.scope en el almacenamiento local del navegador).

    En el fragmento, se comparan los permisos en los que el token de acceso es válido con el alcance que quieres usar para una consulta en particular. Si el token de acceso no cubre ese alcance, se iniciará el flujo de OAuth 2.0. Aquí, la función oauth2SignIn es la misma que la que se proporcionó en el paso 2 (y 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.
    }

    Revocación de un token

    En algunos casos, es posible que el usuario quiera revocar el acceso otorgado a una aplicación. El usuario puede revocar el acceso a través de la Configuración de la cuenta. Para obtener más información, consulta la sección Cómo quitar el acceso a sitios o apps de la sección Sitios y apps de terceros que tienen acceso a tu cuenta.

    También es posible que una aplicación revoque de forma programática el acceso que se le otorgó. La revocación programática es importante en los casos en que un usuario anula la suscripción, quita una aplicación o cambia de forma significativa los recursos de la API que requiere una app. En otras palabras, parte del proceso de eliminación puede incluir una solicitud a la API para garantizar que se quiten los permisos otorgados anteriormente a la aplicación.

    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 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 un token de acceso o de actualización. Si se trata de 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. Para las condiciones de error, se muestra 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 extremo de OAuth 2.0 de Google para revocar tokens no admite el uso compartido de recursos entre dominios (CORS), el código crea un formulario y lo envía al extremo 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();
    }