Diese Seite wurde von der Cloud Translation API übersetzt.

Zu Google Identity Services migrieren

Übersicht

Um ein nutzerspezifisches Zugriffstoken für den Aufruf von Google APIs zu erhalten, bietet Google mehrere JavaScript-Bibliotheken:

Dieser Leitfaden enthält eine Anleitung für die Migration von diesen Bibliotheken zum Google Bibliothek der Identitätsdienste.

Wenn Sie diese Anleitung befolgen, werden Sie:

die verworfene Plattformbibliothek durch die Identity Services-Bibliothek ersetzen, und
Wenn Sie die API-Clientbibliothek verwenden, entfernen Sie das verworfene Modul gapi.auth2. Methoden und Objekte. Sie werden durch Identity Services-Entsprechungen ersetzt.

Eine Beschreibung der Änderungen im Identity Services JavaScript Lesen Sie die Übersicht und die Funktionsweise der Nutzerautorisierung. Schlüsselbegriffe und Konzepte.

Wenn du eine Authentifizierung für die Nutzerregistrierung und -anmeldung suchst, siehe Migrieren Sie stattdessen von Google Log-in.

Autorisierungsablauf identifizieren

Es gibt zwei mögliche Nutzerautorisierungsabläufe: die implizite und die Autorisierung. Code.

Überprüfen Sie Ihre Webanwendung, um die Art des Autorisierungsvorgangs zu ermitteln. verwendet werden.

Anzeichen dafür, dass Ihre Webanwendung den impliziten Ablauf verwendet:

Ihre Webanwendung ist rein browserbasiert und hat keine Back-End-Plattform.
Der Nutzer muss anwesend sein, um Google APIs aufzurufen. Ihre App verwendet nur Zugriff Tokens und erfordert keine Aktualisierungstoken.
Ihre Web-App lädt apis.google.com/js/api.js.
Ihre Implementierung basiert auf OAuth 2.0 für clientseitiges Web Anwendungen.
Deine App verwendet entweder das Modul gapi.client oder gapi.auth2 aus Google API-Clientbibliothek für JavaScript

Anzeichen dafür, dass Ihre Webanwendung den Vorgang mit Autorisierungscode verwendet:

Ihre Implementierung basiert auf:
- OAuth 2.0 für Webserveranwendungen verwenden oder
- Google Log-in für serverseitige Apps
Ihre App wird sowohl im Browser des Nutzers als auch auf Ihrer Back-End-Plattform ausgeführt.
Ihre Backend-Plattform hostet einen Autorisierungscode-Endpunkt.
Ihre Backend-Plattform ruft Google APIs im Namen von Nutzern auf, ohne dass auch im Offlinemodus.
Aktualisierungstokens werden von Ihrer Backend-Plattform verwaltet und gespeichert.

In einigen Fällen unterstützt Ihre Codebasis möglicherweise beide Abläufe.

Autorisierungsvorgang auswählen

Bevor Sie mit der Migration beginnen, müssen Sie entscheiden, ob Sie bestehenden Ablauf oder die Einführung eines anderen Ablaufs am besten Ihren Anforderungen entspricht.

Lesen Sie sich den Artikel zum Auswählen eines Autorisierungsvorgangs durch, um die wichtigsten Unterschiede zu verstehen. und Kompromisse zwischen den beiden Abläufen.

In den meisten Fällen wird der Vorgang mit Autorisierungscode empfohlen, da er die Nutzersicherheit auf höchstem Niveau. Durch die Implementierung dieses Ablaufs Plattform, um neue Offline-Funktionen wie das Abrufen von Updates einfacher hinzuzufügen. um Nutzer über wichtige Änderungen an ihrem Kalender, ihren Fotos, Abos und so weiter.

Wählen Sie mithilfe der Auswahl unten einen Autorisierungsablauf aus.

Impliziter Ablauf

Fordern Sie ein Zugriffstoken für die Verwendung im Browser an, während der Nutzer anwesend ist.

Beispiele für den impliziten Ablauf zeigt Webanwendungen vor und nach der Migration zu Identitätsdienste.

Vorgang mit Autorisierungscode

Ein von Google ausgestellter Autorisierungscode pro Nutzer wird an Ihr Backend gesendet Plattform, auf der sie dann gegen ein Zugriffstoken und ein Aktualisierungstoken ausgetauscht werden.

Die Beispiele für den Autorisierungscode-Vorgang zeigen Web-Apps vorher und nachher. Migration zu Identity Services.

Befolgen Sie in diesem Leitfaden die fett dargestellte Anleitung zum Hinzufügen, Vorhandene Funktionen entfernen, aktualisieren oder ersetzen.

Änderungen an der browserinternen Webanwendung

In diesem Abschnitt werden die Änderungen beschrieben, die Sie an Ihrer browserinternen Webanwendung vornehmen, wenn Sie Migration zur JavaScript-Bibliothek von Google Identity Services.

Betroffenen Code und Tests identifizieren

Ein Debug-Cookie kann dabei helfen, betroffenen Code zu finden und nach der Einstellung zu testen. verhalten.

Bei großen oder komplexen Anwendungen kann es schwierig sein, den gesamten Code zu finden, der vom Einstellung des Moduls gapi.auth2. Bestehende Nutzung von wird demnächst als protokolliert nicht mehr unterstützt, legen Sie den Wert des G_AUTH2_MIGRATION Cookie an informational. Fügen Sie optional einen Doppelpunkt gefolgt von durch einen Schlüsselwert, um auch im Sitzungsspeicher zu protokollieren. Nach der Anmeldung und Erhalt von Anmeldedatenprüfung oder Senden erfasster Logs zur späteren Verwendung an ein Backend Analyse. Beispielsweise speichert informational:showauth2use den Ursprung und die URL in einem Sitzungsspeicherschlüssel mit dem Namen showauth2use.

Um das Verhalten der App zu prüfen, wenn das Modul gapi.auth2 nicht mehr geladen ist, lege den Parameter des G_AUTH2_MIGRATION-Cookies auf enforced gesetzt. Dies ermöglicht das Testen von nach der Einstellung vor dem Datum der Erzwingung.

Mögliche G_AUTH2_MIGRATION-Cookie-Werte:

enforced Das Modul gapi.auth2 darf nicht geladen werden.
informational Loggen Sie die Nutzung eingestellter Funktionen in der JS-Konsole ein. Auch protokollieren an den Sitzungsspeicher, wenn ein optionaler Schlüsselname festgelegt wird: informational:key-name

Um die Auswirkungen auf die Nutzer zu minimieren, wird empfohlen, dieses Cookie zuerst lokal zu speichern in der Entwicklung und beim Testen vor dem Einsatz in Produktionsumgebungen.

Bibliotheken und Module

Das Modul gapi.auth2 verwaltet die Nutzerauthentifizierung für die Anmeldung und die implizite Autorisierungsprozess durchlaufen, ersetzen Sie dieses veraltete Modul und seine Objekte und mit der Google Identity Services-Bibliothek.

Fügen Sie die Identity Services-Bibliothek zu Ihrer Webanwendung hinzu, indem Sie sie in Ihr Dokument:

<script src="https://accounts.google.com/gsi/client" async defer></script>

Entfernen Sie alle Ladevorgänge des Moduls auth2 mit gapi.load('auth2', function).

Die Google Identity Services-Bibliothek ersetzt die Verwendung des Moduls gapi.auth2. Sie können das Modul gapi.client der Google API weiterhin sicher verwenden. Clientbibliothek für JavaScript und nutzen Sie die automatische Erstellung. aufrufbarer JS-Methoden aus einem Discovery-Dokument, und CORS-Verwaltungsfunktionen.

Kekse

Für die Nutzerautorisierung ist keine Verwendung von Cookies erforderlich.

Weitere Informationen zur Nutzerauthentifizierung finden Sie unter Migration von Google Log-in. verwendet Cookies und Wie Google Cookies verwendet zur Verwendung von Cookies durch andere Google-Produkte und -Dienste.

Anmeldedaten

Bei Google Identity Services werden Nutzerauthentifizierung und -autorisierung Es gibt zwei verschiedene Vorgänge und die Anmeldedaten der Nutzer sind getrennt: das ID-Token, mit dem Identifizierung eines Nutzers getrennt vom Zugriffstoken zurückgegeben, das für Autorisierung.

Informationen zu den Änderungen finden Sie unter Beispielanmeldedaten.

Impliziter Ablauf

Trennen Sie die Nutzerauthentifizierung und -autorisierung durch Entfernen des Nutzerprofils. Autorisierungsprozessen.

Entfernen Sie diese Referenzen zum Google Log-in-JavaScript-Client:

Methoden

GoogleUser.getBasicProfile()
GoogleUser.getId()

Vorgang mit Autorisierungscode

Identity Services trennt browserinterne Anmeldedaten in ID-Tokens und Zugriffsrechte Token. Diese Änderung gilt nicht für Anmeldedaten, die direkt über Aufrufe von Google OAuth 2.0-Endpunkten von Ihrer Back-End-Plattform auf einem sicheren Server auf Ihrer Plattform wie der Google Node.js-API-Client

Sitzungsstatus

Bisher konnten Sie mit Google Log-in den Anmeldestatus der Nutzer mithilfe folgender Funktionen verwalten:

Callback-Handler für das Monitoring des Sitzungsstatus des Nutzers.
Listener für Ereignisse und Änderungen des Anmeldestatus des Nutzers Google-Konto.

Sie sind für die Verwaltung des Anmeldestatus und der Nutzersitzungen in Ihrem Web verantwortlich

Entfernen Sie diese Referenzen zum Google Log-in-JavaScript-Client:

Objekte:

gapi.auth2.SignInOptions

Methoden:

GoogleAuth.attachClickHandler()
GoogleAuth.isSignedIn()
GoogleAuth.isSignedIn.get()
GoogleAuth.isSignedIn.listen()
GoogleAuth.signIn()
GoogleAuth.signOut()
GoogleAuth.currentUser.get()
GoogleAuth.currentUser.listen()
GoogleUser.isSignedIn()

Clientkonfiguration

Aktualisieren Sie Ihre Webanwendung, um einen Token-Client für die implizite oder Vorgang mit Autorisierungscode.

Entfernen Sie diese Referenzen zum Google Log-in-JavaScript-Client:

Objekte:

gapi.auth2.ClientConfig
gapi.auth2.OfflineAccessOptions

Methoden:

gapi.auth2.getAuthInstance()
GoogleUser.grant()

Impliziter Ablauf

Fügen Sie ein TokenClientConfig-Objekt und einen initTokenClient()-Aufruf für konfigurieren Sie Ihre Webanwendung gemäß dem Beispiel unter Token initialisieren .

Ersetzen Sie Verweise auf den JavaScript-Client für Google Log-in durch Google Identitätsdienste:

Objekte:

gapi.auth2.AuthorizeConfig mit TokenClientConfig

Methoden:

gapi.auth2.init() mit google.accounts.oauth2.initTokenClient()

Parameter:

gapi.auth2.AuthorizeConfig.login_hint mit TokenClientConfig.login_hint.
gapi.auth2.GoogleUser.getHostedDomain() mit TokenClientConfig.hd.

Vorgang mit Autorisierungscode

Fügen Sie ein CodeClientConfig-Objekt und einen initCodeClient()-Aufruf zum Konfigurieren hinzu. Ihre Webanwendung entsprechend dem Beispiel unter Code-Client initialisieren aus.

Beim Wechsel vom impliziten zum Autorisierungscode-Vorgang:

Verweise auf den JavaScript-Client für Google Log-in entfernen

Objekte:

gapi.auth2.AuthorizeConfig

Methoden:

gapi.auth2.init()

Parameter:

gapi.auth2.AuthorizeConfig.login_hint
gapi.auth2.GoogleUser.getHostedDomain()

Tokenanfrage

Durch eine Nutzergeste, z. B. das Klicken auf eine Schaltfläche, wird eine Anfrage generiert, die eine Zugriffstoken wird direkt an den Browser des Nutzers mit der impliziten oder zu deiner Backend-Plattform, nachdem du einen Autorisierungscode pro Nutzer ausgetauscht hast um ein Zugriffstoken und ein Aktualisierungstoken abzurufen.

Impliziter Ablauf

Zugriffstokens können abgerufen und im Browser verwendet werden, während der Nutzer Sie sind angemeldet und haben eine aktive Google-Sitzung. Im impliziten Modus ist eine Geste erforderlich, um ein Zugriffstoken anzufordern, auch wenn zuvor ein

Ersetzen der Verweise auf den JavaScript-Client für Google Log-in durch Google Identitätsdienste:

Methoden:

gapi.auth2.authorize() mit TokenClient.requestAccessToken()
GoogleUser.reloadAuthResponse() mit TokenClient.requestAccessToken()

Fügen Sie einen Link oder eine Schaltfläche hinzu, um requestAccessToken() aufzurufen und den Vorgang zu starten. Pop-up-UX-Vorgang zum Anfordern eines Zugriffstokens oder zum Abrufen eines neuen Tokens, wenn der das vorhandene Token abläuft.

Aktualisieren Sie Ihre Codebasis auf:

Lösen Sie den OAuth 2.0-Token-Vorgang mit requestAccessToken() aus.
Unterstützen Sie die inkrementelle Autorisierung mit requestAccessToken und OverridableTokenClientConfig zum Trennen einer Anfrage für viele Bereiche in mehrere kleinere Anfragen aufzuteilen.
Fordern Sie ein neues Token an, wenn das vorhandene Token abläuft oder widerrufen wird.

Die Arbeit mit mehreren Bereichen erfordert möglicherweise strukturelle Änderungen an Ihrer Codebasis Zugriff auf Bereiche nur bei Bedarf und nicht auf einmal anzufordern, wird dies als inkrementelle Autorisierung bezeichnet. Jede Anfrage sollte Folgendes enthalten: möglichst wenige Bereiche und idealerweise nur einen Umfang. Weitere Informationen zum Umgang mit dem Nutzer Einwilligung erhalten Sie weitere Informationen zur Aktualisierung Ihrer App für inkrementelle Autorisierung.

Wenn ein Zugriffstoken abläuft, erhält das Modul gapi.auth2 automatisch ein neues, gültiges Zugriffstoken für Ihre Webanwendung. Zur Verbesserung der Nutzersicherheit Die automatische Tokenaktualisierung wird von Google Identity nicht unterstützt Dienstbibliothek. Ihre Web-App muss aktualisiert werden, um einen abgelaufenen Zugriff zu erkennen und fordern Sie ein neues an. Weitere Informationen finden Sie unten im Abschnitt „Umgang mit Tokens“.

Vorgang mit Autorisierungscode

Link oder Schaltfläche hinzufügen, um requestCode() aufzurufen und eine Autorisierung anzufordern Code von Google. Ein Beispiel finden Sie unter OAuth 2.0-Codefluss auslösen.

Weitere Informationen zum Umgang mit abgelaufenes oder widerrufenes Zugriffstoken.

Umgang mit Tokens

Fügen Sie die Fehlerbehandlung hinzu, um fehlgeschlagene Google API-Aufrufe zu erkennen, wenn ein ein widerrufenes Zugriffstoken verwendet wird und ein neues, gültiges Zugriffstoken angefordert wird.

Der HTTP-Statuscode 401 Unauthorized und die Fehlermeldung invalid_token lautet von Google APIs zurückgegeben, wenn ein abgelaufenes oder widerrufenes Zugriffstoken verwendet wird. Für eine Beispiel finden Sie unter Ungültige Tokenantwort.

Abgelaufene Tokens

Zugriffstokens sind kurzlebig und oft nur für wenige Minuten gültig.

Tokenwiderruf

Der Inhaber eines Google-Kontos kann eine zuvor erteilte Einwilligung jederzeit widerrufen. Tun vorhandene Zugriffstokens und Aktualisierungstokens ungültig werden. Der Widerruf kann ausgelöst von Ihrer Plattform mithilfe von revoke() oder Konto.

Ersetzen der Verweise auf den JavaScript-Client für Google Log-in durch Google Identitätsdienste:

Methoden:

getAuthInstance().disconnect() mit google.accounts.oauth2.revoke()
GoogleUser.disconnect() mit google.accounts.oauth2.revoke()

Rufen Sie revoke auf, wenn ein Nutzer sein Konto auf Ihrer Plattform löscht, oder möchte die Einwilligung zur Weitergabe von Daten an Ihre App widerrufen.

Aufforderung zur Nutzereinwilligung

Google zeigt dem Nutzer ein Dialog zur Einholung von Einwilligungen an, wenn entweder Ihre Web-App oder Ihr Backend fordert die Plattform ein Zugriffstoken an. Beispiel für Dialogfelder zur Einholung von Einwilligungen von Google an die Nutzer.

Bevor ein Zugriffstoken für Ihre App ausgegeben wird, muss ein bestehendes und aktives Google -Sitzung ist erforderlich, um die Einwilligung des Nutzers einzuholen und das Ergebnis aufzuzeichnen. Der Nutzer müssen sich möglicherweise in einem Google-Konto anmelden, wenn für eine bestehende Sitzung bereits etabliert ist.

Nutzer anmelden

Nutzer können in einem separaten Browsertab oder nativ in einem Google-Konto angemeldet sein. über einen Browser oder ein Betriebssystem. Wir empfehlen, Anmelden mit Google auf Ihre Website zugreift, um eine aktive Sitzung zwischen einem Google-Konto einzurichten. und den Browser beim ersten Öffnen Ihrer App. Dadurch erhalten Sie Vorteile:

Minimiert die Häufigkeit, mit der sich ein Nutzer anmelden und Zugriff anfordern muss Initiierung des Google-Konto-Anmeldevorgangs, wenn eine aktive Sitzung noch nicht vorhanden sind.
Verwenden Sie das Feld credential email des JWT-ID-Tokens als Wert von Der login_hint-Parameter in CodeClientConfig oder TokenClientConfig Objekte. Dies ist besonders hilfreich, wenn Ihre Plattform keine User-Konto-Verwaltungssystem.
Google-Konto mit einem vorhandenen lokalen Nutzerkonto auf suchen und verknüpfen und so die Anzahl doppelter Konten auf der Plattform möglichst gering zu halten.
Wenn ein neues lokales Konto erstellt wird, können Sie die Anmeldedialogfelder und den Anmeldevorgang nutzen. klar von Dialogfeldern und Abläufen zur Nutzerauthentifizierung getrennt sein, die Anzahl der erforderlichen Schritte und die Verbesserung der Abbruchrate.

Nach der Anmeldung und bevor ein Zugriffstoken ausgestellt wird, müssen Nutzer ihre Einwilligung geben für Ihre Anwendung für die angeforderten Bereiche.

Token und Einwilligungsantwort

Nach der Einwilligung wird ein Zugriffstoken mit einer Liste der genehmigten Bereiche zurückgegeben. oder vom Nutzer abgelehnt werden.

Detaillierte Berechtigungen ermöglichen es Nutzern, einzelne Bereiche zu genehmigen oder abzulehnen. Wann? fordert Zugriff auf mehrere Bereiche an, jeder Bereich wird gewährt oder abgelehnt unabhängig von den anderen Bereichen. Basierend auf der Auswahl des Nutzers, selektiv für Ihre App aktiviert Funktionen, die von einem individuellen Bereich abhängig sind.

Impliziter Ablauf

Ersetzen Sie Verweise auf den JavaScript-Client für Google Log-in durch Google Identitätsdienste:

Objekte:

gapi.auth2.AuthorizeResponse mit TokenClient.TokenResponse
gapi.auth2.AuthResponse mit TokenClient.TokenResponse

Methoden:

GoogleUser.hasGrantedScopes() mit google.accounts.oauth2.hasGrantedAllScopes()
GoogleUser.getGrantedScopes() mit google.accounts.oauth2.hasGrantedAllScopes()

Entfernen Sie Referenzen zum Google Log-in-JavaScript-Client:

Methoden:

GoogleUser.getAuthResponse()

Aktualisieren Sie Ihre Web-App mit hasGrantedAllScopes() und hasGrantedAnyScope() anhand dieses Beispiels für detaillierte Berechtigungen.

Vorgang mit Autorisierungscode

Aktualisieren oder fügen Sie einen Autorisierungscode-Endpunkt zu Ihrem Back-End hinzu. finden Sie unter Umgang mit Autorisierungscodes.

Aktualisieren Sie Ihre Plattform und folgen Sie den Schritten unter Code verwenden Modellanleitung zum Validieren der Anfrage, zum Abrufen eines Zugriffstokens und zum Aktualisieren Token.

Aktualisiere deine Plattform, um Funktionen und basierend auf den einzelnen Bereichen, die der Nutzer genehmigt hat, Folgen Sie der Anleitung für die inkrementelle Autorisierung und untersuchen Sie Zugriffsbereiche, die vom Nutzer gewährt wurden

Beispiele für implizite Abläufe

Traditionell

GAPI-Clientbibliothek

Beispiel der Google API-Clientbibliothek für JavaScript Ausführung im Browser mithilfe eines Pop-up-Dialogfelds zur Nutzereinwilligung.

Das Modul gapi.auth2 wird automatisch geladen und verwendet von gapi.client.init() und wird somit ausgeblendet.

<!DOCTYPE html>
  <html>
    <head>
      <script src="https://apis.google.com/js/api.js"></script>
      <script>
        function start() {
          gapi.client.init({
            'apiKey': 'YOUR_API_KEY',
            'clientId': 'YOUR_CLIENT_ID',
            'scope': 'https://www.googleapis.com/auth/cloud-translation',
            'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
          }).then(function() {
            // Execute an API request which is returned as a Promise.
            // The method name language.translations.list comes from the API discovery.
            return gapi.client.language.translations.list({
              q: 'hello world',
              source: 'en',
              target: 'de',
            });
          }).then(function(response) {
            console.log(response.result.data.translations[0].translatedText);
          }, function(reason) {
            console.log('Error: ' + reason.result.error.message);
          });
        };

        // Load the JavaScript client library and invoke start afterwards.
        gapi.load('client', start);
      </script>
    </head>
    <body>
      <div id="results"></div>
    </body>
  </html>

JS-Clientbibliothek

OAuth 2.0 für clientseitige Webanwendungen, die in einem Browser mit einer Pop-up-Dialogfeld zur Nutzereinwilligung.

Das Modul gapi.auth2 wird manuell geladen.

<!DOCTYPE html>
<html><head></head><body>
<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();

      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }

  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }

  function revokeAccess() {
    GoogleAuth.disconnect();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }

  function updateSigninStatus() {
    setSigninStatus();
  }
</script>

<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>

<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body></html>

OAuth 2.0-Endpunkte

OAuth 2.0 für clientseitige Webanwendungen, die im Browser ausgeführt werden um die Nutzereinwilligung einzuholen.

Dieses Beispiel zeigt direkte Aufrufe an die OAuth 2.0-Endpunkte von Google vom Browser des Nutzers und verwendet weder das gapi.auth2-Modul noch ein JavaScript Bibliothek.

<!DOCTYPE html>
<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>

Die neue Art

Nur GIS

In diesem Beispiel wird nur die JavaScript-Bibliothek des Google Identity Service gezeigt Tokenmodell und Pop-up-Dialogfeld zur Nutzereinwilligung verwenden Es ist um die Mindestanzahl der Schritte zu veranschaulichen, die für die Konfiguration eines -Client ein Zugriffstoken anfordern und abrufen und eine Google API aufrufen.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      var access_token;

      function initClient() {
        client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'https://www.googleapis.com/auth/calendar.readonly \
                  https://www.googleapis.com/auth/contacts.readonly',
          callback: (tokenResponse) => {
            access_token = tokenResponse.access_token;
          },
        });
      }
      function getToken() {
        client.requestAccessToken();
      }
      function revokeToken() {
        google.accounts.oauth2.revoke(access_token, () => {console.log('access token revoked')});
      }
      function loadCalendar() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
        xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
        xhr.send();
      }
    </script>
    <h1>Google Identity Services Authorization Token model</h1>
    <button onclick="getToken();">Get access token</button><br><br>
    <button onclick="loadCalendar();">Load Calendar</button><br><br>
    <button onclick="revokeToken();">Revoke token</button>
  </body>
</html>

GAPI async/await

In diesem Beispiel wird gezeigt, wie Sie die Google Identity Service-Bibliothek mithilfe der Tokenmodell, entfernen Sie das Modul gapi.auth2 und rufen Sie mit der Methode Google API-Clientbibliothek für JavaScript

Promises, async und await werden verwendet, um die Ladereihenfolge der Bibliothek zu erzwingen Autorisierungsfehler abfangen und wiederholen. Ein API-Aufruf wird erst ausgeführt, wenn ein gültiger ein Zugriffstoken verfügbar ist.

Die Nutzer müssen auf "Kalender anzeigen" klicken, Schaltfläche, wenn das Zugriffstoken fehlt beim ersten Laden der Seite oder später nach dem Zugriffstoken ist abgelaufen.

<!DOCTYPE html>
<html>
<head></head>
<body>
  <h1>GAPI with GIS async/await</h1>
  <button id="showEventsBtn" onclick="showEvents();">Show Calendar</button><br><br>
  <button id="revokeBtn" onclick="revokeToken();">Revoke access token</button>

  <script>

    const gapiLoadPromise = new Promise((resolve, reject) => {
      gapiLoadOkay = resolve;
      gapiLoadFail = reject;
    });
    const gisLoadPromise = new Promise((resolve, reject) => {
      gisLoadOkay = resolve;
      gisLoadFail = reject;
    });

    var tokenClient;

    (async () => {
      document.getElementById("showEventsBtn").style.visibility="hidden";
      document.getElementById("revokeBtn").style.visibility="hidden";

      // First, load and initialize the gapi.client
      await gapiLoadPromise;
      await new Promise((resolve, reject) => {
        // NOTE: the 'auth2' module is no longer loaded.
        gapi.load('client', {callback: resolve, onerror: reject});
      });
      await gapi.client.init({
        // NOTE: OAuth2 'scope' and 'client_id' parameters have moved to initTokenClient().
      })
      .then(function() {  // Load the Calendar API discovery document.
        gapi.client.load('https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest');
      });

      // Now load the GIS client
      await gisLoadPromise;
      await new Promise((resolve, reject) => {
        try {
          tokenClient = google.accounts.oauth2.initTokenClient({
              client_id: 'YOUR_CLIENT_ID',
              scope: 'https://www.googleapis.com/auth/calendar.readonly',
              prompt: 'consent',
              callback: '',  // defined at request time in await/promise scope.
          });
          resolve();
        } catch (err) {
          reject(err);
        }
      });

      document.getElementById("showEventsBtn").style.visibility="visible";
      document.getElementById("revokeBtn").style.visibility="visible";
    })();

    async function getToken(err) {

      if (err.result.error.code == 401 || (err.result.error.code == 403) &&
          (err.result.error.status == "PERMISSION_DENIED")) {

        // The access token is missing, invalid, or expired, prompt for user consent to obtain one.
        await new Promise((resolve, reject) => {
          try {
            // Settle this promise in the response callback for requestAccessToken()
            tokenClient.callback = (resp) => {
              if (resp.error !== undefined) {
                reject(resp);
              }
              // GIS has automatically updated gapi.client with the newly issued access token.
              console.log('gapi.client access token: ' + JSON.stringify(gapi.client.getToken()));
              resolve(resp);
            };
            tokenClient.requestAccessToken();
          } catch (err) {
            console.log(err)
          }
        });
      } else {
        // Errors unrelated to authorization: server errors, exceeding quota, bad requests, and so on.
        throw new Error(err);
      }
    }

    function showEvents() {

      // Try to fetch a list of Calendar events. If a valid access token is needed,
      // prompt to obtain one and then retry the original request.
      gapi.client.calendar.events.list({ 'calendarId': 'primary' })
      .then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
      .catch(err  => getToken(err))  // for authorization errors obtain an access token
      .then(retry => gapi.client.calendar.events.list({ 'calendarId': 'primary' }))
      .then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
      .catch(err  => console.log(err)); // cancelled by user, timeout, etc.
    }

    function revokeToken() {
      let cred = gapi.client.getToken();
      if (cred !== null) {
        google.accounts.oauth2.revoke(cred.access_token, () => {console.log('Revoked: ' + cred.access_token)});
        gapi.client.setToken('');
      }
    }

  </script>

  <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoadOkay()" onerror="gapiLoadFail(event)"></script>
  <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoadOkay()" onerror="gisLoadFail(event)"></script>

</body>
</html>

GAPI-Callback

Variablen werden verwendet, um die Ladereihenfolge der Bibliothek zu erzwingen. GAPI-Aufrufe erfolgen nach Rückgabe eines gültigen Zugriffstokens aus dem Callback.

Die Nutzer sollen beim ersten Öffnen der Seite auf die Schaltfläche „Kalender anzeigen“ klicken. wenn er seine Kalenderdaten aktualisieren möchte.

<!DOCTYPE html>
<html>
<head>
  <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoad()"></script>
  <script async defer src="https://accounts.google.com/gsi/client" onload="gisInit()"></script>
</head>
<body>
  <h1>GAPI with GIS callbacks</h1>
  <button id="showEventsBtn" onclick="showEvents();">Show Calendar</button><br><br>
  <button id="revokeBtn" onclick="revokeToken();">Revoke access token</button>
  <script>
    let tokenClient;
    let gapiInited;
    let gisInited;

    document.getElementById("showEventsBtn").style.visibility="hidden";
    document.getElementById("revokeBtn").style.visibility="hidden";

    function checkBeforeStart() {
       if (gapiInited && gisInited){
          // Start only when both gapi and gis are initialized.
          document.getElementById("showEventsBtn").style.visibility="visible";
          document.getElementById("revokeBtn").style.visibility="visible";
       }
    }

    function gapiInit() {
      gapi.client.init({
        // NOTE: OAuth2 'scope' and 'client_id' parameters have moved to initTokenClient().
      })
      .then(function() {  // Load the Calendar API discovery document.
        gapi.client.load('https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest');
        gapiInited = true;
        checkBeforeStart();
      });
    }

    function gapiLoad() {
        gapi.load('client', gapiInit)
    }

    function gisInit() {
     tokenClient = google.accounts.oauth2.initTokenClient({
                client_id: 'YOUR_CLIENT_ID',
                scope: 'https://www.googleapis.com/auth/calendar.readonly',
                callback: '',  // defined at request time
            });
      gisInited = true;
      checkBeforeStart();
    }

    function showEvents() {

      tokenClient.callback = (resp) => {
        if (resp.error !== undefined) {
          throw(resp);
        }
        // GIS has automatically updated gapi.client with the newly issued access token.
        console.log('gapi.client access token: ' + JSON.stringify(gapi.client.getToken()));

        gapi.client.calendar.events.list({ 'calendarId': 'primary' })
        .then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
        .catch(err => console.log(err));

        document.getElementById("showEventsBtn").innerText = "Refresh Calendar";
      }

      // Conditionally ask users to select the Google Account they'd like to use,
      // and explicitly obtain their consent to fetch their Calendar.
      // NOTE: To request an access token a user gesture is necessary.
      if (gapi.client.getToken() === null) {
        // Prompt the user to select a Google Account and asked for consent to share their data
        // when establishing a new session.
        tokenClient.requestAccessToken({prompt: 'consent'});
      } else {
        // Skip display of account chooser and consent dialog for an existing session.
        tokenClient.requestAccessToken({prompt: ''});
      }
    }

    function revokeToken() {
      let cred = gapi.client.getToken();
      if (cred !== null) {
        google.accounts.oauth2.revoke(cred.access_token, () => {console.log('Revoked: ' + cred.access_token)});
        gapi.client.setToken('');
        document.getElementById("showEventsBtn").innerText = "Show Calendar";
      }
    }
  </script>
</body>
</html>

Beispiele für den Autorisierungscode-Vorgang

Im Pop-up-Fenster der Google Identity Service-Bibliothek kann entweder eine URL-Weiterleitung zu gibt einen Autorisierungscode direkt an den Endpunkt Ihres Back-End-Tokens zurück. Im Browser des Nutzers ausgeführter JavaScript-Callback-Handler, der den Proxy des auf Ihre Plattform antworten. In beiden Fällen wird Ihre Back-End-Plattform OAuth 2.0-Vorgang ausführen, um ein gültiges Aktualisierungs- und Zugriffstoken zu erhalten.

Traditionell

Serverseitige Web-Apps

Google Log-in für serverseitige Apps, die auf der Back-End-Plattform ausgeführt werden Weiterleitung der Nutzereinwilligung zu Google erfolgen.

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
    <script>
      function start() {
        gapi.load('auth2', function() {
          auth2 = gapi.auth2.init({
            client_id: 'YOUR_CLIENT_ID',
            api_key: 'YOUR_API_KEY',
            discovery_docs: ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
            // Scopes to request in addition to 'profile' and 'email'
            scope: 'https://www.googleapis.com/auth/cloud-translation',
          });
        });
      }
      function signInCallback(authResult) {
        if (authResult['code']) {
          console.log("sending AJAX request");
          // Send authorization code obtained from Google to backend platform
          $.ajax({
            type: 'POST',
            url: 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URL',
            // Always include an X-Requested-With header to protect against CSRF attacks.
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            },
            contentType: 'application/octet-stream; charset=utf-8',
            success: function(result) {
              console.log(result);
            },
            processData: false,
            data: authResult['code']
          });
        } else {
          console.log('error: failed to obtain authorization code')
        }
      }
    </script>
  </head>
  <body>
    <button id="signinButton">Sign In With Google</button>
    <script>
      $('#signinButton').click(function() {
        // Obtain an authorization code from Google
        auth2.grantOfflineAccess().then(signInCallback);
      });
    </script>
  </body>
</html>

HTTP/REST mit Weiterleitung

Autorisierungscode mit OAuth 2.0 für Webserveranwendungen senden vom Browser des Nutzers zu Ihrer Backend-Plattform übertragen. Die Nutzereinwilligung wird verarbeitet durch um den Browser des Nutzers an Google weiterzuleiten.

/\*
 \* 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 &lt;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_AUTHORIZATION_CODE_ENDPOINT_URL',
                '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();
}

Die neue Art

In diesem Beispiel wird nur die JavaScript-Bibliothek des Google Identity Service gezeigt Über das Autorisierungscode-Modell ein Pop-up-Dialogfeld für die Nutzereinwilligung -Callback-Handler zum Empfang des Autorisierungscodes von Google verwendet werden. Es ist um die Mindestanzahl der Schritte zu veranschaulichen, die für die Konfiguration eines holen Sie die Zustimmung ein und senden Sie einen Autorisierungscode an Ihr Backend. Plattform.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      function initClient() {
        client = google.accounts.oauth2.initCodeClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'https://www.googleapis.com/auth/calendar.readonly',
          ux_mode: 'popup',
          callback: (response) => {
            var code_receiver_uri = 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URI',
            // Send auth code to your backend platform
            const xhr = new XMLHttpRequest();
            xhr.open('POST', code_receiver_uri, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.onload = function() {
              console.log('Signed in as: ' + xhr.responseText);
            };
            xhr.send('code=' + response.code);
            // After receipt, the code is exchanged for an access token and
            // refresh token, and the platform then updates this web app
            // running in user's browser with the requested calendar info.
          },
        });
      }
      function getAuthCode() {
        // Request authorization code and obtain user consent
        client.requestCode();
      }
    </script>
    <button onclick="getAuthCode();">Load Your Calendar</button>
  </body>
</html>

UX für GIS-Weiterleitung

Das Autorisierungscode-Modell unterstützt die Pop-up- und Weiterleitungs-UX-Modi zu Senden Sie einen Autorisierungscode pro Nutzer an den von Ihrer Plattform gehosteten Endpunkt. Der UX-Weiterleitungsmodus wird hier gezeigt:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      function initClient() {
        client = google.accounts.oauth2.initCodeClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'https://www.googleapis.com/auth/calendar.readonly \
                  https://www.googleapis.com/auth/photoslibrary.readonly',
          ux_mode: 'redirect',
          redirect_uri: 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URI'
        });
      }
      // Request an access token
      function getAuthCode() {
        // Request authorization code and obtain user consent
        client.requestCode();
      }
    </script>
    <button onclick="getAuthCode();">Load Your Calendar</button>
  </body>
</html>

JavaScript-Bibliotheken

Google Identity Services ist eine einzelne JavaScript-Bibliothek, die für Nutzer Authentifizierung und Autorisierung, die Funktionen und -Funktionen, die in verschiedenen Bibliotheken und Modulen enthalten sind:

Maßnahmen bei der Migration zu Identity Services:

Vorhandene JS-Bibliothek	Neue JS-Bibliothek	Hinweise
`apis.google.com/js/api.js`	`accounts.google.com/gsi/client`	Fügen Sie eine neue Bibliothek hinzu und folgen Sie dem impliziten Vorgang.
`apis.google.com/js/client.js`	`accounts.google.com/gsi/client`	Fügen Sie eine neue Bibliothek und den Autorisierungscode-Vorgang hinzu.

Kurzanleitung für die Mediathek

Objekt- und Methodenvergleich zwischen dem alten Google Log-in-JavaScript Client- und die Bibliothek New Google Identity Services sowie Hinweise mit zusätzlichen Informationen und Maßnahmen, die während der Migration ausgeführt werden sollen.

Alt	Neu	Hinweise
GoogleAuth -Objekt und zugehörige Methoden:
GoogleAuth.attachClickHandler()		Entfernen
GoogleAuth.currentUser.get()		Entfernen
GoogleAuth.currentUser.listen()		Entfernen
GoogleAuth.disconnect()	google.accounts.oauth2.revoke	Altes durch neue ersetzen. Der Widerruf kann auch über https://myaccount.google.com/permissions erfolgen.
GoogleAuth.grantOfflineAccess()		Entfernen Sie den Autorisierungscode und folgen Sie der Anleitung.
GoogleAuth.isSignedIn.get()		Entfernen
GoogleAuth.isSignedIn.listen()		Entfernen
GoogleAuth.signIn()		Entfernen
GoogleAuth.signOut()		Entfernen
GoogleAuth.then()		Entfernen
GoogleUser -Objekt und die zugehörigen Methoden:
GoogleUser.disconnect()	google.accounts.id.revoke	Altes durch neue ersetzen. Der Widerruf kann auch über https://myaccount.google.com/permissions erfolgen.
GoogleUser.getAuthResponse()	requestCode() or requestAccessToken()	Altes durch neue ersetzen
GoogleUser.getBasicProfile()		Entfernen. Verwenden Sie stattdessen ein ID-Token. Weitere Informationen finden Sie im Hilfeartikel Von Google Log-in migrieren.
GoogleUser.getGrantedScopes()	hasGrantedAnyScope()	Altes durch neue ersetzen
GoogleUser.getHostedDomain()		Entfernen
GoogleUser.getId()		Entfernen
GoogleUser.grantOfflineAccess()		Entfernen Sie den Autorisierungscode und folgen Sie der Anleitung.
GoogleUser.grant()		Entfernen
GoogleUser.hasGrantedScopes()	hasGrantedAnyScope()	Altes durch neue ersetzen
GoogleUser.isSignedIn()		Entfernen
GoogleUser.reloadAuthResponse()	requestAccessToken()	Entfernen Sie altes oder neues Zugriffstoken, um abgelaufene oder widerrufene Zugriffstokens zu ersetzen.
gapi.auth2 -Objekt und zugehörige Methoden:
Objekt „gapi.auth2.AuthorizeConfig“	TokenClientConfig oder CodeClientConfig	Altes durch neue ersetzen
Objekt „gapi.auth2.AuthorizeResponse“		Entfernen
Objekt „gapi.auth2.AuthResponse“		Entfernen
gapi.auth2.authorize()	requestCode() or requestAccessToken()	Altes durch neue ersetzen
gapi.auth2.ClientConfig()	TokenClientConfig oder CodeClientConfig	Altes durch neue ersetzen
gapi.auth2.getAuthInstance()		Entfernen
gapi.auth2.init()	initTokenClient() or initCodeClient()	Altes durch neue ersetzen
Objekt „gapi.auth2.OfflineAccessOptions“		Entfernen
Objekt „gapi.auth2.SignInOptions“		Entfernen
gapi.signin2 -Objekt und zugehörige Methoden:
gapi.signin2.render()		Entfernen. HTML-DOM-Ladevorgang des g_id_signin oder JS-Aufruf an google.accounts.id.renderButton Löst die Nutzeranmeldung in einem Google-Konto aus.

Beispielanmeldedaten

Vorhandene Anmeldedaten

Bibliothek der Google Log-in-Plattform, Google API-Clientbibliothek für JavaScript oder direkte Aufrufe an Google Auth 2.0-Endpunkte zurückgeben ein OAuth 2.0-Zugriffstoken und ein OpenID Connect-ID-Token Antwort.

Beispielantwort, die sowohl access_token als auch id_token enthält:

  {
    "token_type": "Bearer",
    "access_token": "ya29.A0ARrdaM-SmArZaCIh68qXsZSzyeU-8mxhQERHrP2EXtxpUuZ-3oW8IW7a6D2J6lRnZrRj8S6-ZcIl5XVEqnqxq5fuMeDDH_6MZgQ5dgP7moY-yTiKR5kdPm-LkuPM-mOtUsylWPd1wpRmvw_AGOZ1UUCa6UD5Hg",
    "scope": "https://www.googleapis.com/auth/calendar.readonly",
    "login_hint": "AJDLj6I2d1RH77cgpe__DdEree1zxHjZJr4Q7yOisoumTZUmo5W2ZmVFHyAomUYzLkrluG-hqt4RnNxrPhArd5y6p8kzO0t8xIfMAe6yhztt6v2E-_Bb4Ec3GLFKikHSXNh5bI-gPrsI",
    "expires_in": 3599,
    "id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjkzNDFhYmM0MDkyYjZmYzAzOGU0MDNjOTEwMjJkZDNlNDQ1MzliNTYiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJhY2NvdW50cy5nb29nbGUuY29tIiwiYXpwIjoiNTM4MzQ0NjUzMjU1LTc1OGM1aDVpc2M0NXZnazI3ZDhoOGRlYWJvdnBnNnRvLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwiYXVkIjoiNTM4MzQ0NjUzMjU1LTc1OGM1aDVpc2M0NXZnazI3ZDhoOGRlYWJvdnBnNnRvLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwic3ViIjoiMTE3NzI2NDMxNjUxOTQzNjk4NjAwIiwiaGQiOiJnb29nbGUuY29tIiwiZW1haWwiOiJkYWJyaWFuQGdvb2dsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiYXRfaGFzaCI6IkJBSW55TjN2MS1ZejNLQnJUMVo0ckEiLCJuYW1lIjoiQnJpYW4gRGF1Z2hlcnR5IiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hLS9BT2gxNEdnenAyTXNGRGZvbVdMX3VDemRYUWNzeVM3ZGtxTE5ybk90S0QzVXNRPXM5Ni1jIiwiZ2l2ZW5fbmFtZSI6IkJyaWFuIiwiZmFtaWx5X25hbWUiOiJEYXVnaGVydHkiLCJsb2NhbGUiOiJlbiIsImlhdCI6MTYzODk5MTYzOCwiZXhwIjoxNjM4OTk1MjM4LCJqdGkiOiI5YmRkZjE1YWFiNzE2ZDhjYmJmNDYwMmM1YWM3YzViN2VhMDQ5OTA5In0.K3EA-3Adw5HA7O8nJVCsX1HmGWxWzYk3P7ViVBb4H4BoT2-HIgxKlx1mi6jSxIUJGEekjw9MC-nL1B9Asgv1vXTMgoGaNna0UoEHYitySI23E5jaMkExkTSLtxI-ih2tJrA2ggfA9Ekj-JFiMc6MuJnwcfBTlsYWRcZOYVw3QpdTZ_VYfhUu-yERAElZCjaAyEXLtVQegRe-ymScra3r9S92TA33ylMb3WDTlfmDpWL0CDdDzby2asXYpl6GQ7SdSj64s49Yw6mdGELZn5WoJqG7Zr2KwIGXJuSxEo-wGbzxNK-mKAiABcFpYP4KHPEUgYyz3n9Vqn2Tfrgp-g65BQ",
    "session_state": {
      "extraQueryParams": {
        "authuser": "0"
      }
    },
    "first_issued_at": 1638991637982,
    "expires_at": 1638995236982,
    "idpId": "google"
  }

Anmeldedaten für Google Identity Services

Die Google Identity Services-Bibliothek gibt Folgendes zurück:

Entweder ein Zugriffstoken, das für die Autorisierung verwendet wird:

{
  "access_token": "ya29.A0ARrdaM_LWSO-uckLj7IJVNSfnUityT0Xj-UCCrGxFQdxmLiWuAosnAKMVQ2Z0LLqeZdeJii3TgULp6hR_PJxnInBOl8UoUwWoqsrGQ7-swxgy97E8_hnzfhrOWyQBmH6zs0_sUCzwzhEr_FAVqf92sZZHphr0g",
  "token_type": "Bearer",
  "expires_in": 3599,
  "scope": "https://www.googleapis.com/auth/calendar.readonly"
}

oder ein ID-Token für die Authentifizierung:

{
  "clientId": "538344653255-758c5h5isc45vgk27d8h8deabovpg6to.apps.googleusercontent.com",
  "credential": "eyJhbGciOiJSUzI1NiIsImtpZCI6ImMxODkyZWI0OWQ3ZWY5YWRmOGIyZTE0YzA1Y2EwZDAzMjcxNGEyMzciLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJuYmYiOjE2MzkxNTcyNjQsImF1ZCI6IjUzODM0NDY1MzI1NS03NThjNWg1aXNjNDV2Z2syN2Q4aDhkZWFib3ZwZzZ0by5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbSIsInN1YiI6IjExNzcyNjQzMTY1MTk0MzY5ODYwMCIsIm5vbmNlIjoiZm9vYmFyIiwiaGQiOiJnb29nbGUuY29tIiwiZW1haWwiOiJkYWJyaWFuQGdvb2dsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiYXpwIjoiNTM4MzQ0NjUzMjU1LTc1OGM1aDVpc2M0NXZnazI3ZDhoOGRlYWJvdnBnNnRvLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwibmFtZSI6IkJyaWFuIERhdWdoZXJ0eSIsInBpY3R1cmUiOiJodHRwczovL2xoMy5nb29nbGV1c2VyY29udGVudC5jb20vYS0vQU9oMTRHZ3pwMk1zRkRmb21XTF91Q3pkWFFjc3lTN2RrcUxOcm5PdEtEM1VzUT1zOTYtYyIsImdpdmVuX25hbWUiOiJCcmlhbiIsImZhbWlseV9uYW1lIjoiRGF1Z2hlcnR5IiwiaWF0IjoxNjM5MTU3NTY0LCJleHAiOjE2MzkxNjExNjQsImp0aSI6IjRiOTVkYjAyZjU4NDczMmUxZGJkOTY2NWJiMWYzY2VhYzgyMmI0NjUifQ.Cr-AgMsLFeLurnqyGpw0hSomjOCU4S3cU669Hyi4VsbqnAV11zc_z73o6ahe9Nqc26kPVCNRGSqYrDZPfRyTnV6g1PIgc4Zvl-JBuy6O9HhClAK1HhMwh1FpgeYwXqrng1tifmuotuLQnZAiQJM73Gl-J_6s86Buo_1AIx5YAKCucYDUYYdXBIHLxrbALsA5W6pZCqqkMbqpTWteix-G5Q5T8LNsfqIu_uMBUGceqZWFJALhS9ieaDqoxhIqpx_89QAr1YlGu_UO6R6FYl0wDT-nzjyeF5tonSs3FHN0iNIiR3AMOHZu7KUwZaUdHg4eYkU-sQ01QNY_11keHROCRQ",
  "select_by": "user"
}

Ungültige Tokenantwort

Beispielantwort von Google beim Versuch, eine API-Anfrage mit einem abgelaufenes, widerrufenes oder ungültiges Zugriffstoken:

HTTP-Antwortheader

  www-authenticate: Bearer realm="https://accounts.google.com/", error="invalid_token"

Antworttext

  {
    "error": {
      "code": 401,
      "message": "Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.",
      "errors": [
        {
          "message": "Invalid Credentials",
          "domain": "global",
          "reason": "authError",
          "location": "Authorization",
          "locationType": "header"
        }
      ],
      "status": "UNAUTHENTICATED"
    }
  }

Zu Google Identity Services migrieren

Übersicht

Autorisierungsablauf identifizieren

Autorisierungsvorgang auswählen

Impliziter Ablauf

Vorgang mit Autorisierungscode

Änderungen an der browserinternen Webanwendung

Betroffenen Code und Tests identifizieren

Bibliotheken und Module

Kekse

Anmeldedaten

Impliziter Ablauf

Vorgang mit Autorisierungscode

Sitzungsstatus

Clientkonfiguration

Impliziter Ablauf

Vorgang mit Autorisierungscode

Tokenanfrage

Impliziter Ablauf

Vorgang mit Autorisierungscode

Umgang mit Tokens

Abgelaufene Tokens

Tokenwiderruf

Aufforderung zur Nutzereinwilligung

Nutzer anmelden

Token und Einwilligungsantwort

Impliziter Ablauf

Vorgang mit Autorisierungscode

Beispiele für implizite Abläufe

Traditionell

GAPI-Clientbibliothek

JS-Clientbibliothek

OAuth 2.0-Endpunkte

Die neue Art

Nur GIS

GAPI async/await

GAPI-Callback

Beispiele für den Autorisierungscode-Vorgang

Traditionell

Serverseitige Web-Apps

HTTP/REST mit Weiterleitung

Die neue Art

UX für GIS-Pop-up

UX für GIS-Weiterleitung

JavaScript-Bibliotheken

Kurzanleitung für die Mediathek

Beispielanmeldedaten

Vorhandene Anmeldedaten

Anmeldedaten für Google Identity Services

Ungültige Tokenantwort