OAuth2 is het industriestandaardprotocol voor autorisatie. Het biedt een mechanisme waarmee gebruikers web- en desktopapplicaties toegang kunnen geven tot privé-informatie 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.
Ga aan de slag
Begin met het maken van een map en de volgende starterbestanden.
De volledige, voltooide extensie kunt u hier downloaden.
manifest.json
Voeg het manifest toe door een bestand met de naam manifest.json te maken en de volgende code op te nemen. Of download het bestand hier .
{
"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
}
}
achtergrond.js
Voeg het achtergrondscript toe door een bestand met de naam background.js te maken en de volgende code op te nemen. Of download het bestand hier .
chrome.browserAction.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. Of download het bestand hier .
<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>
Uploaden 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 Bestand kiezen , selecteer de
.zipextensiemap en upload deze. - Zonder aanvullende velden in te vullen, selecteert u Concept opslaan en keert u terug naar het dashboard .
Zoek de extensie onder Uw vermeldingen en klik op meer info . Kopieer vanuit de pop-up de openbare sleutel en voeg deze toe aan het manifest in de uitgepakte map onder het veld "key" .
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
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.
De extensie behoudt dezelfde ID door het veld "key" in het manifest op te nemen. Het behouden van één ID is essentieel voor API-registratie.
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 .
Op de pagina Client-ID maken selecteert u Chrome-app . 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 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 FaceBlcok",
...
"permissions": [
"identity"
],
...
}
Maak een bestand met de naam oauth.js om de OAuth-stroom te beheren en neem de volgende code op. Of download hem hier .
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 deze in.
Voeg de Google People API- clientbibliotheek toe aan "scopes" in het extensiemanifest.
{
"name": "OAuth Tutorial FaceBlcok",
...
"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.
