Autenticación de usuarios

Los protocolos de autenticación web usan funciones de HTTP, pero las Apps de Chrome se ejecutan dentro del contenedor de la app. no se cargan a través de HTTP, no pueden redireccionar ni configurar cookies.

Usa la API de Chrome Identity para autenticar usuarios: el getAuthToken para los usuarios que accedieron a sus cuentas. su Cuenta de Google y el launchWebAuthFlow para los usuarios que accedieron a una cuenta que no es de Google. Si el la aplicación usa su propio servidor para autenticar a los usuarios, deberás usar este último.

Cómo funciona

Los usuarios de las Apps de Chrome tienen una Cuenta de Google asociada a su perfil. Las apps pueden obtener tokens de OAuth2 para estos usuarios con la API de getAuthToken.

Las apps que quieran realizar la autenticación con proveedores de identidad ajenos a Google deben llamar launchWebAuthFlow Este método usa una ventana emergente del navegador para mostrar las capturas y páginas del proveedor. redirecciona a los patrones de URL específicos. Las URLs de redireccionamiento se pasan a la app, y esta extrae el token de la URL.

Autenticación de la Cuenta de Google

Estos son los cinco pasos que debes completar:

  1. Agrega permisos al manifiesto y sube tu app.
  2. Copia la clave del manifest.json instalado en tu manifiesto de origen para que tu ID de aplicación se mantendrán constantes durante el desarrollo.
  3. Obtén un ID de cliente de OAuth2 para tu aplicación de Chrome.
  4. Actualiza tu manifiesto para incluir el ID de cliente y los alcances.
  5. Obtén el token de autenticación.

Agrega permisos y sube la app

Debes asegurarte de que el permiso de identidad se encuentre en tu manifiesto. Luego, podrás subir tu app la página de administración de apps y extensiones (consulta Publicar).

"permissions": [
  "identity"
]

Copiar la clave en el manifiesto

Cuando registres tu aplicación en la consola de OAuth de Google, proporcionarás el ID de tu aplicación ID, que se verificará durante las solicitudes de tokens. Por eso, es importante tener una coherencia el ID de aplicación durante el desarrollo.

Para mantener el ID de aplicación constante, debes copiar la clave en el manifest.json instalado en el manifiesto de origen. No es la tarea más fácil, pero así es como se desarrolla:

  1. Ve al directorio de datos del usuario. Ejemplo en macOS: ~/Library/Application\ Support/Google/Chrome/Default/Extensions
  2. Obtén una lista de las aplicaciones y extensiones instaladas, y haz coincidir el ID de tu app en ellas. página de administración con el mismo ID aquí.
  3. Ve al directorio de la app instalada (esta será una versión dentro del ID de la app). Abre la aplicación instalada manifest.json (pico es una forma rápida de abrir el archivo).
  4. Copia la "clave". en el manifest.json instalado y pégalo en el manifiesto de origen de tu app .

Obtén tu ID de cliente de OAuth2

Tienes que registrar tu aplicación en la Consola de APIs de Google para obtener el ID de cliente:

  1. Accede a la Consola de APIs de Google con la misma cuenta de Google que usaste para subir tu app a en Chrome Web Store.
  2. Crea un proyecto nuevo expandiendo el menú desplegable en la esquina superior izquierda y seleccionando el el elemento de menú Crear....
  3. Una vez creada y nombrada, ve a la pestaña “Servicios” elemento del menú de navegación y activa cualquier servicios que tu app necesita.
  4. Ve a la página "Acceso a la API" el elemento del menú de navegación y haz clic en Crear un cliente de OAuth 2.0 ID....
  5. Ingresa la información de marca solicitada y selecciona el tipo de Aplicación instalada.
  6. Selecciona Aplicación de Chrome y, luego, ingresa el ID de la aplicación (el mismo ID que se muestra en las aplicaciones y la página de administración de extensiones).

Actualiza tu manifiesto con el ID de cliente y los alcances de OAuth2

Debes actualizar tu manifiesto para incluir el ID de cliente y los alcances. Este es el ejemplo de “oauth2” para la muestra de gdrive:

"oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  }

Obtén tokens de acceso

Ya estás listo para obtener el token de autenticación. Para ello, llama a identity.getAuthToken.

chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
  // Use the token.
});

Interacción con los usuarios

Cuando llamas a getAuthToken, puedes pasar una marca ('interactive': true en el ejemplo anterior). que indica si deseas que se llame a la API en modo interactivo o silencioso. Si invocas la API en modo interactivo, se mostrará al usuario una IU de acceso o aprobación cuando sea necesario, como se muestra en la captura de pantalla a continuación:

captura de pantalla que muestra la IU cuando una app usa la API de Identity para autenticar una Cuenta de Google

Si invocas la API en modo silencioso, esta solo devolverá un token si es posible producir uno sin mostrar ninguna IU. Esto es útil cuando una app hace el flujo al iniciarla por ejemplo, o en general cuando no hay gestos del usuario involucrados.

La práctica recomendada es usar el modo silencioso cuando no haya gestos del usuario involucrados y usar interactivo si hay un gesto del usuario (por ejemplo, si hizo clic en el botón Acceder en tu app). Ten en cuenta que no aplicamos ningún requisito de gestos.

Almacenamiento en caché

Chrome tiene una caché de tokens de acceso en la memoria, por lo que puedes llamar a getAuthToken cuando lo necesites usa un token. La caché controla automáticamente el vencimiento del token.

Puedes ver el estado actual de la caché de tokens en chrome://identity-internals.

Hay algunos casos, como cuando el usuario cambia su contraseña, cuando los tokens de acceso no vencidos dejará de funcionar. Las llamadas a la API que usan el token comenzarán a mostrarse con el código de estado HTTP 401. Si si detectas que esto ha sucedido, puedes quitar el token no válido de la caché de Chrome llamando identity.removeCachedAuthToken.

Ejemplo de uso de removeCachedAuthToken:

// callback = function (error, httpStatus, responseText);
function authenticatedXhr(method, url, callback) {
  var retry = true;
  function getTokenAndXhr() {
    chrome.identity.getAuthToken({/* details */},
                                 function (access_token) {
      if (chrome.runtime.lastError) {
        callback(chrome.runtime.lastError);
        return;
      }

      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.setRequestHeader('Authorization',
                           'Bearer ' + access_token);

      xhr.onload = function () {
        if (this.status === 401 && retry) {
          // This status may indicate that the cached
          // access token was invalid. Retry once with
          // a fresh token.
          retry = false;
          chrome.identity.removeCachedAuthToken(
              { 'token': access_token },
              getTokenAndXhr);
          return;
        }

        callback(null, this.status, this.responseText);
      }
    });
  }
}

Autenticación con cuentas ajenas a Google

Estos son los tres pasos que debes completar:

  1. Regístrate con el proveedor.
  2. Agrega permisos para los recursos del proveedor a los que accederá tu app.
  3. Obtén el token de autenticación.

Regístrate con el proveedor

Debes registrar un ID de cliente de OAuth2 con el proveedor y configurarlo como un sitio web. Para ingresar el URI de redireccionamiento durante el registro, usa la URL del formulario: https://<extension-id>.chromiumapp.org/<anything-here>

Por ejemplo, si el ID de tu app es abcdefghijklmnopqrstuvwxyzabcdef y quieres que provider_cb sea la ruta de acceso, para distinguirla con URI de redireccionamiento de otros proveedores, debes usar: https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb

Agregar permisos para el proveedor

Para hacer XHR de origen cruzado en los extremos de la API del proveedor, debes incluir en la lista de entidades permitidas las en los permisos:

"permissions": [
  ...
  "https://www.website-of-provider-with-user-photos.com/photos/*"
]

Obtén el token

Para obtener el token, haz lo siguiente:

chrome.identity.launchWebAuthFlow(
  {'url': '<url-to-do-auth>', 'interactive': true},
  function(redirect_url) { /* Extract token from redirect_url */ });

El <url-to-do-auth> es la URL que se usa para autenticar al proveedor desde un sitio web. Por ejemplo: supongamos que estás realizando un flujo de OAuth2 con un proveedor y que registraste tu app con ID de cliente 123456789012345 y quieres acceder a las fotos del usuario en el sitio web del proveedor: https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345& redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos

El proveedor realizará la autenticación y, si corresponde, mostrará la IU de acceso o aprobación para del usuario. Luego, se redireccionará a la página https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>

Chrome la capturará e invocará la devolución de llamada de la app con la URL de redireccionamiento completa. La app debería extraer el token de la URL.

Modo silencioso o interactivo

Cuando llamas a launchWebAuthFlow, puedes pasar una marca ('interactive': true en el ejemplo anterior). indicar si deseas que se llame a la API en modo interactivo o no (también conocido como modo silencioso) Si invocas la API en modo interactivo, se muestra la IU al usuario, si es necesario, para obtener el token (acceso IU o IU de aprobación o, en el caso de cualquier proveedor, IU específica).

Si invocas la API en modo silencioso, esta solo devolverá un token si el proveedor puede proporcionar un token sin mostrar ninguna IU. Esto es útil cuando una app hace el flujo en la app o, en general, cuando no hay gestos del usuario involucrados.

La práctica recomendada es usar el modo silencioso cuando no haya gestos del usuario involucrados y usar interactivo si hay un gesto del usuario (por ejemplo, si hizo clic en el botón Acceder en tu app). Ten en cuenta que no aplicamos el requisito de gestos.