Protokoły uwierzytelniania internetowego korzystają z funkcji HTTP, ale Aplikacje Chrome działają wewnątrz kontenera aplikacji i nie ładują się przez HTTP, nie mogą też wykonywać przekierowań ani ustawiać plików cookie.
Użyj Chrome Identity API do uwierzytelniania użytkowników: getAuthToken dla użytkowników zalogowanych na swoje konto Google i launchWebAuthFlow dla użytkowników zalogowanych na konto spoza Google. Jeśli Twoja aplikacja używa własnego serwera do uwierzytelniania użytkowników, musisz użyć tego ostatniego.
Jak to działa
Użytkownicy aplikacji w Chrome mają powiązane z kontem konto Google. Aplikacje mogą uzyskiwać tokeny OAuth2 dla tych użytkowników za pomocą interfejsu API getAuthToken.
Aplikacje, które chcą przeprowadzić uwierzytelnianie za pomocą dostawców tożsamości innych niż Google, muszą wywołać funkcję launchWebAuthFlow. Ta metoda wykorzystuje wyskakujące okienko przeglądarki do wyświetlania stron dostawcy i przechwytywania przekierowań do określonych wzorców adresów URL. Przekierowanie są przekazywane do aplikacji, która wyodrębnia z niego token.
Uwierzytelnianie konta Google
Oto 5 krok'w, które musisz wykonać:
- Dodaj uprawnienia do pliku manifestu i prześlij aplikację.
- Skopiuj klucz z zainstalowanego
manifest.jsondo pliku manifestu źródłowego, aby identyfikator aplikacji był stały podczas tworzenia. - Uzyskaj identyfikator klienta OAuth2 dla aplikacji Chrome.
- Zaktualizuj plik manifestu, aby zawierał identyfikator klienta i zakresy.
- Uzyskaj token uwierzytelniania.
Dodawanie uprawnień i przesyłanie aplikacji
Upewnij się, że uprawnienia dotyczące tożsamości znajdują się w pliku manifestu. Następnie możesz przesłać aplikację na stronę zarządzania aplikacjami i rozszerzeniami (patrz Publikowanie).
"permissions": [
"identity"
]
Kopiowanie klucza do pliku manifestu
Podczas rejestrowania aplikacji w konsoli Google OAuth podajesz jej identyfikator, który jest sprawdzany podczas żądań tokenów. Dlatego podczas tworzenia aplikacji należy używać spójnego identyfikatora aplikacji.
Aby identyfikator aplikacji był stały, musisz skopiować klucz z zainstalowanego elementu manifest.json do źródłowego pliku manifestu. Nie jest to najprzyjemniejsze zadanie, ale oto jak to zrobić:
- Otwórz katalog danych użytkownika. Przykład na 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 tutaj.
- Otwórz katalog zainstalowanej aplikacji (będzie to wersja w identyfikatorze aplikacji). Otwórz zainstalowany program
manifest.json(pico to szybki sposób otwierania pliku). - Skopiuj „klucz” w zainstalowanym pliku
manifest.jsoni wklej go do pliku źródłowego pliku manifestu aplikacji.
Pobieranie identyfikatora 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 klikając element menu Utwórz….
- Po utworzeniu i nazwaniu przejdź do menu nawigacyjnego „Usługi” i włącz wszelkie usługi Google, których potrzebuje Twoja aplikacja.
- Otwórz pozycję menu „Dostęp do interfejsu API” i kliknij niebieski przycisk Utwórz identyfikator klienta OAuth 2.0.
- Wpisz wymagane informacje o markowaniu 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).
Zaktualizuj plik manifestu, podając identyfikator klienta OAuth2 i zakresy
Musisz zaktualizować plik manifestu, aby zawierał identyfikator klienta i zakresy. Oto przykład „oauth2” w pliku gdrive.py:
"oauth2": {
"client_id": "665859454684.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/drive"
]
}
Uzyskiwanie tokenów dostępu
Teraz możesz uzyskać token uwierzytelniający, wywołując funkcję identity.getAuthToken.
chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
// Use the token.
});
Interakcja użytkownika
Podczas wywoływania getAuthToken możesz przekazać flagę ('interactive': true w przykładzie powyżej), która wskazuje, czy interfejs API ma być wywoływany w trybie interaktywnym, czy cichym. Jeśli wywołasz interfejs API w trybie interaktywnym, w razie potrzeby użytkownik zobaczy interfejs logowania lub zatwierdzenia, jak pokazano na zrzucie ekranu poniżej:
Jeśli wywołasz interfejs API w trybie cichym, zwróci on token tylko wtedy, gdy będzie można go wygenerować bez wyświetlania interfejsu użytkownika. Jest to przydatne np. wtedy, gdy aplikacja wykonuje proces podczas uruchamiania, lub w ogóle, gdy użytkownik nie wykonuje gestu.
Sprawdzoną metodą jest używanie trybu cichego, gdy użytkownik nie wykonuje żadnych gestów, oraz trybu interaktywnego, gdy użytkownik wykonuje gest (np. klika w aplikacji przycisk Zaloguj się). Pamiętaj, że nie wymagamy stosowania żadnych gestów.
Pamięć podręczna
Chrome ma pamięć podręczną z tokenami dostępu, więc możesz wywoływać funkcję getAuthToken w każdej chwili, gdy chcesz użyć tokena. Wygaśnięcie tokenu jest obsługiwane automatycznie 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 wtedy, gdy użytkownik zmieni hasło, tokeny dostępu, które wygasły, przestaną działać. Wywołania interfejsu API korzystające z tokena zaczną zwracać kod stanu HTTP 401. Jeśli wykryjesz, że tak się stało, możesz usunąć nieprawidłowy token z pamięci podręcznej Chrome, wywołując funkcję identity.removeCachedAuthToken.
Przykład użycia 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 przy użyciu konta spoza Google
Musisz wykonać 3 kroki:
- Zarejestruj się u dostawcy.
- Dodaj uprawnienia do zasobów dostawcy, do których będzie mieć dostęp Twoja aplikacja.
- Pobierz token uwierzytelniania.
Rejestracja u dostawcy
Musisz zarejestrować u dostawcy identyfikator klienta OAuth2 i skonfigurować go jako witrynę.
W przypadku identyfikatora URI przekierowania wpisywanego podczas rejestracji użyj adresu URL w tym formacie:https://<extension-id>.chromiumapp.org/<anything-here>
Jeśli na przykład identyfikator Twojej aplikacji to abcdefghijklmnopqrstuvwxyzabcdef i chcesz, by ścieżkę o nazwie provider_cb stanowiła ścieżka, aby odróżnić ją od identyfikatorów URI przekierowania od innych dostawców, użyj: https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb
Dodawanie uprawnień dla dostawcy
Aby utworzyć żądania XHR z innych domen do punktów końcowych interfejsu API dostawcy, musisz dodać odpowiednie wzorce do listy dozwolonych w uprawnieniach:
"permissions": [
...
"https://www.website-of-provider-with-user-photos.com/photos/*"
]
Pobieranie tokena
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 dowolny adres URL służący do uwierzytelniania w witrynie dostawcy. Załóżmy, że wykonujesz proces OAuth2 z dostawcą i zarejestrujesz swoją aplikację z identyfikatorem klienta 123456789012345 i chcesz uzyskać dostęp do zdjęć użytkownika na stronie 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 przeprowadzi uwierzytelnianie i, w stosownych przypadkach, wyświetli użytkownikowi interfejs logowania lub zatwierdzenia. Następnie nastąpi przekierowanie do witryny 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
Podczas wywoływania metody launchWebAuthFlow możesz przekazać flagę (w tym przykładzie 'interactive': true) wskazującą, czy interfejs API ma być wywoływany w trybie interaktywnym (czyli w trybie cichym). Jeśli wywołasz interfejs API w trybie interaktywnym, użytkownikowi zostanie wyświetlony interfejs (np. interfejs logowania lub zatwierdzania) umożliwiający uzyskanie tokena.
Jeśli wywołujesz interfejs API w trybie cichym, zwraca on token tylko wtedy, gdy dostawca jest w stanie dostarczyć token bez wyświetlania żadnego interfejsu użytkownika. Jest to przydatne np. wtedy, gdy aplikacja wykonuje proces podczas uruchamiania aplikacji, lub w ogóle, gdy użytkownik nie wykonuje gestu.
Sprawdzoną metodą jest korzystanie z trybu cichego, gdy użytkownik nie wykonuje gestu, oraz używanie trybu interaktywnego w przypadku gestu użytkownika (np. kliknięcia przycisku Zaloguj się w aplikacji). Pamiętaj, że nie wymagamy stosowania gestów.