Protokoły uwierzytelniania internetowego wykorzystują funkcje HTTP, ale aplikacje Chrome działają w kontenerze aplikacji, nie ładują się przez HTTP i nie mogą wykonywać przekierowań ani ustawiać plików cookie.
Do uwierzytelniania użytkowników używaj interfejsu Chrome Identity API: getAuthToken dla użytkowników zalogowanych na swoje konta Google i launchWebAuthFlow dla użytkowników zalogowanych na konto inne niż Google. Jeśli Twoja aplikacja używa własnego serwera do uwierzytelniania użytkowników, musisz używać tego drugiego.
Jak to działa
Użytkownicy Aplikacji Chrome mają konto Google powiązane ze swoim profilem. Aplikacje mogą pobierać tokeny OAuth2 dla tych użytkowników za pomocą interfejsu API getAuthToken.
Aplikacje, które chcą uwierzytelniania przy użyciu dostawców tożsamości innych niż Google, muszą wywoływać launchWebAuthFlow. Ta metoda wykorzystuje wyskakujące okienko przeglądarki do wyświetlania stron dostawców i przechwytywania przekierowań do konkretnych wzorców adresów URL. Przekierowania są przekazywane do aplikacji, a aplikacja wyodrębnia token z adresu URL.
Uwierzytelnianie konta Google
Aby to zrobić:
- Dodaj uprawnienia do pliku manifestu i prześlij aplikację.
- Skopiuj klucz z zainstalowanego
manifest.jsondo źródłowego pliku manifestu, aby identyfikator aplikacji nie zmienił się podczas programowania. - Uzyskaj identyfikator klienta OAuth2 dla swojej aplikacji Chrome.
- Dodaj do pliku manifestu identyfikator klienta i zakresy.
- Uzyskaj token uwierzytelniania.
Dodaj uprawnienia i prześlij aplikację
Sprawdź, czy w pliku manifestu znajdują się uprawnienia dotyczące tożsamości. Następnie możesz przesłać aplikację na stronę zarządzania aplikacjami i rozszerzeniami (zobacz Publikowanie).
"permissions": [
"identity"
]
Skopiuj klucz do pliku manifestu
Podczas rejestrowania aplikacji w konsoli Google OAuth podajesz jej identyfikator, który jest sprawdzany podczas przesyłania żądań tokenów. Dlatego tak ważne jest stosowanie spójnego identyfikatora aplikacji na etapie programowania.
Aby utrzymać stały identyfikator aplikacji, skopiuj klucz z zainstalowanego pliku manifest.json do źródłowego pliku manifestu. Nie jest to najwspanialsze zadanie, ale wygląda to tak:
- Przejdź do katalogu danych użytkownika. Przykład w systemie macOS:
~/Library/Application\ Support/Google/Chrome/Default/Extensions - Wymień zainstalowane aplikacje i rozszerzenia oraz dopasuj identyfikator aplikacji na stronie zarządzania aplikacjami i rozszerzeniami do tego samego identyfikatora.
- Przejdź do katalogu zainstalowanych aplikacji (będzie to wersja w identyfikatorze aplikacji). Otwórz zainstalowany plik
manifest.json(pico to szybki sposób na otwarcie pliku). - Skopiuj „klucz” z zainstalowanego elementu
manifest.jsoni wklej go do źródłowego pliku manifestu aplikacji.
Pobierz identyfikator klienta OAuth2
Aby uzyskać identyfikator klienta, musisz zarejestrować aplikację w Konsoli interfejsów API Google:
- Zaloguj się w Konsoli interfejsów API Google przy użyciu tego samego konta Google, którego użyto do przesłania aplikacji do Chrome Web Store.
- Utwórz nowy projekt, rozwijając menu w lewym górnym rogu i wybierając pozycję menu Utwórz....
- Po utworzeniu i nazwaniu przejdź do pozycji menu nawigacyjnego „Usługi” i włącz wszystkie usługi Google, których potrzebuje Twoja aplikacja.
- Przejdź do pozycji menu nawigacyjnego „Dostęp do API” i kliknij niebieski przycisk Utwórz identyfikator klienta OAuth 2.0....
- Wpisz wymagane informacje o marce i wybierz typ Zainstalowana aplikacja.
- Wybierz Aplikacja Chrome i wpisz identyfikator aplikacji (ten sam identyfikator jest wyświetlany na stronie zarządzania aplikacjami i rozszerzeniami).
Dodaj do pliku manifestu identyfikator klienta OAuth2 i zakresy
Musisz zaktualizować plik manifestu, dodając do niego identyfikator klienta i zakresy. Oto przykład „oauth2” dla przykładu gdrive:
"oauth2": {
"client_id": "665859454684.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/drive"
]
}
Uzyskaj tokeny dostępu
Możesz teraz uzyskać token uwierzytelniania, wywołując identity.getAuthToken.
chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
// Use the token.
});
Interakcja użytkownika
Gdy wywołujesz getAuthToken, możesz przekazać flagę ('interactive': true w przykładzie powyżej) wskazującą, czy interfejs API ma być wywoływany w trybie interaktywnym czy w trybie cichym. Jeśli wywołasz interfejs API w trybie interaktywnym, w razie potrzeby wyświetli się użytkownikowi interfejs logowania lub zatwierdzenia, tak jak na tym zrzucie ekranu:
Jeśli wywołasz interfejs API w trybie cichym, zwróci on token tylko wtedy, gdy będzie można utworzyć go bez wyświetlania żadnego interfejsu użytkownika. Jest to przydatne w sytuacjach, gdy np. aplikacja wykonuje przepływ pracy podczas jej uruchamiania, oraz w ogóle w przypadkach, gdy nie wymaga użycia gestów użytkownika.
Sprawdzoną metodą jest korzystanie z trybu cichego, gdy nie wymaga żadnych gestów użytkownika, oraz trybu interaktywnego, jeśli użytkownik wykonuje gest (np. kliknął przycisk Zaloguj się w aplikacji). Nie egzekwujemy żadnych wymagań dotyczących gestów.
Zapisywanie w pamięci podręcznej
Chrome ma pamięć podręczną tokenów dostępu, więc możesz wywołać getAuthToken w dowolnym momencie, gdy chcesz użyć tokena. Wygaśnięcie tokena jest automatycznie obsługiwane przez pamięć podręczną.
Bieżący stan pamięci podręcznej tokenów możesz sprawdzić na stronie chrome://identity-internals.
W niektórych przypadkach, na przykład gdy użytkownik zmieni swoje hasło, tokeny dostępu, które nie straciły ważności, przestaną działać. Wywołania interfejsu API korzystające z tokena będą zwracane z kodem stanu HTTP 401. Jeśli tak się stanie, możesz usunąć nieprawidłowy token z pamięci podręcznej Chrome, wywołując metodę identity.removeCachedAuthToken.
Przykład użycia atrybutu removeCachedAuthToken:
// callback = function (error, httpStatus, responseText);
function authenticatedXhr(method, url, callback) {
var retry = true;
function getTokenAndXhr() {
chrome.identity.getAuthToken({/* details */},
function (access_token) {
if (chrome.runtime.lastError) {
callback(chrome.runtime.lastError);
return;
}
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader('Authorization',
'Bearer ' + access_token);
xhr.onload = function () {
if (this.status === 401 && retry) {
// This status may indicate that the cached
// access token was invalid. Retry once with
// a fresh token.
retry = false;
chrome.identity.removeCachedAuthToken(
{ 'token': access_token },
getTokenAndXhr);
return;
}
callback(null, this.status, this.responseText);
}
});
}
}
Uwierzytelnianie za pomocą konta innego niż Google
Oto 3 kroki, które musisz wykonać:
- Zarejestruj się u dostawcy.
- Dodaj uprawnienia do zasobów dostawcy, do których aplikacja będzie mieć dostęp.
- Uzyskaj token uwierzytelniania.
Zarejestruj się u dostawcy
Musisz zarejestrować identyfikator klienta OAuth2 u dostawcy i skonfigurować go jako witrynę.
Aby podać identyfikator URI przekierowania podczas rejestracji, użyj adresu URL w tym formularzu: https://<extension-id>.chromiumapp.org/<anything-here>
Jeśli na przykład identyfikator aplikacji to abcdefghijklmnopqrstuvwxyzabcdef i chcesz, aby provider_cb był ścieżką, to aby odróżniać go od identyfikatorów URI przekierowania od innych dostawców, musisz użyć: https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb
Dodaj uprawnienia dla dostawcy
Aby wysyłać z innych domen XHR do punktów końcowych interfejsu API dostawcy, musisz dodać odpowiednie wzorce w uprawnieniach do listy dozwolonych:
"permissions": [
...
"https://www.website-of-provider-with-user-photos.com/photos/*"
]
Pobierz token
Aby uzyskać token:
chrome.identity.launchWebAuthFlow(
{'url': '<url-to-do-auth>', 'interactive': true},
function(redirect_url) { /* Extract token from redirect_url */ });
<url-to-do-auth> to adres URL służący do uwierzytelniania dostawcy z witryny. Załóżmy na przykład, że przeprowadzasz przepływ OAuth2 u dostawcy, zarejestrujesz aplikację przy użyciu identyfikatora klienta 123456789012345 i chcesz mieć dostęp do zdjęć użytkownika w witrynie dostawcy:
https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345& redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos
Dostawca wykona uwierzytelnianie i w razie potrzeby wyświetli użytkownikowi interfejs logowania lub zatwierdzania. Następnie nastąpi przekierowanie do strony https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>
Chrome przechwyci to i wywoła wywołanie zwrotne aplikacji z pełnym adresem URL przekierowania. Aplikacja powinna wyodrębnić token z adresu URL.
Tryb interaktywny a tryb cichy
Gdy wywołujesz launchWebAuthFlow, możesz przekazać flagę ('interactive': true w przykładzie powyżej) wskazującą, czy interfejs API ma być wywoływany w trybie interaktywnym (czyli w trybie cichym). Jeśli wywołujesz interfejs API w trybie interaktywnym, w razie potrzeby użytkownik zobaczy interfejs użytkownika, aby uzyskać token (UI logowania lub zatwierdzania albo w innych przypadkach konkretnego dostawcy).
Jeśli wywołasz interfejs API w trybie cichym, zwróci on token tylko wtedy, gdy dostawca może udostępnić token bez wyświetlania żadnego interfejsu użytkownika. Jest to przydatne w sytuacjach, gdy np. aplikacja wykonuje przepływ pracy przy jej uruchamianiu, lub w ogóle w przypadkach, gdy użytkownik nie wykonuje żadnego gestu.
Sprawdzoną metodą jest korzystanie z trybu cichego, gdy nie wymaga żadnych gestów użytkownika, oraz trybu interaktywnego, jeśli użytkownik wykonuje gest (np. kliknął przycisk Zaloguj się w aplikacji). Pamiętaj, że nie egzekwujemy wymogu używania gestów.