OAuth2 to standardowy protokół autoryzacji. Zapewnia on użytkownikom mechanizm umożliwiający przyznawanie aplikacjom internetowym i na komputery dostępu do informacji prywatnych bez udostępniania nazwy użytkownika, hasła i innych danych logowania.
W tym samouczku tworzymy rozszerzenie, które uzyskuje dostęp do kontaktów Google użytkownika za pomocą interfejsu Google People API i interfejsu Chrome Identity API. Rozszerzenia nie wczytują się przez HTTPS, więc nie mogą wykonywać przekierowań ani ustawiać plików cookie. Aby korzystać z OAuth 2, muszą polegać na interfejsie API tożsamości w Chrome.
Rozpocznij
Zacznij od utworzenia katalogu i podanych niżej plików startowych.
manifest.json
Dodaj plik manifestu, tworząc plik o nazwie manifest.json i dodając do niego ten 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" } } service-worker.js
Dodaj rozszerzenie service worker, tworząc plik o nazwie service-worker.js i dodając do niego ten kod.
chrome.action.onClicked.addListener(function() { chrome.tabs.create({url: 'index.html'}); }); index.html
Dodaj plik HTML o nazwie index.html i uwzględnij w nim ten 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> Zachowaj spójny identyfikator rozszerzenia
Zachowanie jednego identyfikatora jest niezbędne podczas tworzenia aplikacji. Aby zachować spójny identyfikator, wykonaj te czynności:
Przesyłanie rozszerzenia do panelu dewelopera
Spakuj katalog rozszerzenia do pliku .zip i prześlij go do panelu dewelopera Chrome bez publikowania:
- Na pulpicie dewelopera kliknij Dodaj nowy element.
- Kliknij Przeglądaj pliki, wybierz plik ZIP rozszerzenia i prześlij go.
- Otwórz kartę Pakiet i kliknij Wyświetl klucz publiczny.
Gdy otworzy się okno, wykonaj te czynności:
- Skopiuj kod z poziomu
-----BEGIN PUBLIC KEY-----do-----END PUBLIC KEY-----. - Usuń znaki końca wiersza, aby tekst był na jednym wierszu.
Dodaj kod do pliku manifest.json w polu "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ównywanie identyfikatorów
Otwórz stronę Zarządzanie rozszerzeniami (chrome://extensions), upewnij się, że Tryb programisty jest włączony, i prześlij rozpakowany katalog rozszerzenia. Porównaj identyfikator rozszerzenia na stronie zarządzania rozszerzeniami z identyfikatorem produktu w panelu dewelopera. Powinny być takie same.
Tworzenie identyfikatora klienta OAuth
Otwórz Konsolę interfejsów API Google i utwórz nowy projekt. Gdy wszystko będzie gotowe, na pasku bocznym kliknij Dane logowania, a następnie Utwórz dane logowania i wybierz Identyfikator klienta OAuth.
Na stronie Utwórz identyfikator klienta wybierz Rozszerzenie Chrome. Wpisz nazwę rozszerzenia i umieścić identyfikator rozszerzenia na końcu adresu URL w polu Identyfikator aplikacji.
Aby zakończyć, kliknij Utwórz. Konsolę poda identyfikator klienta OAuth.
Rejestrowanie OAuth w pliku manifestu
Dodaj pole "oauth2" do pliku manifestu rozszerzenia. Wpisz wygenerowany identyfikator klienta OAuth w polu "client_id". Na razie umieść w polu "scopes" pusty ciąg znaków.
{ "name": "OAuth Tutorial FriendBlock", ... "oauth2": { "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com", "scopes":[""] }, ... } Rozpoczynanie pierwszego procesu OAuth
Zarejestruj uprawnienie identity w pliku manifestu.
{ "name": "OAuth Tutorial FriendBlock", ... "permissions": [ "identity" ], ... } Utwórz plik o nazwie oauth.js, który będzie służyć do zarządzania procesem OAuth, i umieścić w nim podany niżej kod.
window.onload = function() { document.querySelector('button').addEventListener('click', function() { chrome.identity.getAuthToken({interactive: true}, function(token) { console.log(token); }); }); }; Umieść tag skryptu oauth.js w sekcji nagłówka index.html.
... <head> <title>FriendBlock</title> ... <script type="text/javascript" src="oauth.js"></script> </head> ... Ponownie załaduj rozszerzenie i kliknij ikonę przeglądarki, aby otworzyć index.html. Otwórz konsolę i kliknij przycisk „Zablokuj kontakty”. W konsoli pojawi się token OAuth.
Włącz interfejs Google People API
Wróć do konsoli interfejsów API Google i na pasku bocznym kliknij Biblioteka. Wyszukaj „Google People API”, kliknij odpowiedni wynik i włącz interfejs API.
Dodaj bibliotekę klienta Google People API do "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 otwórz stronę z danymi logowania. Kliknij „Utwórz dane logowania” i w menu wybierz „Klucz interfejsu API”.
Zachowaj wygenerowany klucz interfejsu API na później.
Tworzenie pierwszego żądania do interfejsu API
Teraz, 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 pliku oauth.js, aby odpowiadał poniższemu.
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, który zawiera tablicę wartości people/account_id w polu memberResourceNames.
Blokowanie twarzy
Teraz, gdy rozszerzenie zwraca listę kontaktów użytkownika, może wysyłać dodatkowe żądania, aby pobrać profile i informacje o tych kontaktach . Rozszerzenie będzie używać interfejsu API memberResourceNames do pobierania informacji o zdjęciach kontaktów użytkownika. Zaktualizuj element oauth.js, aby zawierał ten 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 i wróć do rozszerzenia. Kliknij przycisk Blokuj znajomego i gotowe. Zobacz twarze kontaktów na blokadzie.
