OAuth2 es el protocolo estándar de la industria para la autorización. Proporciona un mecanismo para que los usuarios otorguen 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 compila una extensión que accede a los contactos de Google de un usuario con la API de Google People y la API de Chrome Identity. Debido a que las extensiones no se cargan a través de HTTPS, no pueden realizar redireccionamientos ni establecer cookies, por lo que dependen de la API de Chrome Identity para usar OAuth2.
Comenzar
Comienza por crear un directorio y los siguientes archivos de partida.
manifest.json
Para agregar el manifiesto, crea un archivo llamado manifest.json y, luego, 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 trabajador del servicio de extensión, crea un archivo llamado service-worker.js y, luego, incluye 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, luego, incluye 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
Preservar un solo ID es esencial durante el desarrollo. Para mantener un ID coherente, sigue estos pasos:
Sube la extensión al panel del desarrollador
Empaqueta el directorio de la extensión en un archivo .zip y súbelo al panel de Chrome Developer sin publicarlo:
- En el panel para desarrolladores, haz clic en Agregar nuevo elemento.
- Haz clic en Explorar archivos, selecciona el archivo ZIP de la extensión y súbelo.
- Ve a la pestaña Paquete y haz clic en Ver clave pública.
Cuando se abra el cuadro de diálogo, sigue estos pasos:
- Copia el código entre
-----BEGIN PUBLIC KEY-----y-----END PUBLIC KEY-----. - Quita los saltos de línea para que quede una sola línea de texto.
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",
}
Cómo comparar IDs
Abre la página Administración de extensiones en chrome://extensions, asegúrate de que el Modo de desarrollador esté habilitado y sube el directorio de la extensión sin empaquetar. Compara el ID de la extensión en la página de administración de extensiones con el ID del artículo en el Panel del desarrollador. Deberían coincidir.
Crea un ID de cliente de OAuth
Navega a la Consola de APIs de Google y crea un proyecto nuevo. Cuando todo esté listo, selecciona Credenciales en la barra lateral, haz clic en Crear credenciales y elige ID de cliente de OAuth.
En la página Crear ID de cliente, selecciona Extensión de Chrome. Completa el nombre de la extensión y coloca el ID de extensión al final de la URL en el campo ID de aplicación.
Para finalizar, haz 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 debajo de "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 el botón "Contactos de FriendBlock". Aparecerá un token de OAuth en la consola.
Habilita la API de Contactos de Google
Regresa a la consola de la API de Google y selecciona Biblioteca en la barra lateral. Busca "API de Google People", haz clic en el resultado correcto y habilítala.
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 la API de Google y vuelve a las credenciales. Haz clic en "Crear credenciales" y selecciona "Clave de API" en el menú desplegable.
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 siguiente.
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 la API de Google. La extensión debe registrar un objeto JSON que incluya un array de people/account_id en el campo memberResourceNames.
Cómo bloquear rostros
Ahora que la extensión muestra una lista de los contactos del usuario, puede realizar solicitudes adicionales para recuperar la información y los perfiles de esos contactos . La extensión usará memberResourceNames para recuperar la información de la foto de los contactos del usuario. Actualiza oauth.js para incluir 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 página y regresa a la extensión. Haz clic en el botón FriendBlock y listo. Disfruta de las caras de los contactos en un bloque.
