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. Perché le estensioni non si caricano HTTPS, impossibile eseguire reindirizzano o impostano cookie, si basano sull'API Chrome Identity per utilizzare OAuth2.
Inizia
Inizia creando una directory e i seguenti file di base.
manifest.json
Aggiungi il manifest creando un file denominato manifest.json e includi il codice seguente.
{
"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 di 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
Conservare un singolo ID è essenziale durante lo sviluppo. Per mantenere un ID coerente:
Carica l'estensione 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 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, procedi nel seguente modo:
- Copia il codice tra
-----BEGIN PUBLIC KEY-----e-----END PUBLIC KEY-----. - Rimuovi i ritorni a capo in modo che sia un'unica riga di testo.
Aggiungi il codice alla manifest.json sotto il 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 caricare la directory dell'estensione non pacchettizzata. Confrontare l'ID estensione nella gestione delle estensioni
all'ID elemento nella Dashboard per sviluppatori. Devono corrispondere.
Crea un 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 Estensione di 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 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 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 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 "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 FriendBlock",
...
"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.
