Usar modelo de código

La biblioteca de Google Identity Services permite que los usuarios soliciten una autorización de Google con un flujo de UX de redireccionamiento o ventana emergente basado en el navegador. Esta inicia un flujo seguro de OAuth 2.0 y genera un token de acceso que se usa para llamar las APIs 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, la Cuenta de Google solicita un código de autorización de Google.
• Google responde y envía un código de autorización único a una devolución de llamada en tu app web de JavaScript que se ejecuta en el navegador del usuario o invoca directamente el extremo del código de autorización con 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 el acceso por usuario y y actualizar los tokens con una solicitud al extremo del token de Google.
• Google valida el código de autorización y confirma que se originó la solicitud. de tu plataforma segura, emite tokens de acceso y actualización, y devuelve la tokens llamando al extremo de acceso alojado por tu plataforma.
• Tu extremo de acceso recibe los tokens de acceso y actualización, el token de actualización para usarlo más adelante.

Punto clave: En tu servidor de backend, intercambias un código de autorización por tokens de actualización y tokens de acceso llamando al extremo del token de Google.

Inicializa un cliente de código

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

Modo de redireccionamiento (pop-up) o de redireccionamiento

Puedes compartir un código de Auth mediante Redireccionamiento o Flujo de usuarios del modo Ventana emergente. Con el modo de redireccionamiento, alojas una autorización de OAuth2 extremo en tu servidor, y Google redirecciona el usuario-agente a este extremo comparte el código de Auth como un parámetro de URL. Para el modo de ventanas emergentes, debes definir un código controlador de devolución de llamada, que envía el código de autorización a tu servidor. Modo de ventanas emergentes se pueden usar para proporcionar una experiencia del usuario fluida sin que los visitantes deban abandonar tu sitio.

Inicializa un cliente para el comando siguiente:

• Redirecciona el flujo de UX, establece ux_mode en redirect y el valor de redirect_uri al extremo del código de autorización de tu plataforma. El valor debe coincidir exactamente con uno de los URI de redireccionamiento autorizados para OAuth 2.0. que configuraste en la Consola de APIs. Además, debe cumplir con nuestra Reglas de validación de URI de redireccionamiento.

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

Punto clave: Para lograr el mejor equilibrio entre usabilidad y seguridad con el modo Popup, haz lo siguiente: Se recomienda el flujo de UX con un modelo de código de autorización.

Prevención de ataques CSRF

Para evitar los ataques de falsificación de solicitudes entre sitios (CSRF) un poco diferente, se emplean técnicas para los flujos de UX de los modos de redireccionamiento y de ventana emergente. Para redireccionamiento se usa el parámetro state de OAuth 2.0. Consulta la sección 10.12 de RFC6749 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 de ventanas emergentes, agrega un encabezado HTTP personalizado a tus solicitudes y, luego, confirma en el servidor coincide con el valor y el origen esperados.

Elige un modo de UX para ver un fragmento de código que muestra el código de autenticación y el manejo de CSRF:

Modo de redireccionamiento

Inicializa un cliente en el que Google redireccione el navegador del usuario a tu extremo de autenticación, compartiendo el código de Auth como un parámetro de URL.

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"
});

Modo de ventanas emergentes

Inicializa un cliente en el que el navegador del usuario recibe un código de Auth. Google y la envía a tu servidor.

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);
  },
});

Activar 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>

El usuario deberá acceder a una Cuenta de Google y dar su consentimiento para compartir alcances individuales antes de devolver un código de autorización a tu extremo de redireccionamiento o a tu controlador de devolución de llamada.

Manejo de código de Auth

Google genera un código de autorización único por usuario que usted recibe y verificar en tu servidor de backend.

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

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

• Crear un nuevo extremo de autorización si no tienes un implementación o

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

Extremo de autorización

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

Nombre	Valor
usuario de autenticación	Solicitud de autenticación de acceso del usuario
código	Un código de autorización de OAuth2 generado por Google
hd	El dominio alojado de la cuenta de usuario
mensaje	Diálogo de consentimiento del usuario
alcance	Lista separada por espacios de uno o más permisos de OAuth2 que se deben autorizar
state	Variable de estado de CRSF

Ejemplo de solicitud GET con parámetros de URL a un extremo llamado auth-code y alojada en 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 las bibliotecas JavaScript anteriores inician el flujo de código de autorización, o mediante llamadas directas a extremos de Google OAuth 2.0, se usa una solicitud POST.

Solicitud POST de ejemplo que contiene el código de autorización como una carga útil en el Cuerpo de la solicitud HTTP:

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

Importante: Anteriormente, se usaba POST para las solicitudes. Actualiza tu controlador a Acepta las solicitudes GET y POST, o bien considera alojar dos solicitudes si planeas seguir usando bibliotecas JS antiguas o llamar directamente Extremos de Google OAuth 2.0 mientras usan la biblioteca de Google Identity Services.

Validar la solicitud

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

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

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

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

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 verifica la solicitud, usa el código de Auth para obtener tokens de acceso y actualización de que Google realice llamadas a la API.

Sigue las instrucciones a partir del Paso 5: cambia el código de autorización por tokens de actualización y acceso de la sección Cómo usar OAuth 2.0 para el servidor web Guía de aplicaciones.

Administra tokens

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

También puede usar RISC para proteger las cuentas de usuario con varias cuentas Protección

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