OAuth2 to standardowy protokół autoryzacji. Zapewnia on użytkownikom przyznania aplikacjom internetowym i komputerowym dostępu do informacji prywatnych bez udostępniania swojej nazwy użytkownika, hasła i innych danych logowania.
W tym samouczku zostało utworzone rozszerzenie uzyskujące dostęp do kontaktów Google użytkownika za pomocą interfejsu Osoby Google API i Chrome Identity API. Rozszerzenia nie ładują się przez HTTPS, więc nie mogą działać lub ustawiają pliki cookie, korzystają z protokołu OAuth2 interfejsu Chrome Identity API.
Rozpocznij
Zacznij od utworzenia katalogu i następujących plików inicjujących.
Pełne rozszerzenie można pobrać tutaj.
manifest.json
Dodaj plik manifestu. W tym celu utwórz plik o nazwie manifest.json i dodaj ten kod. lub
możesz go pobrać tutaj.
{
"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
}
}
background.js
Dodaj skrypt działający w tle. W tym celu utwórz plik o nazwie background.js i dodaj ten kod.
Możesz też pobrać plik stąd.
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Dodaj plik HTML o nazwie index.html i uwzględnij poniższy kod. Możesz też pobrać plik stąd.
<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>
Prześlij do Panelu dewelopera
Umieść katalog rozszerzenia w pliku .zip i prześlij go do programisty Chrome
Panel bez publikowania:
- W panelu dewelopera kliknij Dodaj nowy element.
- Kliknij Wybierz plik, wybierz katalog rozszerzenia
.zipi go prześlij. - Bez wypełniania dodatkowych pól wybierz Zapisz wersję roboczą i wróć do panelu.
Znajdź rozszerzenie w sekcji Twoje informacje o produktach i kliknij Więcej informacji. Z wyskakującego okienka skopiuj
klucz publiczny i dodaj go do pliku manifestu w rozpakowanym katalogu w polu "key".
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
Porównaj identyfikatory
Otwórz stronę Zarządzanie rozszerzeniami na chrome://extensions, sprawdź, czy włączony jest tryb programisty, i
prześlij katalog bez pakietu rozszerzeń. Porównywanie identyfikatora rozszerzenia w zarządzaniu rozszerzeniami
do identyfikatora produktu w panelu dewelopera. Powinny być takie same.
Rozszerzenie zachowa ten sam identyfikator, ponieważ umieścisz w pliku manifestu pole "key". Zachowanie
pojedynczy identyfikator jest niezbędny do rejestracji interfejsu API.
Tworzenie identyfikatora klienta OAuth
Otwórz konsolę interfejsów API Google i utwórz nowy projekt. Gdy wszystko będzie gotowe, wybierz Na pasku bocznym kliknij Dane logowania, kliknij Utwórz dane logowania i wybierz Identyfikator klienta OAuth.
Na stronie Utwórz identyfikator klienta wybierz Aplikacja Chrome. Wpisz nazwę rozszerzenia i miejsca. identyfikator rozszerzenia na końcu adresu URL w polu Identyfikator aplikacji.
Na koniec kliknij Utwórz. Konsola udostępni identyfikator klienta OAuth.
Zarejestruj OAuth w pliku manifestu
Dodaj pole "oauth2" do pliku manifestu rozszerzenia. Umieść wygenerowany identyfikator klienta OAuth w
"client_id" Na razie uwzględnij pusty ciąg znaków w polu "scopes".
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
Zainicjuj pierwszy przepływ OAuth
Zarejestruj uprawnienia identity w pliku manifestu.
{
"name": "OAuth Tutorial FaceBlcok",
...
"permissions": [
"identity"
],
...
}
Utwórz plik służący do zarządzania przepływem OAuth o nazwie oauth.js i dodaj do niego poniższy kod. Lub pobierz
go tutaj.
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 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
w kontaktach „FriendBlock” Przycisk W konsoli pojawi się token OAuth.
Włączanie interfejsu Google People API
Wróć do konsoli interfejsów API Google i na pasku bocznym wybierz Biblioteka. Wyszukaj „osoby Google” API”, kliknij właściwy wynik i włącz go.
Dodaj bibliotekę klienta Google People API do pliku "scopes" w pliku manifestu rozszerzenia.
{
"name": "OAuth Tutorial FaceBlcok",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Wróć do konsoli interfejsów API Google i wróć do danych logowania. Kliknij „Utwórz dane logowania”. oraz wybierz „Klucz interfejsu API”. z menu rozwijanego.
Zachowaj wygenerowany klucz interfejsu API do późniejszego użycia.
Utwórz pierwsze żądanie do interfejsu API
Teraz, gdy rozszerzenie ma odpowiednie uprawnienia, dane logowania i może autoryzować użytkownika Google, może
wysyła żądania danych za pomocą interfejsu People API. Zaktualizuj kod w aplikacji oauth.js, tak aby był zgodny z podanym niżej.
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
powinien zarejestrować obiekt JSON zawierający tablicę people/account_id w
memberResourceNames.
Zablokuj twarze
Gdy rozszerzenie zwraca listę kontaktów użytkownika, może wysłać dodatkowe żądania
pobrania profili i informacji tych kontaktów . Rozszerzenie będzie używać funkcji
memberResourceNames, aby pobrać informacje o zdjęciach kontaktów użytkownika. Zaktualizuj aplikację oauth.js do
dodaj 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 FriendBlock! Oglądaj twarze kontaktów w jeden ekran.
