Ten dokument wyjaśnia, jak wdrożyć autoryzację OAuth 2.0, by uzyskać dostęp do interfejsów API Google z aplikacji internetowej JavaScript. Protokół OAuth 2.0 umożliwia użytkownikom udostępnianie określonych danych aplikacji przy jednoczesnym zachowaniu poufności nazw, haseł i innych informacji. Aplikacja może na przykład korzystać z protokołu OAuth 2.0, aby uzyskiwać od użytkowników uprawnienia do przechowywania plików na ich Dyskach Google.
Ten przepływ OAuth 2.0 jest nazywany przepływem uwierzytelniania niejawnego. Rozwiązanie to jest przeznaczone dla aplikacji, które uzyskują dostęp do interfejsów API tylko wtedy, gdy użytkownik jest obecny w aplikacji. Aplikacje te nie mogą przechowywać poufnych informacji.
W tym procesie aplikacja otwiera adres URL Google, który używa parametrów zapytania do identyfikacji aplikacji oraz typu dostępu API, jakiego wymaga aplikacja. Możesz otworzyć adres URL w bieżącym oknie przeglądarki lub w wyskakującym okienku. Użytkownik może uwierzytelnić się w Google i przyznać wymagane uprawnienia. Następnie Google przekierowuje użytkownika z powrotem do Twojej aplikacji. Przekierowanie zawiera token dostępu, który jest weryfikowany przez aplikację i używany do wysyłania żądań do interfejsu API.
Biblioteka klienta interfejsów API Google i usługi tożsamości Google
Jeśli do autoryzowanych wywołań do Google używasz biblioteki klienta interfejsów API Google dla języka JavaScript, do obsługi procesu OAuth 2.0 musisz używać biblioteki JavaScript usług tożsamości Google. Zobacz model tokena usług tożsamości Google oparty na przepływie niejawnego uwierzytelnienia przez OAuth 2.0.
Wymagania wstępne
Włącz interfejsy API w projekcie
Każda aplikacja wywołująca interfejsy API Google musi włączyć te interfejsy w elemencie API Console.
Aby włączyć interfejs API w projekcie:
- Open the API Library w: Google API Console.
- If prompted, select a project, or create a new one.
- API Library zawiera listę wszystkich dostępnych interfejsów API uporządkowanych według rodziny usług i popularności. Jeśli interfejsu API, który chcesz włączyć, nie ma na liście, znajdź go przy użyciu wyszukiwarki lub kliknij Wyświetl wszystkie w rodzinie usług, do której należy.
- Wybierz interfejs API, który chcesz włączyć, a następnie kliknij przycisk Włącz.
- If prompted, enable billing.
- If prompted, read and accept the API's Terms of Service.
Utwórz dane logowania
Każda aplikacja korzystająca z protokołu OAuth 2.0 do uzyskiwania dostępu do interfejsów API Google musi mieć dane logowania, które identyfikują aplikację na serwerze Google OAuth 2.0. Podane niżej instrukcje wyjaśniają, jak utworzyć dane logowania do projektu. Aplikacje mogą używać tych danych logowania, aby uzyskiwać dostęp do interfejsów API włączonych w tym projekcie.
- Go to the Credentials page.
- Kliknij Utwórz dane logowania > Identyfikator klienta OAuth.
- Wybierz typ aplikacji Aplikacja internetowa.
- Wypełnij formularz. Aplikacje, które używają JavaScriptu do wykonywania autoryzowanych żądań do interfejsu API Google, muszą określać autoryzowane źródła JavaScriptu. Źródła identyfikują domeny, z których aplikacja może wysyłać żądania do serwera OAuth 2.0. Te źródła muszą być zgodne z regułami weryfikacji Google.
Zidentyfikuj zakresy dostępu
Zakresy pozwalają aplikacji prosić o dostęp tylko do tych zasobów, których potrzebuje, a jednocześnie pozwalają użytkownikom kontrolować zakres dostępu, który przyznają aplikacji. Dlatego może występować odwrotna zależność między liczbą żądanych zakresów a prawdopodobieństwem uzyskania zgody użytkownika.
Zanim zaczniesz wdrażać autoryzację OAuth 2.0, zalecamy zidentyfikowanie zakresów, do których aplikacja będzie potrzebować uprawnień dostępu.
Dokument Zakresy interfejsów API OAuth 2.0 zawiera pełną listę zakresów, które możesz wykorzystywać do uzyskiwania dostępu do interfejsów API Google.
Uzyskiwanie tokenów dostępu OAuth 2.0
Poniższe kroki pokazują, jak Twoja aplikacja współpracuje z serwerem Google OAuth 2.0, aby uzyskać zgodę użytkownika na wykonanie żądania do interfejsu API w jego imieniu. Twoja aplikacja musi uzyskać taką zgodę, zanim będzie mogła wykonać żądanie do interfejsu Google API wymagające autoryzacji użytkownika.
Krok 1. Przekieruj na serwer Google OAuth 2.0
Aby poprosić o dostęp do danych użytkownika, przekieruj go na serwer Google OAuth 2.0.
Punkty końcowe OAuth 2.0
Wygeneruj adres URL, aby poprosić o dostęp z punktu końcowego Google OAuth 2.0 pod adresem https://accounts.google.com/o/oauth2/v2/auth
. Ten punkt końcowy jest dostępny przez HTTPS; zwykłe połączenia HTTP są odrzucane.
Serwer autoryzacji Google obsługuje następujące parametry ciągu zapytania dla aplikacji serwera WWW:
Parametry | |||||||
---|---|---|---|---|---|---|---|
client_id |
Wymagany
Identyfikator klienta Twojej aplikacji. Tę wartość znajdziesz tutaj: API Console Credentials page. |
||||||
redirect_uri |
Wymagany
Określa, gdzie serwer interfejsu API przekierowuje użytkownika po zakończeniu procesu autoryzacji. Wartość musi być dokładnie taka sama jak jeden z autoryzowanych identyfikatorów URI przekierowania klienta OAuth 2.0 skonfigurowanych w: API Console
Credentials pageklienta. Jeśli ta wartość nie pasuje do autoryzowanego identyfikatora URI przekierowania dla podanego Schemat |
||||||
response_type |
Wymagany
Aplikacje JavaScript muszą ustawić wartość parametru na |
||||||
scope |
Wymagany
Lista rozdzielonych spacjami zakresów określających zasoby, do których aplikacja może uzyskiwać dostęp w imieniu użytkownika. Te wartości informują o ekranie zgody, który Google wyświetla użytkownikowi. Zakresy pozwalają aplikacji prosić o dostęp tylko do tych zasobów, których potrzebuje, a jednocześnie pozwalają użytkownikom kontrolować zakres dostępu, który przyznają aplikacji. Dlatego występuje odwrotna zależność między liczbą żądanych zakresów a prawdopodobieństwem uzyskania zgody użytkownika. Zalecamy, aby aplikacja prosiła o dostęp do zakresów autoryzacji w kontekście, gdy jest to możliwe. Prosząc użytkowników o dostęp do danych użytkownika w kontekście za pomocą przyrostowej autoryzacji, ułatwiasz użytkownikom zrozumienie, dlaczego aplikacja potrzebuje dostępu, o który prosi. |
||||||
state |
Zalecane
Określa dowolną wartość ciągu znaków, której aplikacja używa do utrzymywania stanu między żądaniem autoryzacji a odpowiedzią serwera autoryzacji.
Serwer zwraca dokładną wartość, którą wysyłasz jako parę Możesz używać tego parametru do różnych celów, np. do kierowania użytkownika do właściwego zasobu w aplikacji, wysyłania liczb jednorazowych i zapobiegania fałszowaniu żądań z innych witryn. Ponieważ |
||||||
include_granted_scopes |
Opcjonalny
Umożliwia aplikacjom korzystanie z przyrostowej autoryzacji w celu zażądania dostępu do dodatkowych zakresów w kontekście. Jeśli ustawisz wartość tego parametru na |
||||||
enable_granular_consent |
Opcjonalny
Domyślna wartość to |
||||||
login_hint |
Opcjonalny
Jeśli aplikacja wie, który użytkownik próbuje się uwierzytelnić, może użyć tego parametru, aby wskazać serwerowi uwierzytelniania Google wskazówkę. Serwer korzysta z tej podpowiedzi, aby uprościć proces logowania, wstępnie wypełniając pole adresu e-mail w formularzu logowania lub wybierając odpowiednią sesję wielokrotnego logowania. Ustaw wartość parametru na adres e-mail lub identyfikator |
||||||
prompt |
Opcjonalny
Lista rozdzielanych spacjami i wielkości liter w podpowiedziach, które mają pojawić się użytkownikowi. Jeśli nie określisz tego parametru, użytkownik zostanie poproszony tylko wtedy, gdy projekt poprosi o dostęp po raz pierwszy. Więcej informacji znajdziesz w sekcji Prośba o ponowną zgodę. Możliwe wartości to:
|
Przykładowe przekierowanie na serwer autoryzacji Google
Poniżej znajduje się przykładowy URL ze znakami podziału wiersza i spacjami, aby zwiększyć czytelność.
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly& include_granted_scopes=true& response_type=token& state=state_parameter_passthrough_value& redirect_uri=https%3A//oauth2.example.com/code& client_id=client_id
Po utworzeniu adresu URL żądania przekieruj na niego użytkownika.
Przykładowy kod JavaScript
Poniższy fragment kodu JavaScript pokazuje, jak rozpocząć proces autoryzacji w JavaScripcie bez używania biblioteki klienta interfejsów API Google do obsługi JavaScriptu. Ten punkt końcowy OAuth 2.0 nie obsługuje udostępniania zasobów między serwerami (CORS), dlatego fragment kodu tworzy formularz, który otwiera żądanie do tego punktu końcowego.
/* * Create form to request access token from Google's OAuth 2.0 server. */ function oauthSignIn() { // Google's OAuth 2.0 endpoint for requesting an access token var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth'; // Create <form> element to submit parameters to OAuth 2.0 endpoint. var form = document.createElement('form'); form.setAttribute('method', 'GET'); // Send as a GET request. form.setAttribute('action', oauth2Endpoint); // Parameters to pass to OAuth 2.0 endpoint. var params = {'client_id': 'YOUR_CLIENT_ID', 'redirect_uri': 'YOUR_REDIRECT_URI', 'response_type': 'token', 'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly', 'include_granted_scopes': 'true', 'state': 'pass-through value'}; // Add form parameters as hidden input values. for (var p in params) { var input = document.createElement('input'); input.setAttribute('type', 'hidden'); input.setAttribute('name', p); input.setAttribute('value', params[p]); form.appendChild(input); } // Add form to page and submit it to open the OAuth 2.0 endpoint. document.body.appendChild(form); form.submit(); }
Krok 2. Google prosi użytkownika o zgodę
W tym kroku użytkownik decyduje, czy przyznać Twojej aplikacji żądany dostęp. Na tym etapie Google wyświetla okno zgody z nazwą Twojej aplikacji i usług interfejsu Google API, do których prosi o pozwolenie na dostęp. Służą do tego dane logowania użytkownika, a także podsumowanie zakresów przyznanych dostępu. Użytkownik może wówczas wyrazić zgodę na przyznanie dostępu do co najmniej 1 zakresu żądanego przez Twoją aplikację lub odrzucić prośbę.
Na tym etapie Twoja aplikacja nie musi nic robić, ponieważ czeka na odpowiedź serwera Google OAuth 2.0 z informacją o przyznaniu dostępu. Odpowiedź wyjaśnimy w następnym kroku.
Błędy
Żądania wysyłane do punktu końcowego autoryzacji OAuth 2.0 Google mogą wyświetlać komunikaty o błędach, które widzą użytkownicy, zamiast oczekiwanych przepływów uwierzytelniania i autoryzacji. Poniżej znajdziesz typowe kody błędów i sugerowane rozwiązania.
admin_policy_enforced
Na koncie Google nie można autoryzować co najmniej 1 żądanego zakresu ze względu na zasady administratora Google Workspace. Przeczytaj artykuł pomocy dla administratorów Google Workspace Określanie, które aplikacje innych firm i aplikacje wewnętrzne mają dostęp do danych Google Workspace, aby dowiedzieć się więcej o tym, jak administrator może ograniczać dostęp do wszystkich zakresów albo do zakresów wrażliwych i zakresów z ograniczeniami do czasu jednoznacznego przyznania dostępu do Twojego identyfikatora klienta OAuth.
disallowed_useragent
Punkt końcowy autoryzacji jest wyświetlany w osadzonym kliencie użytkownika, który jest niedozwolony przez zasady Google OAuth 2.0.
Android
Deweloperzy aplikacji na Androida mogą napotkać ten komunikat o błędzie podczas otwierania żądań autoryzacji w android.webkit.WebView
.
Deweloperzy powinni zamiast tego używać bibliotek Androida, takich jak Google Sign-In for Android lub AppAuth for Android fundacji OpenID Foundation.
Programiści stron internetowych mogą napotkać ten błąd, gdy aplikacja na Androida otwiera ogólny link internetowy w umieszczonym kliencie użytkownika, a użytkownik przechodzi z Twojej witryny do punktu końcowego autoryzacji OAuth 2.0 Google. Deweloperzy powinni zezwolić na otwieranie ogólnych linków w domyślnym module obsługi linków systemu operacyjnego, który obejmuje moduły obsługi linków aplikacji na Androida i domyślną aplikację przeglądarki. Obsługiwaną opcją jest też biblioteka kart niestandardowych na Androida.
iOS
Deweloperzy aplikacji na iOS i macOS mogą napotkać ten błąd podczas otwierania żądań autoryzacji w WKWebView
.
Deweloperzy powinni zamiast tego używać bibliotek iOS, takich jak Google Sign-In for iOS lub AppAuth for iOS opracowanych przez OpenID Foundation.
Programiści stron internetowych mogą napotkać ten błąd, gdy aplikacja na iOS lub macOS otworzy ogólny link internetowy w umieszczonym kliencie użytkownika, a użytkownik przejdzie z Twojej witryny do punktu końcowego autoryzacji OAuth 2.0 Google. Deweloperzy powinni zezwalać na otwieranie ogólnych linków w domyślnym module obsługi linków systemu operacyjnego, który obejmuje moduły obsługi linków uniwersalnych i domyślną aplikację przeglądarki. Obsługiwaną opcją jest też biblioteka SFSafariViewController
.
org_internal
Identyfikator klienta OAuth w żądaniu jest częścią projektu ograniczającego dostęp do kont Google w określonej organizacji Google Cloud. Więcej informacji o tej opcji konfiguracji znajdziesz w sekcji Typ użytkownika artykułu pomocy dotyczącego konfigurowania ekranu zgody OAuth.
invalid_client
Źródło, z którego wysłano żądanie, nie jest autoryzowane dla tego klienta. Zobacz origin_mismatch
.
invalid_grant
Jeśli korzystasz z autoryzacji przyrostowej, token mógł wygasnąć lub został unieważniony. Ponownie uwierzytelnij użytkownika i poproś o zgodę na uzyskanie nowych tokenów. Jeśli ten błąd nadal się pojawia, sprawdź, czy Twoja aplikacja została poprawnie skonfigurowana oraz czy w żądaniu używasz prawidłowych tokenów i parametrów. W przeciwnym razie konto użytkownika mogło zostać usunięte lub wyłączone.
origin_mismatch
Schemat, domena lub port JavaScriptu, który pochodzi z żądania autoryzacji, może nie być zgodny z autoryzowanym identyfikatorem URI źródła JavaScript zarejestrowanym dla identyfikatora klienta OAuth. Przejrzyj autoryzowane źródła JavaScriptu w: Google API Console Credentials page.
redirect_uri_mismatch
Wartość redirect_uri
przekazana w żądaniu autoryzacji nie pasuje do autoryzowanego identyfikatora URI przekierowania dla identyfikatora klienta OAuth. Sprawdź autoryzowane identyfikatory URI przekierowania w Google API Console Credentials page.
Schemat, domena lub port JavaScriptu, który pochodzi z żądania autoryzacji, może nie być zgodny z autoryzowanym identyfikatorem URI źródła JavaScript zarejestrowanym dla identyfikatora klienta OAuth. Sprawdź autoryzowane źródła JavaScriptu w pliku Google API Console Credentials page.
Parametr redirect_uri
może odnosić się do zewnętrznego procesu OAuth, który został wycofany i nie jest już obsługiwany. Informacje o tym, jak zaktualizować integrację, znajdziesz w przewodniku po migracji.
invalid_request
Coś jest nie tak z przesłaną przez Ciebie prośbą. Istnieje kilka możliwych przyczyn tej sytuacji:
- Żądanie nie jest prawidłowo sformatowane
- W żądaniu brakowało wymaganych parametrów
- Żądanie wykorzystuje metodę autoryzacji, która nie jest obsługiwana przez Google. Sprawdź, czy integracja OAuth korzysta z zalecanej metody integracji
Krok 3. Przetwórz odpowiedź serwera OAuth 2.0
Punkty końcowe OAuth 2.0
Serwer OAuth 2.0 wysyła odpowiedź na żądanie redirect_uri
określone w żądaniu tokena dostępu.
Jeśli użytkownik zatwierdzi żądanie, odpowiedź będzie zawierać token dostępu. Jeśli użytkownik nie zatwierdzi żądania, odpowiedź będzie zawierała komunikat o błędzie. Token dostępu lub komunikat o błędzie są zwracane we fragmencie z krzyżykiem identyfikatora URI przekierowania, jak w tym przykładzie:
Odpowiedź tokena dostępu:
https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600
Oprócz parametru
access_token
ciąg fragmentu zawiera też parametrtoken_type
, który zawsze jest ustawiony naBearer
, oraz parametrexpires_in
, który określa czas życia tokena w sekundach. Jeśli w żądaniu tokena dostępu określono parametrstate
, jego wartość również zostanie uwzględniona w odpowiedzi.- Odpowiedź błędu:
https://oauth2.example.com/callback#error=access_denied
Przykładowa odpowiedź serwera OAuth 2.0
Aby przetestować ten proces, kliknij poniższy przykładowy adres URL, który poprosi o dostęp tylko do odczytu do wyświetlania metadanych plików na Dysku Google:
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly& include_granted_scopes=true& response_type=token& state=state_parameter_passthrough_value& redirect_uri=https%3A//oauth2.example.com/code& client_id=client_id
Gdy zakończy się proces obsługi OAuth 2.0, przekierujemy Cię do http://localhost/oauth2callback
. Ten adres URL spowoduje błąd 404 NOT FOUND
, chyba że komputer lokalny wyświetli plik pod tym adresem. Następny krok zawiera więcej szczegółów na temat informacji zwracanych w identyfikatorze URI, gdy użytkownik zostaje przekierowany z powrotem do Twojej aplikacji.
Wywoływanie interfejsów API Google
Punkty końcowe OAuth 2.0
Gdy aplikacja uzyska token dostępu, możesz za jego pomocą wywoływać interfejs Google API w imieniu danego konta użytkownika(o ile zostały przyznane zakresy dostępu wymagane przez interfejs API). Aby to zrobić, uwzględnij token dostępu w żądaniu wysyłanym do interfejsu API, uwzględniając parametr zapytania access_token
lub wartość nagłówka HTTP Authorization
Bearer
. W miarę możliwości preferowany jest nagłówek HTTP, ponieważ ciągi zapytań są zwykle widoczne w logach serwera. W większości przypadków możesz użyć biblioteki klienta do skonfigurowania wywołań interfejsów API Google (np. podczas wywołania interfejsu Drive Files API).
Wszystkie interfejsy API Google możesz wypróbować i zobaczyć ich zakresy w OAuth 2.0 Playground.
Przykłady HTTP GET
Wywołanie punktu końcowego
drive.files
(interfejsu Drive Files API) za pomocą nagłówka HTTP Authorization: Bearer
może wyglądać tak. Pamiętaj, że musisz określić własny token dostępu:
GET /drive/v2/files HTTP/1.1 Host: www.googleapis.com Authorization: Bearer access_token
Oto wywołanie tego samego interfejsu API dla uwierzytelnionego użytkownika za pomocą parametru ciągu zapytania access_token
:
GET https://www.googleapis.com/drive/v2/files?access_token=access_token
Przykłady zapytań z operatorem curl
Możesz przetestować te polecenia za pomocą aplikacji wiersza poleceń curl
. Oto przykład, w którym użyto opcji nagłówka HTTP (preferowane):
curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files
Możesz też użyć opcji parametru ciągu zapytania:
curl https://www.googleapis.com/drive/v2/files?access_token=access_token
Przykładowy kod JavaScript
Fragment kodu poniżej pokazuje, jak używać CORS (współdzielenia zasobów między domenami) do wysyłania żądania do interfejsu API Google. W tym przykładzie nie wykorzystano biblioteki klienta interfejsów API Google do obsługi JavaScriptu. Nawet jeśli nie korzystasz z biblioteki klienta, przewodnik pomocy CORS w dokumentacji tej biblioteki prawdopodobnie pomoże Ci lepiej zrozumieć te żądania.
W tym fragmencie kodu zmienna access_token
reprezentuje token uzyskany przez Ciebie na potrzeby wysyłania żądań do interfejsu API w imieniu autoryzowanego użytkownika. Pełny przykład pokazuje, jak zapisać ten token w lokalnej pamięci przeglądarki i pobrać go podczas wykonywania żądania do interfejsu API.
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/drive/v3/about?fields=user&' + 'access_token=' + params['access_token']); xhr.onreadystatechange = function (e) { console.log(xhr.response); }; xhr.send(null);
Pełny przykład
Punkty końcowe OAuth 2.0
Ten przykładowy kod pokazuje, jak wykonać przepływ OAuth 2.0 w JavaScripcie bez korzystania z biblioteki klienta interfejsów API Google do obsługi JavaScriptu. Kod jest przeznaczony do strony HTML, na której wyświetla się przycisk umożliwiający wykonanie żądania do interfejsu API. Jeśli klikniesz przycisk, kod sprawdzi, czy strona zapisała token dostępu interfejsu API w pamięci lokalnej przeglądarki. Jeśli tak, wykona żądanie do interfejsu API. W przeciwnym razie inicjuje przepływ OAuth 2.0.
W przypadku protokołu OAuth 2.0 strona wykonuje następujące czynności:
- Kieruje on użytkownika na serwer Google OAuth 2.0, który żąda dostępu do zakresu
https://www.googleapis.com/auth/drive.metadata.readonly
. - Po przyznaniu (lub odmowie) dostępu do co najmniej jednego żądanego zakresu użytkownik jest przekierowywany na stronę oryginalną, która analizuje token dostępu z ciągu z identyfikatorem fragmentu.
Strona używa tokena dostępu, aby wysyłać przykładowe żądanie do interfejsu API.
Żądanie do interfejsu API wywołuje metodę
about.get
interfejsu Drive API, aby pobrać informacje o koncie Dysku Google autoryzowanego użytkownika.- Jeśli żądanie zostanie wykonane, odpowiedź interfejsu API zostanie zarejestrowana w konsoli debugowania przeglądarki.
Dostęp do aplikacji możesz odebrać na stronie Uprawnienia na swoim koncie Google. Aplikacja będzie wymieniona jako Wersja demonstracyjna OAuth 2.0 dla Dokumentów Google API.
Aby uruchomić ten kod lokalnie, ustaw wartości zmiennych YOUR_CLIENT_ID
i YOUR_REDIRECT_URI
odpowiadające Twoim danych logowania do autoryzacji. Zmienna YOUR_REDIRECT_URI
powinna mieć ustawiony ten sam adres URL, pod którym wyświetla się strona. Wartość musi być dokładnie taka sama jak jeden z autoryzowanych identyfikatorów URI przekierowania klienta OAuth 2.0 skonfigurowanych w: API Console Credentials page. Jeśli ta wartość nie pasuje do autoryzowanego identyfikatora URI, wystąpi błąd redirect_uri_mismatch
. Twój projekt musi też włączyć odpowiedni interfejs API dla tego żądania.
<html><head></head><body> <script> var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE'; var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE'; var fragmentString = location.hash.substring(1); // Parse query string to see if page request is coming from OAuth 2.0 server. var params = {}; var regex = /([^&=]+)=([^&]*)/g, m; while (m = regex.exec(fragmentString)) { params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); } if (Object.keys(params).length > 0) { localStorage.setItem('oauth2-test-params', JSON.stringify(params) ); if (params['state'] && params['state'] == 'try_sample_request') { trySampleRequest(); } } // If there's an access token, try an API request. // Otherwise, start OAuth 2.0 flow. function trySampleRequest() { var params = JSON.parse(localStorage.getItem('oauth2-test-params')); if (params && params['access_token']) { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/drive/v3/about?fields=user&' + 'access_token=' + params['access_token']); xhr.onreadystatechange = function (e) { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.response); } else if (xhr.readyState === 4 && xhr.status === 401) { // Token invalid, so prompt for user permission. oauth2SignIn(); } }; xhr.send(null); } else { oauth2SignIn(); } } /* * Create form to request access token from Google's OAuth 2.0 server. */ function oauth2SignIn() { // Google's OAuth 2.0 endpoint for requesting an access token var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth'; // Create element to open OAuth 2.0 endpoint in new window. var form = document.createElement('form'); form.setAttribute('method', 'GET'); // Send as a GET request. form.setAttribute('action', oauth2Endpoint); // Parameters to pass to OAuth 2.0 endpoint. var params = {'client_id': YOUR_CLIENT_ID, 'redirect_uri': YOUR_REDIRECT_URI, 'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly', 'state': 'try_sample_request', 'include_granted_scopes': 'true', 'response_type': 'token'}; // Add form parameters as hidden input values. for (var p in params) { var input = document.createElement('input'); input.setAttribute('type', 'hidden'); input.setAttribute('name', p); input.setAttribute('value', params[p]); form.appendChild(input); } // Add form to page and submit it to open the OAuth 2.0 endpoint. document.body.appendChild(form); form.submit(); } </script> <button onclick="trySampleRequest();">Try sample request</button> </body></html>
Reguły weryfikacji źródła JavaScriptu
Google stosuje poniższe reguły weryfikacji do źródeł JavaScript, aby pomóc deweloperom chronić aplikacje. Źródła JavaScript muszą być zgodne z tymi regułami. Definicję domeny, hosta i schematu znajdziesz poniżej w sekcji 3 RFC 3986.
Reguły weryfikacji | |
---|---|
Schemat |
Źródła JavaScript muszą używać schematu HTTPS, a nie zwykłego HTTP. Identyfikatory URI hosta lokalnego (w tym identyfikatory URI adresu IP hosta lokalnego) są wykluczane z tej reguły. |
Osoba prowadząca |
Hosty nie mogą być nieprzetworzonymi adresami IP. Adresy IP lokalnego hosta są wykluczone z tej reguły. |
Domena |
“googleusercontent.com” .goo.gl ), chyba że domena jest własnością aplikacji. |
Informacje o użytkowniku |
Źródła JavaScript nie mogą zawierać podkomponentu informacji o użytkowniku. |
Ścieżka |
Źródła JavaScript nie mogą zawierać komponentu ścieżki. |
Zapytanie |
Źródła JavaScript nie mogą zawierać komponentu zapytania. |
Fragment |
Źródła JavaScript nie mogą zawierać komponentu fragment. |
Znaki |
Źródło kodu JavaScript nie może zawierać niektórych znaków, w tym:
|
Autoryzacja przyrostowa
W protokole OAuth 2.0 aplikacja żąda autoryzacji dostępu do zasobów identyfikowanych przez zakresy. Żądanie autoryzacji zasobów wtedy, gdy są potrzebne, jest uważane za najlepszą metodę zapewniającą użytkownikom wygodę. Aby włączyć tę praktykę, serwer autoryzacji Google obsługuje autoryzację przyrostową. Ta funkcja pozwala żądać zakresów w razie potrzeby i, jeśli użytkownik przyzna uprawnienia do nowego zakresu, zwraca kod autoryzacji, który można wymienić na token zawierający wszystkie zakresy przyznane projektowi przez użytkownika.
Na przykład aplikacja umożliwiająca użytkownikom próbkowanie utworów muzycznych i tworzenie składanek może wymagać bardzo niewielu zasobów podczas logowania – może to być nawet imię i nazwisko osoby, która się loguje. Jednak zapisanie gotowej składanki wymagałoby dostępu do Dysku Google. Większość osób uznałaby za naturalne, gdyby została poproszona o dostęp do Dysku Google tylko wtedy, gdy aplikacja faktycznie go potrzebuje.
W tym przypadku w czasie logowania aplikacja może zażądać zakresów openid
i profile
, aby przeprowadzić podstawowe logowanie, a następnie w momencie pierwszego żądania zapisać składankę żądania zakresu https://www.googleapis.com/auth/drive.file
.
W przypadku tokena dostępu uzyskanego z autoryzacji przyrostowej obowiązują te reguły:
- Token pozwala uzyskiwać dostęp do zasobów odpowiadających dowolnemu zakresom uwzględnionym w nowej, połączonej autoryzacji.
- Gdy do uzyskania tokena dostępu użyjesz tokena odświeżania połączonej autoryzacji, token dostępu reprezentuje połączoną autoryzację i może być użyty w przypadku dowolnej z wartości
scope
zawartych w odpowiedzi. - Łączna autoryzacja obejmuje wszystkie zakresy przyznane przez użytkownika projektowi API, nawet jeśli żądania o granty zostały przesłane przez różnych klientów. Jeśli na przykład użytkownik przyznał dostęp do jednego zakresu za pomocą klienta aplikacji na komputer, a następnie przyznał inny zakres tej samej aplikacji w kliencie mobilnym, łączna autoryzacja obejmie oba zakresy.
- Jeśli unieważnisz token reprezentujący połączoną autoryzację, dostęp do wszystkich zakresów tej autoryzacji w imieniu powiązanego użytkownika zostanie jednocześnie unieważniony.
Poniższe przykłady kodu pokazują, jak dodać zakresy do istniejącego tokena dostępu. Dzięki temu podejście unikniesz konieczności zarządzania wieloma tokenami dostępu.
Punkty końcowe OAuth 2.0
Aby dodać zakresy do istniejącego tokena dostępu, umieść parametr include_granted_scopes
w żądaniu wysyłanym do serwera OAuth 2.0 Google.
Poniższy fragment kodu pokazuje, jak to zrobić. Fragment kodu zakłada, że zakresy, dla których token dostępu jest prawidłowy, są zapisane w pamięci lokalnej przeglądarki. (Kod pełnego przykładu zawiera listę zakresów, dla których token dostępu jest prawidłowy, ustawiając właściwość oauth2-test-params.scope
w pamięci lokalnej przeglądarki).
Fragment kodu porównuje zakresy, w przypadku których token dostępu jest prawidłowy, z zakresem, którego chcesz użyć w przypadku konkretnego zapytania. Jeśli token dostępu nie obejmuje tego zakresu, rozpocznie się przepływ OAuth 2.0.
Funkcja oauth2SignIn
jest tu taka sama jak funkcja podana w kroku 2 (została podana w dalszej części pełnego przykładu).
var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly'; var params = JSON.parse(localStorage.getItem('oauth2-test-params')); var current_scope_granted = false; if (params.hasOwnProperty('scope')) { var scopes = params['scope'].split(' '); for (var s = 0; s < scopes.length; s++) { if (SCOPE == scopes[s]) { current_scope_granted = true; } } } if (!current_scope_granted) { oauth2SignIn(); // This function is defined elsewhere in this document. } else { // Since you already have access, you can proceed with the API request. }
Unieważnianie tokena
W niektórych przypadkach użytkownik może zechcieć anulować dostęp przyznany aplikacji. Użytkownik może odebrać dostęp w Ustawieniach konta. Więcej informacji znajdziesz w sekcji Usuwanie dostępu witryny lub aplikacji do Twojego konta w witrynie lub aplikacji innych firm, które mają dostęp do Twojego konta.
Aplikacja może też automatycznie anulować przyznany jej dostęp. Automatyczne unieważnienie jest ważne w przypadkach, gdy użytkownik anuluje subskrypcję, usunie aplikację lub znacząco zmienią się zasoby API wymagane przez aplikację. Innymi słowy, część procesu usuwania może obejmować żądanie do interfejsu API, aby zapewnić, że uprawnienia przyznane wcześniej aplikacji zostaną usunięte.
Punkty końcowe OAuth 2.0
Aby programowo unieważnić token, aplikacja wysyła żądanie do https://oauth2.googleapis.com/revoke
i umieszcza token jako parametr:
curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \ https://oauth2.googleapis.com/revoke?token={token}
Tokenem może być token dostępu lub token odświeżania. Jeśli jest to token dostępu, który ma odpowiedni token odświeżania, token odświeżania również zostanie unieważniony.
Jeśli odwołanie zostanie przetworzone pomyślnie, kod stanu HTTP odpowiedzi to 200
. W przypadku wystąpienia błędu zwracany jest kod stanu HTTP 400
wraz z kodem błędu.
Poniższy fragment kodu JavaScript pokazuje, jak unieważnić token w JavaScript bez użycia biblioteki klienta interfejsów API Google do obsługi JavaScriptu. Punkt końcowy Google OAuth 2.0 do unieważniania tokenów nie obsługuje udostępniania zasobów między domenami (CORS), kod tworzy formularz i przesyła go do punktu końcowego, zamiast używać metody XMLHttpRequest()
do publikowania żądania.
function revokeAccess(accessToken) { // Google's OAuth 2.0 endpoint for revoking access tokens. var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke'; // Create <form> element to use to POST data to the OAuth 2.0 endpoint. var form = document.createElement('form'); form.setAttribute('method', 'post'); form.setAttribute('action', revokeTokenEndpoint); // Add access token to the form so it is set as value of 'token' parameter. // This corresponds to the sample curl request, where the URL is: // https://oauth2.googleapis.com/revoke?token={token} var tokenField = document.createElement('input'); tokenField.setAttribute('type', 'hidden'); tokenField.setAttribute('name', 'token'); tokenField.setAttribute('value', accessToken); form.appendChild(tokenField); // Add form to page and submit it to actually revoke the token. document.body.appendChild(form); form.submit(); }