OAuth2 to protokół autoryzacji zgodny ze standardami branżowymi. Dzięki niemu użytkownicy mogą przyznawać aplikacjom internetowym i komputerowym dostęp do prywatnych informacji bez udostępniania swojej nazwy użytkownika, hasła i innych prywatnych danych logowania.
W tym samouczku tworzymy rozszerzenie, które uzyskuje dostęp do kontaktów Google użytkownika za pomocą interfejsów Google People API i Chrome Identity API. Rozszerzenia nie wczytują się przez HTTPS, nie mogą wykonywać przekierowań ani ustawiać plików cookie, tylko używają interfejsu Chrome Identity API do korzystania z protokołu OAuth2.
Rozpocznij
Zacznij od utworzenia katalogu i następujących plików startowych.
manifest.json
Dodaj plik manifestu, tworząc plik o nazwie manifest.json i dołączając w nim poniższy kod.
{
"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"
}
}
Skrypt service worker.js
Dodaj skrypt service worker rozszerzenia, tworząc plik o nazwie service-worker.js i dołączając w nim poniższy kod.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Dodaj plik HTML o nazwie index.html i dołącz do niego poniższy kod.
<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>
Zachowuj spójny identyfikator rozszerzenia
Zachowanie jednego identyfikatora jest niezbędne podczas programowania. Aby zachować spójny identyfikator, wykonaj te czynności:
Prześlij rozszerzenie do panelu dewelopera
Spakuj katalog rozszerzenia do pliku .zip i prześlij go do panelu dewelopera Chrome bez jego publikowania:
- W panelu dewelopera kliknij Dodaj nowy element.
- Kliknij Przeglądaj pliki, wybierz plik ZIP rozszerzenia i go prześlij.
- Otwórz kartę Pakiet i kliknij Wyświetl klucz publiczny.
Gdy wyskakujące okienko jest otwarte, wykonaj te czynności:
- Skopiuj kod pomiędzy
-----BEGIN PUBLIC KEY-----a-----END PUBLIC KEY-----. - Usuń nowe wiersze, aby zmienić je w jeden wiersz tekstu.
Dodaj kod w polu manifest.json pod polem "key".
Dzięki temu rozszerzenie będzie używać tego samego identyfikatora.
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
Porównaj identyfikatory
Otwórz stronę zarządzania rozszerzeniami na chrome://extensions, upewnij się, że tryb programisty jest włączony, i prześlij katalog rozszerzeń bez pakietu. Porównaj identyfikator rozszerzenia na stronie zarządzania rozszerzeniami z identyfikatorem produktu w panelu dewelopera. Powinny do siebie pasować.
Tworzenie identyfikatora klienta OAuth
Otwórz konsolę interfejsów API Google i utwórz nowy projekt. Gdy wszystko będzie gotowe, wybierz Dane logowania na pasku bocznym, kliknij Utwórz dane logowania i wybierz Identyfikator klienta OAuth.
Na stronie Tworzenie identyfikatora klienta kliknij Rozszerzenie do Chrome. Wpisz nazwę rozszerzenia i umieść identyfikator na końcu adresu URL w polu Identyfikator aplikacji.
Aby zakończyć, kliknij Utwórz. Konsola poda identyfikator klienta OAuth.
Zarejestruj protokół OAuth w pliku manifestu
Dodaj pole "oauth2" w pliku manifestu rozszerzenia. Umieść wygenerowany identyfikator klienta OAuth w obszarze "client_id". Na razie umieść pusty ciąg w elemencie "scopes".
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
Rozpocznij pierwszy przepływ OAuth
Zarejestruj uprawnienie identity w pliku manifestu.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
Utwórz plik, który będzie zarządzać procesem OAuth o nazwie oauth.js, i umieść w nim poniższy kod.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
Umieść tag skryptu dla oauth.js w nagłówku elementu index.html.
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Załaduj ponownie rozszerzenie i kliknij ikonę przeglądarki, aby otworzyć index.html. Otwórz konsolę i kliknij przycisk „Zablokuj kontakty znajomych”. W konsoli pojawi się token OAuth.
Włącz interfejs Google People API
Wróć do konsoli interfejsów API Google i na pasku bocznym wybierz Biblioteka. Wyszukaj „Google People API”, kliknij odpowiedni wynik i włącz go.
Dodaj bibliotekę klienta Google People API do pliku "scopes" w pliku manifestu rozszerzenia.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Wróć do konsoli interfejsów API Google i do danych logowania. Kliknij „Utwórz dane logowania” i z menu wybierz „Klucz interfejsu API”.
Zachowaj wygenerowany klucz interfejsu API do późniejszego użycia.
Tworzenie pierwszego żądania do interfejsu API
Gdy rozszerzenie ma odpowiednie uprawnienia i dane logowania oraz może autoryzować użytkownika Google, może żądać danych za pomocą interfejsu People API. Zaktualizuj kod w aplikacji oauth.js, aby był zgodny z poniższym kodem.
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)
});
});
});
};
Zastąp API_KEY kluczem interfejsu API wygenerowanym w konsoli interfejsów API Google. Rozszerzenie powinno rejestrować obiekt JSON zawierający tablicę people/account_id w polu memberResourceNames.
Blokuj twarze
Gdy rozszerzenie zwraca listę kontaktów użytkownika, może wysłać dodatkowe żądania odzyskania profili i informacji tych kontaktów . Rozszerzenie będzie pobierać informacje o zdjęciach kontaktów użytkownika za pomocą memberResourceNames. Zaktualizuj oauth.js, aby zawierał poniższy kod.
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);
});
};
});
});
});
};
Załaduj ponownie rozszerzenie i wróć do rozszerzenia. Kliknij przycisk Sieć znajomych i dokończ! Oglądaj twarze kontaktów w jednym bloku.
