OAuth2 è il protocollo standard di settore per l'autorizzazione. Fornisce agli utenti un meccanismo per concedere alle applicazioni web e desktop l'accesso a informazioni private senza condividere nome utente, password e altre credenziali private.
Questo tutorial crea un'estensione che accede ai contatti Google di un utente utilizzando l'API Google People e l'API Chrome Identity. Poiché le estensioni non vengono caricate tramite HTTPS, non possono eseguire reindirizzamenti o impostare cookie, si affidano all'API Chrome Identity per utilizzare OAuth2.
Inizia
Per prima cosa, crea una directory e i seguenti file di base.
manifest.json
Aggiungi il file manifest creando un file denominato manifest.json e includi il codice riportato di seguito.
{
"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
Aggiungi il service worker dell'estensione creando un file denominato service-worker.js e includi il codice seguente.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Aggiungi un file HTML denominato index.html e includi il codice seguente.
<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>
Mantieni un ID estensione coerente
È fondamentale conservare un singolo ID durante lo sviluppo. Per mantenere un ID coerente, segui questi passaggi:
Carica l'estensione nella dashboard per sviluppatori
Compila la directory dell'estensione in un file .zip e caricalo nella Dashboard per sviluppatori di Chrome senza pubblicarlo:
- Nella Dashboard per sviluppatori, fai clic su Aggiungi nuovo elemento.
- Fai clic su Sfoglia file, seleziona il file ZIP dell'estensione e caricalo.
- Vai alla scheda Pacchetto e fai clic su Visualizza chiave pubblica.
Quando il popup è aperto, segui questi passaggi:
- Copia il codice tra
-----BEGIN PUBLIC KEY-----e-----END PUBLIC KEY-----. - Rimuovi le nuove righe per formare una singola riga di testo.
Aggiungi il codice a manifest.json nel campo "key".
In questo modo l'estensione utilizzerà lo stesso ID.
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
Confronta ID
Apri la pagina Gestione delle estensioni all'indirizzo chrome://extensions, assicurati che la Modalità sviluppatore sia attivata e carica la directory delle estensioni non in pacchetto. Confronta l'ID estensione nella pagina di gestione
delle estensioni con l'ID elemento nella Dashboard per sviluppatori. Devono corrispondere.
Creare un ID client OAuth
Vai alla console API di Google e crea un nuovo progetto. Al termine, seleziona Credenziali nella barra laterale, fai clic su Crea credenziali e scegli ID client OAuth.
Nella pagina Crea ID client, seleziona Estensione di Chrome. Inserisci il nome dell'estensione e posiziona l'ID estensione alla fine dell'URL nel campo ID applicazione.
Termina facendo clic su Crea. La console fornirà un ID client OAuth.
Registra OAuth nel manifest
Includi il campo "oauth2" nel file manifest dell'estensione. Inserisci l'ID client OAuth generato in
"client_id". Includi una stringa vuota in "scopes" per il momento.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
Avvia il primo flusso OAuth
Registra l'autorizzazione identity nel manifest.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
Crea un file per gestire il flusso OAuth denominato oauth.js e includi il codice seguente.
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 nella sezione head 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 sul pulsante "FriendBlock Contacts". Nella console viene visualizzato un token OAuth.
Attivare l'API Google People
Torna alla console API di Google e seleziona Libreria dalla barra laterale. Cerca "API Google People", fai clic sul risultato corretto e abilitalo.
Aggiungi la libreria client dell'API Google People a "scopes" nel manifest dell'estensione.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Torna alla console dell'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 i dati tramite l'API People. Aggiorna il codice in oauth.js in modo che corrisponda a quello indicato 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 includa un array di people/account_id nel
campo memberResourceNames.
Blocca volti
Ora che l'estensione restituisce un elenco dei contatti dell'utente, può effettuare ulteriori richieste per recuperare i profili e le informazioni di quei contatti . L'estensione utilizzerà memberResourceNames per recuperare le informazioni sulle foto dei contatti dell'utente. Aggiorna oauth.js per includere 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 di amicizia e ta-da! Divertiti con i volti dei contatti in un blocco.
