Biblioteka JavaScript google.accounts.oauth2
pomaga wyświetlić prompt dla użytkownika
i uzyskać token dostępu do danych użytkownika. Bazuje na
Proces uwierzytelniania niejawnego OAuth 2.0, który umożliwia wywoływanie Google
interfejsów API za pomocą architektury REST i CORS lub z wykorzystaniem biblioteki klienta interfejsów API Google dla
JavaScript (gapi.client
) zapewniającego łatwy i elastyczny dostęp do naszych
bardziej złożonych interfejsów API.
Zanim użytkownicy Twojej witryny uzyskają dostęp do chronionych danych użytkownika w przeglądarce, Internetowy proces wyboru konta, logowania się i wyrażania zgody Problem z serwerami OAuth Google i zwrócenie tokena dostępu Twojej aplikacji internetowej.
W modelu autoryzacji opartym na tokenach nie trzeba przechowywać danych dla poszczególnych użytkowników. tokeny odświeżania na serwerze backendu.
Zaleca się stosowanie się do opisanego tutaj podejścia zamiast techniki objęte starszą wersją OAuth 2.0 dla aplikacji internetowych po stronie klienta Google.
Konfiguracja
Znajdź lub utwórz identyfikator klienta, wykonując czynności opisane w artykule o pobieraniu
Przewodnik po identyfikatorze klienta interfejsu Google API. Następnie dodaj do stron bibliotekę klienta.
które będą wywoływać interfejsy API Google. Na koniec zainicjuj token
klienta. Zwykle odbywa się to w ramach modułu obsługi onload
biblioteki klienta.
Inicjowanie klienta tokena
Wywołaj initTokenClient()
, aby zainicjować nowego klienta tokena przy użyciu tokena aplikacji internetowej
Client ID. Opcjonalnie możesz dołączyć listę co najmniej jednego zakresu użytkownika.
potrzebuje dostępu do:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (response) => {
...
},
});
Aktywowanie przepływu tokenów OAuth 2.0
Użyj metody requestAccessToken()
, aby aktywować przepływ UX tokena i uzyskać
token dostępu. Google prosi użytkownika o wykonanie tych czynności:
- Wybierz konto dziecka,
- zaloguj się na swoje konto Google,
- przyznać aplikacji internetowej zgodę na dostęp do każdego z żądanych zakresów.
Gest użytkownika uruchamia przepływ tokena: <button onclick="client.requestAccessToken();">Authorize me</button>
Następnie Google zwraca wartość TokenResponse
zawierającą token dostępu i listę
zakresy, do których użytkownik przyznał dostęp, lub w przypadku błędu, do modułu obsługi wywołania zwrotnego.
Użytkownicy mogą zamknąć okno wyboru konta lub okna logowania, funkcja wywołania zwrotnego nie zostanie wywołana.
Jak postępować w przypadku zgody na wykorzystanie danych
Wygląd i wrażenia użytkownika aplikacji należy wdrożyć dopiero po dokładne zapoznanie się z zasadami Google dotyczącymi protokołu OAuth 2.0. Zasady te obejmują które pozwalają m.in. określić czas i sposób przetwarzania zgody użytkownika.
Autoryzacja przyrostowa to zasada i metodologia projektowania aplikacji używana do może prosić o dostęp do zasobów za pomocą zakresów tylko w razie potrzeby, a nie z góry. i to wszystko naraz. Użytkownicy mogą zatwierdzać lub odrzucać prośby o udostępnienie poszczególnych zasobów są nazywane szczegółowymi uprawnieniami.
W ramach tego procesu Google prosi o zgodę użytkownika, podając osobno każdy z powyższych żądanego zakresu, użytkownicy wybierają zasoby, które mają zostać udostępnione Twojej aplikacji; Na koniec Google wywołuje funkcję wywołania zwrotnego, aby zwrócić token dostępu zatwierdzonych zakresów. Aplikacja bezpiecznie obsługuje różne działania dzięki szczegółowym uprawnieniom.
Autoryzacja przyrostowa
W przypadku aplikacji internetowych te 2 ogólne scenariusze pokazują przyrostowy autoryzacji przy użyciu:
- Jednostronicowa aplikacja Ajax, często używająca interfejsu
XMLHttpRequest
z dynamicznym dostępem do i zasobami Google Cloud. - Każda strona może zawierać wiele stron internetowych i zasobów, które są rozdzielone i zarządzane oddzielnie.
Te 2 scenariusze ilustrują aspekty projektowania metodologie, ale nie stanowią one kompleksowych zaleceń do wbudowania zgody użytkowników w aplikację. Prawdziwe aplikacje mogą używać odmiany lub z użyciem kombinacji tych technik.
Ajax
Dodanie obsługi przyrostowej autoryzacji do aplikacji przez wykonywanie wielu wywołań
do requestAccessToken()
i przy użyciu funkcji OverridableTokenClientConfig
obiektu
scope
w celu żądania poszczególnych zakresów w czasie, gdy są one potrzebne,
tylko wtedy, gdy jest to konieczne. W tym przykładzie zasoby będą wymagane i widoczne
dopiero gdy gest użytkownika rozwinie zwiniętą sekcję treści.
Aplikacja Ajax |
---|
Zainicjuj klienta tokena podczas wczytywania strony:
const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", }); Dokumenty do przeczytaniaPokaż ostatnie dokumenty client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/documents.readonly' }) ); Nadchodzące wydarzeniaPokaż informacje z kalendarza client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/calendar.readonly' }) ); Karuzela zdjęćWyświetl zdjęcia client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/photoslibrary.readonly' }) ); |
Każde wywołanie metody requestAccessToken
wywołuje moment zgody użytkownika, a aplikacja
ma dostęp tylko do tych zasobów, które są wymagane przez sekcję wybraną przez użytkownika
a tym samym ograniczać udostępnianie zasobów na podstawie wyborów użytkownika.
Wiele stron internetowych
Podczas projektowania autoryzacji przyrostowej korzysta się z kilku stron tylko te zakresy wymagane do wczytania strony, co zmniejsza złożoność i konieczność Wielokrotne wywołania w celu uzyskania zgody użytkownika i pobrania tokena dostępu.
Aplikacja wielostronicowa | ||||||||
---|---|---|---|---|---|---|---|---|
|
Każda strona żąda wymaganego zakresu i uzyskuje token dostępu, wywołując
initTokenClient()
i requestAccessToken()
w chwili wczytywania. W takim przypadku
poszczególnych stron internetowych służy do wyraźnego rozdzielenia funkcji użytkownika
zasobów według zakresu. W rzeczywistej sytuacji poszczególne strony mogą
wielu powiązanych zakresów.
Szczegółowe uprawnienia
Szczegółowe uprawnienia są obsługiwane w ten sam sposób we wszystkich scenariuszach. po
Funkcja requestAccessToken()
wywołuje funkcję wywołania zwrotnego i token dostępu
sprawdź, czy użytkownik zatwierdził żądane zakresy za pomocą funkcji
hasGrantedAllScopes()
lub hasGrantedAnyScope()
. Na przykład:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/documents.readonly \
https://www.googleapis.com/auth/photoslibrary.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
'https://www.googleapis.com/auth/photoslibrary.readonly')) {
// Look at pictures
...
}
if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
'https://www.googleapis.com/auth/calendar.readonly',
'https://www.googleapis.com/auth/documents.readonly')) {
// Meeting planning and review documents
...
}
}
},
});
Wszystkie zaakceptowane wcześniej zezwolenia z poprzednich sesji lub próśb również zostaną objęte
uwzględnione w odpowiedzi. Rejestr zgody użytkownika jest przeprowadzany.
Client-ID, który występuje w przypadku wielu wywołań funkcji initTokenClient()
lub
requestAccessToken()
Domyślnie zgoda użytkownika jest wymagana tylko w pierwszym
za każdym razem, gdy użytkownik odwiedza Twoją witrynę i wysyła żądanie nowego zakresu, ale może poprosić o nowy zakres
przy każdym wczytaniu strony za pomocą prompt=consent
w obiektach konfiguracji klienta tokenów.
Praca z tokenami
W modelu Token token dostępu nie jest przechowywany przez system operacyjny ani przeglądarkę.
nowy token jest uzyskiwany po raz pierwszy podczas wczytywania strony, a następnie przez wywołanie
wywołanie aplikacji requestAccessToken()
gestem użytkownika, np. naciśnięciem przycisku.
Używanie REST i CORS z interfejsami API Google
Token dostępu może służyć do wysyłania uwierzytelnionych żądań do interfejsów API Google za pomocą REST i CORS. Dzięki temu użytkownicy mogą się zalogować, wyrazić zgodę, Google może wysłać do obsługi danych użytkownika w witrynie.
W tym przykładzie możesz wyświetlić nadchodzące wydarzenia w kalendarzu zalogowanych użytkowników za pomocą
token dostępu zwrócony przez tokenRequest()
:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();
Więcej informacji znajdziesz w artykule Jak używać CORS do uzyskiwania dostępu do interfejsów API Google.
W następnej sekcji omawiamy, jak łatwo przeprowadzić integrację z bardziej złożonymi interfejsami API.
Praca z biblioteką JavaScript interfejsów API Google
Klient tokenów współpracuje z biblioteką klienta interfejsu API Google do obsługi JavaScriptu. Fragment kodu znajduje się poniżej.
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
gapi.client.setApiKey('YOUR_API_KEY');
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
},
});
function listUpcomingEvents() {
gapi.client.calendar.events.list(...);
}
Wygaśnięcie tokena
Z założenia tokeny dostępu są ważne przez krótki czas. Jeśli token dostępu wygaśnie
przed zakończeniem sesji użytkownika, uzyskaj nowy token, wywołując
requestAccessToken()
ze zdarzenia wywołanego przez użytkownika, takiego jak naciśnięcie przycisku.
Anulowanie zgody za pomocą tokena dostępu
Wywołaj metodę google.accounts.oauth2.revoke
, aby usunąć zgodę użytkownika.
dostęp do zasobów wszystkich zakresów przyznanych aplikacji. Prawidłowy dostęp
Do unieważnienia tego uprawnienia wymagany jest token:
google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
console.log(done);
console.log(done.successful);
console.log(done.error);
console.log(done.error_description);
});