OAuth 2.0: autentica usuarios con Google

OAuth2 es el protocolo de autorización estándar de la industria. Proporciona un mecanismo para que los usuarios otorgar a las aplicaciones web y de escritorio acceso a información privada sin compartir su nombre de usuario contraseña y otras credenciales privadas.

En este instructivo, se crea una extensión que accede a los contactos de Google de los usuarios a través de la función Personas API y la API de Chrome Identity. Porque las extensiones no se cargan No se puede ejecutar HTTPS o configuran cookies, estas usan la API de Chrome Identity para usar OAuth2.

Comenzar

Primero, crea un directorio y los siguientes archivos de partida.

manifest.json

Para agregar el manifiesto, crea un archivo llamado manifest.json e incluye el siguiente código.

{
  "name": "OAuth Tutorial FriendBlock",
  "version": "1.0",
  "description": "Uses OAuth to connect to Google's People API and display contacts photos.",
  "manifest_version": 3,
  "action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

service-worker.js

Para agregar el service worker de extensión, crea un archivo llamado service-worker.js y agrega el siguiente código.

chrome.action.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

index.html

Agrega un archivo HTML llamado index.html y agrega el siguiente código.

<html>
  <head>
    <title>FriendBlock</title>
    <style>
      button {
        padding: 10px;
        background-color: #3C79F8;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <button>FriendBlock Contacts</button>
    <div id="friendDiv"></div>
  </body>
</html>

Mantén un ID de extensión coherente.

Conservar un solo ID es esencial durante el desarrollo. Para mantener un ID coherente, sigue estos pasos:

Subir la extensión al panel del desarrollador

Empaqueta el directorio de la extensión en un archivo .zip y súbelo a Chrome Developer. Panel sin publicarlo:

  1. En el Panel del desarrollador, haz clic en Agregar elemento nuevo.
  2. Haz clic en Explorar archivos, selecciona el archivo ZIP de la extensión y súbelo.
  3. Ve a la pestaña Package y haz clic en View public key.

Pestaña Paquete del panel para desarrolladores

Cuando se abra la ventana emergente, sigue estos pasos:

  1. Copia el código entre -----BEGIN PUBLIC KEY----- y -----END PUBLIC KEY-----.
  2. Quita las líneas nuevas para que se conviertan en una sola línea de texto.

Ventana emergente de clave pública

Agrega el código a manifest.json en el campo "key". De esta manera, la extensión usará el mismo ID.

{ // manifest.json
  "manifest_version": 3,
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}

Comparar IDs

Abre la página Administración de extensiones en chrome://extensions y asegúrate de que esté habilitado el Modo de desarrollador. y sube el directorio de la extensión sin empaquetar. Compara el ID de extensión en la administración de extensiones al ID de artículo del Panel del desarrollador. Deberían coincidir.

El ID del coincidencia de extensión

Crea un ID de cliente de OAuth

Navega a la consola de la API de Google y crea un proyecto nuevo. Cuando tengas todo listo, selecciona En la barra lateral, selecciona Credenciales, haz clic en Crear credenciales y elige ID de cliente de OAuth.

Crea credenciales para la extensión

En la página Crear ID de cliente, selecciona Extensión de Chrome. Completa el nombre de la extensión y el lugar. el ID de la extensión al final de la URL en el campo ID de aplicación.

Completa la información de la extensión.

Termina haciendo clic en Crear. La consola proporcionará un ID de cliente de OAuth.

Registra OAuth en el manifiesto

Incluye el campo "oauth2" en el manifiesto de la extensión. Coloca el ID de cliente de OAuth generado en "client_id" Por ahora, incluye una cadena vacía en "scopes".

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":[""]
  },
  ...
}

Inicia el primer flujo de OAuth

Registra el permiso identity en el manifiesto.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "permissions": [
    "identity"
  ],
  ...
}

Crea un archivo para administrar el flujo de OAuth llamado oauth.js y, luego, incluye el siguiente código.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      console.log(token);
    });
  });
};

Coloca una etiqueta de secuencia de comandos para oauth.js en el encabezado de index.html.

...
  <head>
    <title>FriendBlock</title>
    ...
    <script type="text/javascript" src="oauth.js"></script>
  </head>
...

Vuelve a cargar la extensión y haz clic en el ícono del navegador para abrir index.html. Abre la consola y haz clic en "FriendBlock Contacts" . Aparecerá un token de OAuth en la consola.

Visualiza el token en la consola

Habilita la API de Google People

Regresa a la Consola de APIs de Google y selecciona Biblioteca en la barra lateral. Busca "Personas de Google". API", haz clic en el resultado correcto y habilítalo.

Habilita la API de People

Agrega la biblioteca cliente de la API de Google People a "scopes" en el manifiesto de la extensión.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/contacts.readonly"
    ]
  },
  ...
}

Regresa a la consola de API de Google y regresa a las credenciales. Haz clic en "Crear credenciales". y selecciona "Clave de API" en el menú desplegable.

Crea credenciales de la API de People

Conserva la clave de API generada para usarla más adelante.

Crea la primera solicitud a la API

Ahora que la extensión tiene los permisos y las credenciales adecuados y puede autorizar a un usuario de Google, puede solicitar datos a través de la API de People. Actualiza el código en oauth.js para que coincida con el que se muestra a continuación.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
          init)
          .then((response) => response.json())
          .then(function(data) {
            console.log(data)
          });
    });
  });
};

Reemplaza API_KEY por la clave de API generada desde la consola de APIs de Google. La extensión deberías registrar un objeto JSON que incluya un array de people/account_id en el memberResourceNames.

Bloquear rostros

Ahora que la extensión devuelve una lista de los contactos del usuario, puede realizar solicitudes adicionales para recuperar los perfiles y la información de esos contactos . La extensión usará la memberResourceNames para recuperar la información de las fotos de los contactos del usuario. Actualizar oauth.js a incluyen el siguiente código.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
          init)
          .then((response) => response.json())
          .then(function(data) {
            let photoDiv = document.querySelector('#friendDiv');
            let returnedContacts = data.memberResourceNames;
            for (let i = 0; i < returnedContacts.length; i++) {
              fetch(
                  'https://people.googleapis.com/v1/' + returnedContacts[i] +
                      '?personFields=photos&key=API_KEY',
                  init)
                  .then((response) => response.json())
                  .then(function(data) {
                    let profileImg = document.createElement('img');
                    profileImg.src = data.photos[0].url;
                    photoDiv.appendChild(profileImg);
                  });
            };
          });
    });
  });
};

Vuelve a cargar la extensión y regresa a ella. Haz clic en el botón FriendBlock y listo. Disfruta de los rostros de tus contactos en un bloque.

Rostros de contactos en un bloque