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 y, al mismo tiempo, mantener la privacidad de sus nombres de usuario, contraseñas y demás información. Por ejemplo, una aplicación puede usar OAuth 2.0 a fin de obtener permiso para subir videos al canal de YouTube de un usuario.

Este flujo de OAuth 2.0 se denomina flujo de concesión implícito. Está diseñada para aplicaciones que acceden a las APIs solo mientras el usuario está presente en la aplicación. Esas 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 esta 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 redirecciona al usuario de vuelta a tu app. El redireccionamiento incluye un token de acceso que tu 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 para realizar llamadas autorizadas a Google, debes usar la biblioteca 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.

Para habilitar una API en tu proyecto, haz lo siguiente:

  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 buscar y habilitar la API de datos de YouTube. Encuentra cualquier otra API que use tu aplicación y habilítalas.

Crea credenciales de autorización

Cualquier aplicación que use OAuth 2.0 para acceder a las API de Google debe tener credenciales de autorización que identifiquen la aplicación en 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 con el objetivo de 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 alcances 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 alcances a los que tu app necesitará permiso para acceder.

La versión 3 de la API de datos de YouTube 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.

El documento Permisos de las API de OAuth 2.0 contiene una lista completa de los alcances 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 a fin de obtener el consentimiento de un usuario para realizar una solicitud a la API en su nombre. Tu aplicación debe tener ese consentimiento antes de 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 quieres 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 después de que este completa el flujo de autorización. El valor debe coincidir exactamente con uno de los URI de redireccionamiento autorizados para el cliente OAuth 2.0, que configuraste en el API Console Credentials pagede tu cliente. Si este valor no coincide con un URI de redireccionamiento autorizado para el client_id proporcionado, obtendrás un error redirect_uri_mismatch.

Ten en cuenta que el esquema http o https, el caso 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 delimitada por espacios de alcances 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, al mismo tiempo, permiten a los usuarios controlar la cantidad de acceso que otorgan a tu aplicación. Por lo tanto, existe una relación inversa entre la cantidad de alcances solicitados y la probabilidad de obtener el consentimiento del usuario.

La versión 3 de la API de datos de YouTube 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 las API de OAuth 2.0, se proporciona una lista completa de los alcances 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 una vez 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 de tu aplicación, enviar nonces y mitigar la falsificación de solicitudes entre sitios. Como tu redirect_uri puede adivinarse, el uso de 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 concede la solicitud de autorización, el nuevo token de acceso también cubrirá cualquier alcance al que el usuario haya otorgado acceso anteriormente a la aplicación. Consulta la sección de autorización incremental para ver ejemplos.

login_hint Opcional

Si tu aplicación sabe qué usuario está intentando autenticar, 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 adecuada.

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 mensajes separados por espacios que distinguen mayúsculas de minúsculas para presentar al usuario. Si no especificas este parámetro, se le solicitará al usuario solo la primera vez que tu proyecto solicite acceso. Consulta Cómo solicitar que se vuelva a dar consentimiento para obtener más información.

Los valores posibles son:

none No muestres ninguna pantalla de autenticación ni de 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 la autorización incremental para garantizar que el token de acceso nuevo cubra cualquier alcance al que el usuario le 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 la 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 API 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 para 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 la 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 para acceder con las credenciales de autorización del usuario, además de un resumen de los permisos de acceso que se otorgarán. El usuario puede otorgar acceso a uno o más alcances solicitados por tu aplicación, o bien rechazar la solicitud.

En esta etapa, tu aplicación no necesita hacer nada, ya que espera la respuesta del servidor de OAuth 2.0 de Google que indica 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 esperados de autenticación y autorización. 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 de su 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 todos los permisos sensibles y restringidos hasta que se otorgue acceso explícitamente a tu ID de cliente de OAuth.

disallowed_useragent

El extremo de autorización se muestra en un usuario-agente incorporado que no está 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 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 Android Custom Tabs 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 de iOS como 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 los controladores de Universal Links o la app del navegador predeterminada. La biblioteca SFSafariViewController también es una opción compatible.

org_internal

El ID de cliente de OAuth de 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 pídele 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 estar usando 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 originó la solicitud de autorización no coincidan con el URI de origen de JavaScript autorizado registrado para el ID de cliente de OAuth. Revisa los orígenes autorizados de JavaScript en el 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 URI de redireccionamiento autorizados en el Google API Console Credentials page.

Es posible que el esquema, el dominio o el puerto del JavaScript que originó la solicitud de autorización no coincidan con el URI de origen de JavaScript autorizado registrado para el ID de cliente de OAuth. Revisa los orígenes autorizados de JavaScript en el archivo 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 es compatible. Consulta la guía de migración para actualizar tu integración.

invalid_request

Hubo un problema con la solicitud que realizaste. Esto podría deberse a varios motivos:

  • La solicitud no tenía el formato adecuado
  • 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, 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 muestra en el fragmento de hash del URI de redireccionamiento, como se indica 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 está establecido 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

Respuesta de muestra del servidor de OAuth 2.0

Si deseas 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 de vuelta a tu aplicación.

Llama a las APIs de Google

Extremos de OAuth 2.0

Después de 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 mediante un parámetro de consulta access_token o un valor Bearer del encabezado HTTP Authorization. Siempre que 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 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 el Playground de OAuth 2.0.

Ejemplos de GET de HTTP

Una llamada al extremo youtube.channels (la API de datos de YouTube) 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

A continuación, 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

curl ejemplos

Puedes probar estos comandos con la aplicación de línea de comandos curl. En este ejemplo, 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

Como alternativa, puedes usar 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 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, la guía de compatibilidad con CORS en la documentación de esa biblioteca probablemente 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. 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 verificará 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 alcances solicitados, se redirecciona al usuario a la página original, que analiza el token de acceso desde la string 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 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 de forma correcta, 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 OAuth 2.0 Demo for Google API Docs.

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 configurarse con 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, obtendrás un error redirect_uri_mismatch. El 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 ver 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 HTTP sin formato. Los URI de Localhost (incluidos los URI de direcciones IP de localhost) están exentos de esta regla.

Host

Los hosts no pueden ser direcciones IP sin procesar. Las direcciones IP de Localhost 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 acortadores 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, entre los que se incluyen los siguientes:
    • Caracteres comodín ('*')
    • Caracteres ASCII no imprimibles
    • Codificaciones de porcentaje no válidas (cualquier codificación de porcentaje que no siga la forma de codificación URL con 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, tu app solicita autorización para acceder a los recursos, que se identifican por alcances. Se considera una mejor práctica de experiencia del usuario solicitar la autorización de los recursos en el momento en que los necesitas. Para habilitar esa práctica, el servidor de autorización de Google admite 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 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 en 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 intentara 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 usas el token de actualización de la autorización combinada para obtener un token de acceso, este representa la autorización combinada y se puede usar para cualquiera de los valores scope incluidos en la respuesta.
    • La autorización combinada incluye todos los alcances que el usuario otorgó al proyecto de API, incluso si los otorgamientos se solicitaron a clientes diferentes. Por ejemplo, si un usuario otorgó acceso a un alcance con el cliente de escritorio de una aplicación y, luego, otorgó otro alcance a la misma aplicación a través de un cliente para dispositivos móviles, la autorización combinada incluirá ambos alcances.
    • Si revocas un token que representa una autorización combinada, el acceso a todos los permisos de esa autorización en nombre del usuario asociado se revoca de forma simultánea.

    En las siguientes muestras 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 que el token de acceso es válido mediante la configuración de la propiedad oauth2-test-params.scope en el almacenamiento local del navegador).

    El fragmento compara los permisos para los cuales el token de acceso es válido con el alcance que quieres usar en 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 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.
    }

    Revocar un token

    En algunos casos, es posible que el usuario desee revocar el acceso que se le otorgó a una aplicación. Un usuario puede revocar el acceso desde la Configuración de la cuenta. Para obtener más información, consulta la sección Cómo quitar el acceso a un sitio o una app del artículo de Sitios y apps de terceros que tienen acceso a tu cuenta para obtener más información.

    También es posible que una aplicación revoque de manera programática el acceso que se le otorgó. La revocación programática es importante en casos en los que un usuario anula la suscripción a una aplicación, quita una aplicación o cambia significativamente los recursos de la API que requiere una aplicación. 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 y, además, 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 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. Debido a 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();
    }