OAuth2 è il protocollo standard di settore per l'autorizzazione. Offre agli utenti un meccanismo concedere alle applicazioni web e desktop l'accesso a informazioni private senza condividere il loro nome utente, password e altre credenziali private.
Questo tutorial crea un'estensione che accede ai contatti Google di un utente utilizzando il programma Persone Google e l'API Chrome Identity. Poiché le estensioni non si caricano tramite HTTPS, non possono reindirizzano o impostano cookie, si basano sull'API Chrome Identity per utilizzare OAuth2.
Inizia
Inizia creando una directory e i seguenti file di base.
L'estensione completa può essere scaricata qui.
manifest.json
Aggiungi il manifest creando un file denominato manifest.json e includi il codice seguente. Oppure:
scarica il file qui.
{
"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
Aggiungi lo script in background creando un file denominato background.js e includi il codice seguente.
In alternativa, scarica il file qui.
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Aggiungi un file HTML denominato index.html e includi il codice seguente. In alternativa, scarica il file qui.
<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>
Carica nella dashboard per sviluppatori
Pacchettizza la directory dell'estensione in un file .zip e caricalo sullo sviluppatore di Chrome
dashboard senza pubblicarla:
- Nella Dashboard per sviluppatori, fai clic su Aggiungi nuovo elemento.
- Fai clic su Choose file (Scegli file), seleziona la directory dell'estensione
.zipe caricala. - Senza compilare altri campi, seleziona Salva bozza e torna alla dashboard.
Trova l'estensione in Le tue schede e fai clic su Altre informazioni. Dal popup, copia
chiave pubblica e aggiungerla al file manifest all'interno della directory decompressa nel campo "key".
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
Confronta ID
Apri la pagina Gestione delle estensioni all'indirizzo chrome://extensions, assicurati che la modalità sviluppatore sia attiva e
e a caricare la directory dell'estensione non pacchettizzata. Confrontare l'ID estensione nella gestione delle estensioni
all'ID elemento nella Dashboard per sviluppatori. Devono corrispondere.
L'estensione manterrà lo stesso ID includendo il campo "key" nel file manifest. Conservare un
è essenziale per la registrazione API.
Crea ID client OAuth
Vai alla console API di Google e crea un nuovo progetto. Quando hai finito, seleziona Credenziali nella barra laterale, fai clic su Crea credenziali e scegli ID client OAuth.
Nella pagina Crea ID client, seleziona App Chrome. Inserisci il nome dell'estensione e il luogo l'ID estensione alla fine dell'URL nel campo ID applicazione.
Per terminare, fai clic su Crea. La console fornirà un ID client OAuth.
Registra OAuth nel file manifest
Includi il campo "oauth2" nel file manifest dell'estensione. Inserisci l'ID client OAuth generato in
"client_id". Per ora includi una stringa vuota in "scopes".
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
Avvia il primo flusso OAuth
Registra l'autorizzazione identity nel file manifest.
{
"name": "OAuth Tutorial FaceBlcok",
...
"permissions": [
"identity"
],
...
}
Crea un file per gestire il flusso OAuth denominato oauth.js e includi il codice seguente. Oppure scarica
qui.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
Inserisci un tag script per oauth.js nell'intestazione di index.html.
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Ricarica l'estensione e fai clic sull'icona del browser per aprire index.html. Apri la console e fai clic su
in "FriendBlock Contacts" . Un token OAuth verrà visualizzato nella console.
Abilitare l'API Google People
Torna alla console dell'API di Google e seleziona Libreria dalla barra laterale. Cerca "Persone Google API", fai clic sul risultato corretto e abilitalo.
Aggiungi la libreria client dell'API Google People a "scopes" nel file manifest dell'estensione.
{
"name": "OAuth Tutorial FaceBlcok",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Torna alla console API di Google e torna alle credenziali. Fai clic su "Crea credenziali". e Seleziona "Chiave API" dal menu a discesa.
Conserva la chiave API generata per utilizzarla in un secondo momento.
Crea la prima richiesta API
Ora che l'estensione dispone delle autorizzazioni e delle credenziali appropriate e può autorizzare un utente Google, può
richiedere dati tramite l'API People. Aggiorna il codice in oauth.js affinché corrisponda a quello riportato di seguito.
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)
});
});
});
};
Sostituisci API_KEY con la chiave API generata dalla console API di Google. L'estensione
deve registrare un oggetto JSON che include un array di people/account_id nel
memberResourceNames.
Blocca volti
Ora che l'estensione restituisce un elenco dei contatti dell'utente, può effettuare richieste aggiuntive
per recuperare i profili e le informazioni di tali contatti . L'estensione utilizza il parametro
memberResourceNames per recuperare le informazioni sulle foto dei contatti dell'utente. Aggiorna oauth.js in
includi il seguente codice.
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);
});
};
});
});
});
};
Ricarica e torna all'estensione. Fai clic sul pulsante FriendBlock e ta-da! Guarda i volti dei contatti in un blocco.
