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 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. Como las extensiones no se cargan a través de HTTPS, no se pueden realizar o configuran cookies, estas usan la API de Chrome Identity para usar OAuth2.
Comenzar
Primero, crea un directorio y los siguientes archivos de partida.
La extensión completa se puede descargar aquí.
manifest.json
Para agregar el manifiesto, crea un archivo llamado manifest.json e incluye el siguiente código. O
descarga el archivo aquí.
{
"name": "OAuth Tutorial FriendBlock",
"version": "1.0",
"description": "Uses OAuth to connect to Google's People API and display contacts photos.",
"manifest_version": 2,
"browser_action": {
"default_title": "FriendBlock, friends face's in a block."
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
}
}
background.js
Para agregar la secuencia de comandos en segundo plano, crea un archivo llamado background.js y agrega el siguiente código.
También puedes descargar el archivo aquí.
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Agrega un archivo HTML llamado index.html y agrega el siguiente código. También puedes descargar el archivo aquí.
<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>
Subir al Panel del desarrollador
Empaqueta el directorio de la extensión en un archivo .zip y súbelo a Chrome Developer.
Panel sin publicarlo:
- En el Panel del desarrollador, haz clic en Agregar elemento nuevo.
- Haz clic en Elegir archivo, selecciona el directorio de extensiones
.zipy súbelo. - Sin completar los campos adicionales, selecciona Guardar borrador y volver al panel.
Busca la extensión en Tus fichas y haz clic en más información. En la ventana emergente, copia el
y agrégala al manifiesto dentro del directorio descomprimido, en el campo "key".
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
Comparar IDs
Abre la página Administración de extensiones en chrome://extensions y asegúrate de que el modo de desarrollador esté habilitado.
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.
La extensión mantendrá el mismo ID si incluye el campo "key" en el manifiesto. Conservar un
el ID único es esencial para el registro de la API.
Crear 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.
En la página Crear ID de cliente, selecciona App 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.
Termina haciendo clic en Crear. La consola proporcionará un ID de cliente de OAuth.
Registrar OAuth en 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 FaceBlcok",
...
"permissions": [
"identity"
],
...
}
Crea un archivo para administrar el flujo de OAuth llamado oauth.js y, luego, incluye el siguiente código. O descarga
aquí.
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
en la página "Contactos de FriendBlock" . Aparecerá un token de OAuth 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.
Agrega la biblioteca cliente de la API de Google People a "scopes" en el manifiesto de la extensión.
{
"name": "OAuth Tutorial FaceBlcok",
...
"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.
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.
