OAuth2 is het industriestandaardprotocol voor autorisatie. Het biedt een mechanisme waarmee gebruikers web- en desktopapplicaties toegang kunnen geven tot privégegevens zonder hun gebruikersnaam, wachtwoord en andere privégegevens te delen.
In deze zelfstudie wordt een extensie gebouwd die toegang krijgt tot de Google-contacten van een gebruiker met behulp van de Google People API en de Chrome Identity API . Omdat extensies niet via HTTPS laden, geen omleidingen kunnen uitvoeren of cookies kunnen instellen, vertrouwen ze op de Chrome Identity API om OAuth2 te gebruiken.
Begin
Begin met het maken van een map en de volgende starterbestanden.
manifest.json
Voeg het manifest toe door een bestand met de naam manifest.json te maken en de volgende code op te nemen.
{
"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-werker.js
Voeg de extensie service worker toe door een bestand met de naam service-worker.js te maken en de volgende code op te nemen.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Voeg een HTML-bestand toe met de naam index.html en voeg de volgende code toe.
<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>
Zorg voor een consistente extensie-ID
Het behouden van één enkele ID is essentieel tijdens de ontwikkeling. Volg deze stappen om een consistente ID te behouden:
Upload de extensie naar het ontwikkelaarsdashboard
Verpak de extensiemap in een .zip bestand en upload dit naar het Chrome Developer Dashboard zonder het te publiceren:
- Klik op het ontwikkelaarsdashboard op Nieuw item toevoegen .
- Klik op Bladeren door bestanden , selecteer het zip-bestand van de extensie en upload het.
- Ga naar het tabblad Pakket en klik op Openbare sleutel bekijken .
Wanneer de pop-up geopend is, volgt u deze stappen:
- Kopieer de code tussen
-----BEGIN PUBLIC KEY-----en-----END PUBLIC KEY-----. - Verwijder de nieuwe regels om er één enkele tekstregel van te maken.
Voeg de code toe aan manifest.json onder het veld "key" . Op deze manier gebruikt de extensie dezelfde ID.
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
Vergelijk ID's
Open de pagina Extensiebeheer op chrome://extensions , zorg ervoor dat de ontwikkelaarsmodus is ingeschakeld en upload de onverpakte extensiemap. Vergelijk de extensie-ID op de extensiebeheerpagina met de item-ID in het ontwikkelaarsdashboard. Ze moeten overeenkomen.
Maak een OAuth-client-ID
Navigeer naar de Google API-console en maak een nieuw project. Als u klaar bent, selecteert u Inloggegevens in de zijbalk, klikt u op Inloggegevens maken en kiest u OAuth-client-ID .
Selecteer op de pagina Client-ID maken de optie Chrome-extensie . Vul de naam van de extensie in en plaats de extensie-ID aan het einde van de URL in het veld Applicatie-ID.
Sluit af door op Maken te klikken. De console levert een OAuth-client-ID.
Registreer OAuth in het manifest
Neem het veld "oauth2" op in het extensiemanifest. Plaats de gegenereerde OAuth-client-ID onder "client_id" . Neem voorlopig een lege tekenreeks op in "scopes" .
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
Start de eerste OAuth-stroom
Registreer de identity in het manifest.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
Maak een bestand met de naam oauth.js om de OAuth-stroom te beheren en neem de volgende code op.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
Plaats een scripttag voor oauth.js in de kop van index.html .
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Laad de extensie opnieuw en klik op het browserpictogram om index.html te openen. Open de console en klik op de knop "FriendBlock Contacts". Er verschijnt een OAuth-token in de console.
Schakel de Google People API in
Keer terug naar de Google API-console en selecteer Bibliotheek in de zijbalk. Zoek naar "Google People API", klik op het juiste resultaat en schakel het in.
Voeg de Google People API- clientbibliotheek toe aan "scopes" in het extensiemanifest.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Keer terug naar de Google API-console en navigeer terug naar de inloggegevens. Klik op 'Inloggegevens aanmaken' en selecteer 'API-sleutel' in de vervolgkeuzelijst.
Bewaar de gegenereerde API-sleutel voor later gebruik.
Maak het eerste API-verzoek
Nu de extensie over de juiste machtigingen en inloggegevens beschikt en een Google-gebruiker kan autoriseren, kan deze gegevens opvragen via de People API. Update de code in oauth.js zodat deze overeenkomt met de onderstaande code.
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)
});
});
});
};
Vervang API_KEY door de API-sleutel die is gegenereerd via de Google API-console. De extensie moet een JSON-object registreren dat een array van people/account_id 's bevat onder het veld memberResourceNames .
Gezichten blokkeren
Nu de extensie een lijst met de contacten van de gebruiker retourneert, kan deze aanvullende verzoeken indienen om de profielen en informatie van die contacten op te halen . De extensie gebruikt de memberResourceNames om de foto-informatie van gebruikerscontacten op te halen. Update oauth.js om de volgende code op te nemen.
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);
});
};
});
});
});
};
Herlaad en keer terug naar de extensie. Klik op de FriendBlock-knop en ta-da! Geniet van de gezichten van contact in een blok.
