Korzystanie z modelu tokena

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.

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",
        });
prosić o zgodę i uzyskiwać tokeny dostępu za pomocą gestów, Kliknij „+”, aby otworzyć:

Dokumenty do przeczytania

Pokaż ostatnie dokumenty

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/documents.readonly'
             })
           );

Nadchodzące wydarzenia

Pokaż informacje z kalendarza

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/calendar.readonly'
             })
           );

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
Strona internetowa Kod
Strona 1. Dokumenty do przeczytania 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
Strona 2. Nadchodzące wydarzenia 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
Strona 3. Karuzela zdjęć 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/photoslibrary.readonly',
  });
  client.requestAccessToken();

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.

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);
  });