Tokenmodell verwenden

Mit der JavaScript-Bibliothek von google.accounts.oauth2 können Sie Nutzer auffordern, Einwilligung erteilen und ein Zugriffstoken für die Arbeit mit Nutzerdaten einholen. Sie basiert auf dem OAuth 2.0-Vorgang für implizite Gewährung, der es Ihnen ermöglicht, entweder Google APIs direkt mit REST und CORS verwenden oder unsere Google APIs-Clientbibliothek für JavaScript (gapi.client) für einfachen und flexiblen Zugriff auf unsere und komplexere APIs.

Bevor über einen Browser auf geschützte Nutzerdaten zugegriffen wird, lösen Nutzer auf Ihrer Website einen Trigger aus die webbasierte Kontoauswahl von Google, Anmelde- und Einwilligungsverfahren sowie Die OAuth-Server von Google geben ein Zugriffstoken aus und geben es an Ihre Webanwendung zurück.

Beim tokenbasierten Autorisierungsmodell ist keine Speicherung pro Nutzer erforderlich. Aktualisierungstokens auf Ihrem Backend-Server.

Wir empfehlen, den hier beschriebenen Ansatz zu verwenden, Techniken, die in der älteren Version von OAuth 2.0 für clientseitige Webanwendungen behandelt wurden .

Einrichtung

Suchen oder erstellen Sie eine Client-ID, indem Sie den Schritten unter Ihre Leitfaden zur Google API-Client-ID Als Nächstes fügen Sie den Seiten die Clientbibliothek hinzu. auf Ihrer Website, die Google APIs aufruft. Initialisieren Sie abschließend das Token Client. In der Regel erfolgt dies im onload-Handler der Clientbibliothek.

Tokenclient initialisieren

initTokenClient() aufrufen, um einen neuen Tokenclient mit dem der Webanwendung zu initialisieren Client-ID. Optional können Sie eine Liste mit einem oder mehreren Bereichen einfügen, auf die der Nutzer benötigt Zugriff auf:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (response) => {
    ...
  },
});

OAuth 2.0-Token-Vorgang auslösen

Verwenden Sie die Methode requestAccessToken(), um den UX-Ablauf für Tokens auszulösen und ein ein Zugriffstoken hinzufügen. Google bittet den Nutzer, Folgendes zu tun:

  • Wählen Sie das Konto aus,
  • im Google-Konto anmelden, wenn Sie nicht bereits angemeldet sind,
  • Erteilen Sie die Einwilligung für Ihre Webanwendung, um auf jeden angeforderten Bereich zuzugreifen.

Eine Nutzergeste löst den Tokenfluss aus: <button onclick="client.requestAccessToken();">Authorize me</button>

Google gibt dann eine TokenResponse zurück, die ein Zugriffstoken und eine Liste von Bereiche, denen der Nutzer Zugriff gewährt hat, oder ein Fehler für Ihren Callback-Handler.

Nutzer können die Kontoauswahl oder die Anmeldefenster schließen. In diesem Fall wird Ihr Callback-Funktion nicht aufgerufen.

Das Design und die Nutzererfahrung für Ihre App sollten erst nach einer Lesen Sie die OAuth 2.0-Richtlinien von Google sorgfältig durch. Diese Richtlinien beziehen sich auf mit mehreren Bereichen arbeiten, wann und wie mit der Nutzereinwilligung umgegangen wird und vieles mehr.

Die inkrementelle Autorisierung ist eine Methode für das Richtlinien- und App-Design, Zugriff auf Ressourcen mithilfe von Bereichen nur bei Bedarf und nicht im Voraus anfordern und alles auf einmal. Nutzer können die Freigabe der einzelnen Ressourcen genehmigen oder ablehnen. von Ihrer App angefordert wird, wird dies als detaillierte Berechtigungen bezeichnet.

Während dieses Vorgangs fordert Google die Nutzereinwilligung für die einzelnen den angeforderten Bereich, Nutzer wählen die Ressourcen aus, die für Ihre App freigegeben werden sollen, und Schließlich ruft Google Ihre Callback-Funktion auf, um ein Zugriffstoken zurückzugeben und genehmigten Umfang. Ihre App verarbeitet dann die verschiedenen Ergebnisse sicher mit detaillierten Berechtigungen möglich.

Inkrementelle Autorisierung

Bei Web-Apps zeigen die folgenden beiden allgemeinen Szenarien inkrementelle Autorisierung über:

  • Eine einseitige Ajax-App, die häufig XMLHttpRequest mit dynamischem Zugriff auf Ressourcen.
  • Mehrere Webseiten, Ressourcen werden getrennt und pro Seite verwaltet.

Diese beiden Szenarien werden präsentiert, um Designüberlegungen zu veranschaulichen und nicht als umfassende Empfehlungen dazu gedacht sind, um Einwilligung in Ihre App zu integrieren. Reale Apps können eine Variation oder ein Kombination dieser Techniken.

Ajax

Deiner App durch mehrere Aufrufe Unterstützung für inkrementelle Autorisierung hinzufügen requestAccessToken() mit dem Parameter des OverridableTokenClientConfig-Objekts scope, um einzelne Bereiche anzufordern, wenn sie benötigt werden, und wenn es notwendig ist. In diesem Beispiel werden Ressourcen angefordert und sichtbar nachdem ein minimierter Inhaltsbereich durch eine Nutzergeste maximiert wurde.

Ajax App
Initialisieren Sie den Tokenclient beim Seitenaufbau: 
        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
Einwilligung einholen und Zugriffstokens über Nutzergesten erhalten Klicken Sie zum Öffnen auf „+“:

Dokumente zum Lesen

Zuletzt verwendete Dokumente anzeigen

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

Anstehende Veranstaltungen

Kalenderinformationen anzeigen

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

Fotos anzeigen

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

Jeder Aufruf von requestAccessToken löst eine Nutzereinwilligung aus. Sie dürfen nur auf die Ressourcen zugreifen, die für den Bereich erforderlich sind, den der Nutzer auswählt. erweitern, wodurch die Ressourcenfreigabe durch die Auswahlmöglichkeiten der Nutzer eingeschränkt wird.

Mehrere Webseiten

Beim Design für inkrementelle Autorisierung werden mehrere Seiten verwendet, um nur in den Bereichen, die zum Laden einer Seite erforderlich sind. Führen Sie mehrere Aufrufe durch, um die Nutzereinwilligung einzuholen und ein Zugriffstoken abzurufen.

Mehrseitige App
Webseite Code
Seite 1: Dokumente zum Lesen 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
Seite 2: Anstehende Veranstaltungen 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
Seite 3: Fotokarussell 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/photoslibrary.readonly',
  });
  client.requestAccessToken();

Jede Seite fordert den erforderlichen Bereich an und ruft ein Zugriffstoken ab, indem sie Folgendes aufruft: initTokenClient() und requestAccessToken() bei der Ladezeit. In diesem Szenario einzelne Webseiten verwendet werden, um die Funktionen und Ressourcen nach Bereich. In der Praxis kann für einzelne Seiten mehrere verwandte Umfänge.

Detaillierte Berechtigungen

Detaillierte Berechtigungen werden in allen Szenarien auf die gleiche Weise gehandhabt. nachher requestAccessToken() ruft Ihre Callback-Funktion und ein Zugriffstoken auf prüfen Sie, ob der Nutzer die angeforderten Bereiche hasGrantedAllScopes() oder hasGrantedAnyScope(). Beispiel:

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

Alle zuvor angenommenen Erteilungen aus vorherigen Sitzungen oder Anfragen werden ebenfalls die in der Antwort enthalten sind. Die Nutzereinwilligung wird pro Nutzer aufgezeichnet und Client-ID und bleibt über mehrere Aufrufe von initTokenClient() oder requestAccessToken(). Standardmäßig ist die Nutzereinwilligung nur in der wenn ein Nutzer Ihre Website besucht und einen neuen Umfang anfordert, bei jedem Seitenaufbau mit prompt=consent in Tokenclient-Konfigurationsobjekten.

Mit Tokens arbeiten

Im Token-Modell wird kein Zugriffstoken vom Betriebssystem oder Browser gespeichert. wird beim Laden der Seite oder durch Auslösen eines requestAccessToken() durch eine Nutzergeste, z. B. das Drücken einer Schaltfläche, aufrufen.

REST und CORS mit Google APIs verwenden

Ein Zugriffstoken kann für authentifizierte Anfragen an Google APIs mithilfe von REST und CORS. Dadurch können sich Nutzer anmelden, ihre Einwilligung erteilen und Google ein Zugriffs-Token und Ihre Website, um mit den Daten des Nutzers zu arbeiten.

In diesem Beispiel können Sie sich mithilfe des von tokenRequest() zurückgegebenes Zugriffstoken:

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

Weitere Informationen finden Sie unter CORS für den Zugriff auf Google APIs verwenden.

Im nächsten Abschnitt erfahren Sie, wie sich komplexere APIs einfach integrieren lassen.

Mit der JavaScript-Bibliothek der Google APIs arbeiten

Der Token-Client funktioniert mit der Google API-Clientbibliothek für JavaScript. Unten sehen Sie das Code-Snippet.

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

Ablauf des Tokens

Zugriffstokens haben grundsätzlich nur eine kurze Lebensdauer. Wenn das Zugriffstoken abläuft vor dem Ende der Nutzersitzung ein neues Token erhalten, indem Sie folgenden Befehl aufrufen: requestAccessToken() über ein nutzergesteuertes Ereignis wie das Drücken einer Schaltfläche.

Rufen Sie die Methode google.accounts.oauth2.revoke auf, um die Nutzereinwilligung zu entfernen. Zugriff auf Ressourcen für alle Bereiche, die Ihrer Anwendung gewährt wurden. Ein gültiger Zugriff Zum Widerruf dieser Berechtigung ist ein Token erforderlich:

google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
    console.log(done);
    console.log(done.successful);
    console.log(done.error);
    console.log(done.error_description);
  });