Utilizar el modelo de código

La biblioteca de Servicios de identidad de Google permite a los usuarios solicitar un código de autorización a Google mediante un flujo emergente de navegador o de UX de redireccionamiento. Esto inicia un flujo de OAuth 2.0 seguro y da como resultado un token de acceso que se usa para llamar a las API de Google en nombre de un usuario.

Resumen del flujo de código de autorización de OAuth 2.0:

• Desde un navegador, con un gesto, como un clic en un botón, el propietario de la Cuenta de Google solicita un código de autorización a Google.
• Google responde y envía un código de autorización único a una devolución de llamada en la aplicación web de JavaScript que se ejecuta en el navegador del usuario o invoca directamente el extremo del código de autorización mediante un redireccionamiento del navegador.
• Tu plataforma de backend aloja un extremo de código de autorización y recibe el código. Después de la validación, este código se intercambia por acceso de usuario y por tokens de actualización mediante una solicitud al extremo del token de Google.
• Google valida el código de autorización, confirma la solicitud que se originó en tu plataforma segura, emite tokens de acceso y de actualización, y los muestra mediante una llamada al extremo de acceso que aloja tu plataforma.
• El extremo de acceso recibe los tokens de acceso y de actualización, y almacena el token de actualización de forma segura para su uso posterior.

Inicializa un cliente de código

El método google.accounts.oauth2.initCodeClient() inicializa un cliente de código.

Modo de ventana emergente o redireccionamiento

Puedes optar por compartir un código de autenticación mediante el flujo de usuarios en modo Redireccionamiento o Ventana emergente. Con el modo de redireccionamiento, alojas un extremo de autorización OAuth2 en tu servidor y Google redirecciona el usuario-agente a este extremo y comparte el código de Auth como parámetro de URL. Para el modo emergente, define un controlador de devolución de llamada de JavaScript, que envía el código de autorización a tu servidor. El modo emergente se puede usar para proporcionar una experiencia del usuario fluida sin que los visitantes tengan que abandonar tu sitio.

Para inicializar un cliente para:

• Redirecciona el flujo de UX, establece ux_mode en redirect y el valor de redirect_uri en el extremo del código de autorización de la plataforma. El valor debe coincidir exactamente con uno de los URI de redireccionamiento autorizados para el cliente de OAuth 2.0 que configuraste en la Consola de API. También debe cumplir con nuestras reglas de validación de URI de redireccionamiento.

• Flujo emergente de UX, establece ux_mode en popup y el valor de callback en el nombre de la función que usarás para enviar códigos de autorización a tu plataforma.

Prevención de ataques de CSRF

A fin de evitar ataques de falsificación de solicitudes entre sitios (CSRF), se emplean técnicas ligeramente diferentes para los flujos de UX en los modos de redireccionamiento y de ventana emergente. Para el modo de redireccionamiento, se usa el parámetro state de OAuth 2.0. Consulta la sección 10.12 de la RFC6749 sobre la falsificación de solicitudes entre sitios para obtener más información sobre cómo generar y validar el parámetro state. Con el modo emergente, agregas un encabezado HTTP personalizado a tus solicitudes y, luego, en el servidor confirmas que coincide con el valor y el origen esperados.

Elige un modo de UX para ver un fragmento de código que muestre el código de autenticación y la administración de CSRF:

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

Activa el flujo de código de OAuth 2.0

Llama al método requestCode() del cliente de código para activar el flujo de usuarios:

<button onclick="client.requestCode();">Authorize with Google</button>

Esto requerirá que el usuario acceda a una Cuenta de Google y dé su consentimiento para compartir permisos individuales antes de mostrar un código de autorización al extremo de redireccionamiento o al controlador de devolución de llamada.

Manejo del código de autenticación

Google genera un código de autorización único por usuario que recibes y verificas en el servidor de backend.

Para el modo de ventanas emergentes, el controlador especificado por callback, que se ejecuta en el navegador del usuario, retransmite el código de autorización a un extremo alojado en tu plataforma.

Para el modo de redireccionamiento, se envía una solicitud GET al extremo especificado por redirect_url y se comparte el código de autorización en el parámetro de código de URL. Para recibir el código de autorización, sigue estos pasos:

• Crea un extremo de autorización nuevo si no tienes una implementación existente.

• Actualiza tu extremo existente para que acepte solicitudes GET y parámetros de URL. Antes, se usaba una solicitud PUT con el valor del código de autorización en la carga útil.

Extremo de autorización

El extremo del código de autorización debe controlar las solicitudes GET con estos parámetros de string de consulta de URL:

A continuación, se muestra un ejemplo de una solicitud GET con parámetros de URL a un extremo llamado auth-code y alojado por example.com:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

Cuando el flujo de código de autorización se inicia en bibliotecas de JavaScript anteriores o mediante llamadas directas a los extremos de Google OAuth 2.0, se usa una solicitud POST.

A continuación, se muestra un ejemplo de una solicitud POST que contiene el código de autorización como carga útil en el cuerpo de la solicitud HTTP:

  Request URL: https://www.example.com/auth-code
  Request Payload:
  4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

Validar la solicitud

En tu servidor, haz lo siguiente para evitar ataques de CSRF.

Verifique el valor del parámetro state para el modo de redireccionamiento.

Confirma que el encabezado X-Requested-With: XmlHttpRequest esté configurado para el modo de ventana emergente.

Luego, debes continuar con la obtención de tokens de actualización y acceso de Google solo si primero verificaste correctamente la solicitud de código de autenticación.

Obtén tokens de acceso y de actualización

Después de que tu plataforma de backend reciba un código de autorización de Google y verifique la solicitud, usa el código de Auth para obtener tokens de acceso y actualización de Google a fin de realizar llamadas a la API.

Sigue las instrucciones a partir del Paso 5: Intercambia código de autorización para tokens de actualización y acceso de la guía Usa OAuth 2.0 para aplicaciones del servidor web.

Administra tokens

Tu plataforma almacena tokens de actualización de forma segura. Borra los tokens de actualización almacenados cuando se quiten las cuentas de usuario o google.accounts.oauth2.revoke revoque el consentimiento del usuario o directamente desde https://myaccount.google.com/permissions.

De manera opcional, puedes considerar RISC para proteger las cuentas de usuario con la Protección integral de la cuenta.

Por lo general, tu plataforma de backend llamará a las API de Google con un token de acceso. Si tu aplicación web también llamará directamente a las API de Google desde el navegador del usuario, debes implementar una forma de compartir el token de acceso con tu aplicación web, ya que está fuera del alcance de esta guía. Si sigues este enfoque y usas la biblioteca cliente de la API de Google para JavaScript, usa gapi.client.SetToken() a fin de almacenar temporalmente el token de acceso en la memoria del navegador y habilita la biblioteca para llamar a las API de Google.