OAuth2 is het industriestandaardprotocol voor autorisatie. Het biedt gebruikers een mechanisme om web- en desktopapplicaties toegang te geven tot privé-informatie zonder hun gebruikersnaam, wachtwoord en andere persoonlijke gegevens te hoeven delen.
Deze handleiding laat zien hoe je een extensie bouwt 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, zijn ze afhankelijk van de Chrome Identity API voor OAuth2.
Aan de slag
Begin met het aanmaken van een map en de volgende startbestanden.
manifest.json
Voeg het manifest toe door een bestand met de naam manifest.json aan te maken en de volgende code erin 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-worker.js
Voeg de extensie-serviceworker toe door een bestand met de naam service-worker.js aan te maken en de volgende code daarin op te nemen.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Add an HTML file called index.html and include the following code.
<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 consistent 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 in het ontwikkelaarsdashboard op 'Nieuw item toevoegen' .
- Klik op 'Bestanden bekijken' , selecteer het zipbestand van de extensie en upload het.
- Go to the Package tab and click View public key .
Volg deze stappen wanneer het dialoogvenster geopend is:
- Kopieer de code tussen
-----BEGIN PUBLIC KEY-----en-----END PUBLIC KEY-----. - Verwijder de nieuwe regels zodat er één regel tekst overblijft.
Voeg de code toe aan het 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 uitgepakte extensiemap. Vergelijk de extensie-ID op de pagina Extensiebeheer met de item-ID in het ontwikkelaarsdashboard. Deze moeten overeenkomen.
Maak een OAuth-client-ID aan.
Elke applicatie die OAuth 2.0 gebruikt om toegang te krijgen tot Google API's, moet beschikken over autorisatiegegevens waarmee de applicatie zich kan identificeren bij de OAuth 2.0-server van Google. De volgende stappen leggen uit hoe u referenties voor uw project kunt aanmaken. Uw applicaties kunnen deze referenties vervolgens gebruiken om toegang te krijgen tot de API's die u voor dat project hebt ingeschakeld.
Ga eerst naar de Google API-console om een nieuw project aan te maken als je er nog geen hebt. Volg deze instructies om een OAuth-client aan te maken en een client-ID te verkrijgen.
- Ga naar de pagina Klanten .
- Klik op Client aanmaken .
- Selecteer het type Chrome-extensie- applicatie.
- Voer een naam in voor de OAuth-client. Deze naam wordt weergegeven op de pagina 'Clients' van uw project om de client te identificeren.
- Voer de extensie-ID in het veld Artikel-ID in.
- Klik op 'Maken' .
Registreer OAuth in het manifest
Voeg het veld "oauth2" toe aan het extensiemanifest. Plaats de gegenereerde OAuth-client-ID onder "client_id" . Om toegang te krijgen tot de accountgegevens van de gebruiker, moeten we de relevante "scope" opvragen, "https://www.googleapis.com/auth/userinfo.email" .
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":["https://www.googleapis.com/auth/userinfo.email"]
},
...
}
Start de eerste OAuth-flow
Registreer de identity in het manifest.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
Create a file to manage the OAuth flow called oauth.js and include the following code.
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 head van index.html .
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Herlaad de extensie 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.
Ga terug naar de Google API-console en selecteer 'Bibliotheek' in de zijbalk. Zoek naar 'Google People API', klik op het juiste resultaat en schakel de API 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"
]
},
...
}
Ga terug naar de Google API-console en navigeer terug naar 'Referenties'. Klik op 'Referenties maken' en selecteer 'API-sleutel' in het keuzemenu.
Bewaar de gegenereerde API-sleutel voor later gebruik.
Maak de eerste API-aanvraag aan.
Nu de extensie de juiste machtigingen en inloggegevens heeft en een Google-gebruiker kan autoriseren, kan deze gegevens opvragen via de People API. Werk de code in oauth.js bij zodat deze overeenkomt met 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 loggen dat een array van people/account_id 's bevat onder het veld memberResourceNames .
Blokgezichten
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 de contacten van de gebruiker op te halen. Werk oauth.js bij met de volgende 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_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 de pagina en ga terug naar de extensie. Klik op de FriendBlock-knop en voilà! Geniet van de gezichten van je contacten in een blok.
