OAuth2 ist das Standardprotokoll der Branche für die Autorisierung. Nutzer können damit Web- und Desktopanwendungen Zugriff auf private Informationen gewähren, ohne ihren Nutzernamen, ihr Passwort oder andere private Anmeldedaten weiterzugeben.
In dieser Anleitung wird eine Erweiterung erstellt, mit der über die Google People API und die Chrome Identity API auf die Google-Kontakte eines Nutzers zugegriffen wird. Da Erweiterungen nicht über HTTPS geladen werden, keine Weiterleitungen durchführen und keine Cookies setzen können, ist die Chrome Identity API für die Verwendung von OAuth2 erforderlich.
Mehr erfahren
Erstellen Sie zuerst ein Verzeichnis und die folgenden Startdateien.
manifest.json
Fügen Sie das Manifest hinzu, indem Sie eine Datei mit dem Namen manifest.json erstellen und den folgenden Code einfügen.
{
"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
Fügen Sie den Extension Service Worker hinzu, indem Sie eine Datei mit dem Namen service-worker.js erstellen und den folgenden Code einfügen.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Fügen Sie eine HTML-Datei mit dem Namen index.html hinzu, die den folgenden Code enthält.
<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>
Einheitliche Erweiterungs-ID verwenden
Es ist wichtig, während der Entwicklung eine einzige ID beizubehalten. So behalten Sie eine einheitliche ID bei:
Erweiterung in das Entwickler-Dashboard hochladen
Verpacken Sie das Erweiterungsverzeichnis in einer .zip-Datei und laden Sie sie in das Entwickler-Dashboard von Google Chrome hoch, ohne sie zu veröffentlichen:
- Klicken Sie im Entwickler-Dashboard auf Neuen Artikel hinzufügen.
- Klicken Sie auf Dateien durchsuchen, wählen Sie die ZIP-Datei der Erweiterung aus und laden Sie sie hoch.
- Rufen Sie den Tab Paket auf und klicken Sie auf Öffentlichen Schlüssel anzeigen.
Wenn das Pop-up geöffnet ist, gehen Sie so vor:
- Kopiere den Code zwischen
-----BEGIN PUBLIC KEY-----und-----END PUBLIC KEY-----. - Entfernen Sie die Zeilenumbrüche, sodass daraus eine einzige Textzeile entsteht.
Fügen Sie den Code in das Feld manifest.json unter dem Feld "key" ein.
So verwendet die Erweiterung dieselbe ID.
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
IDs vergleichen
Öffnen Sie die Seite für die Erweiterungsverwaltung unter chrome://extensions, prüfen Sie, ob der Entwicklermodus aktiviert ist, und laden Sie das entpackte Erweiterungsverzeichnis hoch. Vergleichen Sie die Erweiterungs-ID auf der Verwaltungsseite für Erweiterungen mit der Artikel-ID im Entwickler-Dashboard. Sie sollten übereinstimmen.
OAuth-Client-ID erstellen
Rufen Sie die Google API Console auf und erstellen Sie ein neues Projekt. Wählen Sie anschließend in der Seitenleiste Anmeldedaten aus, klicken Sie auf Anmeldedaten erstellen und wählen Sie OAuth-Client-ID aus.
Wählen Sie auf der Seite „Client-ID erstellen“ die Option Chrome-Erweiterung aus. Geben Sie den Namen der Erweiterung ein und fügen Sie die Erweiterungs-ID an das Ende der URL im Feld "Anwendungs-ID" ein.
Klicken Sie abschließend auf „Erstellen“. Die Konsole stellt eine OAuth-Client-ID bereit.
OAuth im Manifest registrieren
Fügen Sie das Feld "oauth2" in das Manifest der Erweiterung ein. Platzieren Sie die generierte OAuth-Client-ID unter "client_id". Fügen Sie vorerst einen leeren String in "scopes" ein.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
Ersten OAuth-Ablauf initiieren
Registrieren Sie die Berechtigung identity im Manifest.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
Erstellen Sie eine Datei mit dem Namen oauth.js, um den OAuth-Ablauf zu verwalten, und fügen Sie den folgenden Code ein.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
Fügen Sie im head-Element von index.html ein Skript-Tag für oauth.js ein.
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Aktualisieren Sie die Erweiterung und klicken Sie auf das Browsersymbol, um index.html zu öffnen. Öffne die Konsole und klicke auf die Schaltfläche "FriendBlock-Kontakte". In der Konsole wird ein OAuth-Token angezeigt.
Google People API aktivieren
Kehren Sie zur Google API Console zurück und wählen Sie in der Seitenleiste Bibliothek aus. Suchen Sie nach „Google People API“, klicken Sie auf das richtige Ergebnis und aktivieren Sie es.
Fügen Sie "scopes" im Manifest der Erweiterung die Google People API-Clientbibliothek hinzu.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Kehren Sie zur Google API Console zurück und navigieren Sie zurück zu den Anmeldedaten. Klicken Sie auf „Anmeldedaten erstellen“ und wählen Sie im Drop-down-Menü „API-Schlüssel“ aus.
Bewahren Sie den generierten API-Schlüssel zur späteren Verwendung auf.
Erste API-Anfrage erstellen
Die Erweiterung verfügt nun über die erforderlichen Berechtigungen und Anmeldedaten und kann Google-Nutzer autorisieren. Sie kann Daten über die People API anfordern. Aktualisieren Sie den Code in oauth.js so, dass er unten übereinstimmt.
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)
});
});
});
};
Ersetzen Sie API_KEY durch den API-Schlüssel, der in der Google API Console generiert wurde. Die Erweiterung sollte ein JSON-Objekt protokollieren, das im Feld memberResourceNames ein Array von people/account_id-Werten enthält.
Gesichter blockieren
Da die Erweiterung nun eine Liste der Kontakte des Nutzers zurückgibt, kann sie zusätzliche Anfragen zum Abrufen der Profile und Informationen dieser Kontakte senden . Die Erweiterung verwendet den memberResourceNames, um die Fotoinformationen von Nutzerkontakten abzurufen. Aktualisieren Sie oauth.js, um den folgenden Code einzufügen.
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);
});
};
});
});
});
};
Aktualisieren Sie die Seite und kehren Sie zur Erweiterung zurück. Klicke auf die Schaltfläche FriendBlock und ta-da! Sehen Sie sich die Gesichter des Kontakts in einem Block an.
