Warnung: Diese Daten werden gemäß der Google-Richtlinie für Nutzerdaten bereitgestellt. Bitte lesen und befolgen Sie die Richtlinie. Andernfalls kann dies zur Sperrung des Projekts oder des Kontos führen.

Zu Google Identity Services migrieren

Übersicht

Zum Abrufen eines Zugriffstokens pro Nutzer für den Aufruf von Google APIs bietet Google mehrere JavaScript-Bibliotheken:

In dieser Anleitung wird beschrieben, wie Sie von diesen Bibliotheken in die Google Identity Services-Bibliothek migrieren.

So gehen Sie vor, wenn Sie

  • Ersetzen Sie die eingestellte Platform Library durch die Identity Services-Bibliothek.
  • Entfernen Sie bei Verwendung der API-Clientbibliothek das eingestellte gapi.auth2-Modul, seine Methoden und Objekte und ersetzen Sie es durch Identity Services-Äquivalente.

Eine Beschreibung der Änderungen mit der JavaScript-Bibliothek „Identity Services“ finden Sie in der Übersicht und in der Funktionsweise der Nutzerautorisierung. Dort finden Sie wichtige Begriffe und Konzepte.

Wenn du nach einer Authentifizierung für die Nutzerregistrierung und -anmeldung suchst, findest du hier weitere Informationen unter Migration von Google Log-in.

Autorisierungsvorgang identifizieren

Es gibt zwei mögliche Abläufe für die Nutzerautorisierung: impliziter und Autorisierungscode.

Überprüfe deine Webanwendung, um die Art des aktuell verwendeten Autorisierungsvorgangs zu ermitteln.

Hinweise für Ihre Web-App, die den impliziten Vorgang verwendet:

  • Ihre Webanwendung basiert ausschließlich auf einem Browser und hat keine Back-End-Plattform.
  • Der Nutzer muss anwesend sein, um Google APIs aufzurufen. Ihre Anwendung verwendet nur Zugriffstokens und keine Aktualisierungstokens.
  • Ihre Webanwendung lädt apis.google.com/js/api.js.
  • Deine Implementierung basiert auf OAuth 2.0 für clientseitige Webanwendungen.
  • Ihre Anwendung verwendet entweder die Module gapi.client oder gapi.auth2, die in der Google API-Clientbibliothek für JavaScript gefunden wurden.

Hinweise für deine Web-App, die den Vorgang mit Autorisierungscode verwendet:

  • Ihre Implementierung basiert auf:

  • Deine App wird sowohl im Browser des Nutzers als auch auf der Back-End-Plattform ausgeführt.

  • Ihre Back-End-Plattform hostet einen Autorisierungscode-Endpunkt.

  • Deine Back-End-Plattform ruft Google APIs im Namen von Nutzern auf, ohne dass sie vorhanden sein müssen. Dies wird als Offlinemodus bezeichnet.

  • Aktualisierungstokens werden von Ihrer Back-End-Plattform verwaltet und gespeichert.

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

Autorisierungsablauf auswählen

Bevor Sie mit der Migration beginnen, müssen Sie ermitteln, ob Sie mit dem vorhandenen Ablauf fortfahren oder einen anderen Ablauf übernehmen.

Lesen Sie den Artikel zur Auswahl eines Autorisierungsvorgangs, um die wichtigsten Unterschiede und Kompromisse zwischen den beiden Abläufen zu verstehen.

In den meisten Fällen wird der Autorisierungscode empfohlen, da er die höchste Nutzersicherheit bietet. Außerdem kann deine Plattform ganz einfach neue Offlinefunktionen hinzufügen, z. B. Aktualisierungen abrufen, um Nutzer über wichtige Änderungen an ihrem Kalender, ihren Fotos, Abos usw. zu informieren.

Wählen Sie mit den Auswahlelementen unten einen Autorisierungsablauf aus.

Impliziter Ablauf

Fordert ein Zugriffstoken zur Verwendung im Browser an, während der Nutzer vorhanden ist.

Beispiele für implizite Vorgänge zeigen Webanwendungen vor und nach der Migration zu Identity Services.

Ablauf des Autorisierungscodes

Ein von Google bereitgestellter Autorisierungscode wird an Ihre Back-End-Plattform gesendet. Dort wird er gegen ein Zugriffstoken und ein Aktualisierungstoken eingetauscht.

Beispiele für den Autorisierungscode zeigen Webanwendungen vor und nach der Migration zu Identity Services.

In dieser Anleitung werden die Schritte zum Hinzufügen, Entfernen, Aktualisieren oder Ersetzen vorhandener Funktionen in Fettschrift angewendet.

Änderungen an Ihrer Webbrowser-App

In diesem Abschnitt werden die Änderungen überprüft, die Sie an der Webanwendung im Browser vornehmen, wenn Sie zur JavaScript-Bibliothek von Google Identity Services migrieren.

Betroffenen Code identifizieren und Tests durchführen

Mit einem Debug-Cookie können Sie den betroffenen Code finden und das Verhalten nach der Einstellung testen.

In großen oder komplexen Apps kann es schwierig sein, den gesamten Code zu finden, der von der Einstellung des Moduls gapi.auth2 betroffen ist. Wenn du die vorhandene Nutzung von Funktionen, die bald eingestellt werden sollen, in der Konsole protokollieren möchtest, setze den Wert des Cookies G_AUTH2_MIGRATION auf informational. Fügen Sie optional einen Doppelpunkt gefolgt von einem Schlüssel/Wert-Paar hinzu, um auch im Sitzungsspeicher zu protokollieren. Nach der Anmeldung und dem Empfang der Anmeldedaten werden erfasste Logs zur späteren Analyse an ein Back-End gesendet. Beispielsweise speichert informational:showauth2use den Ursprungs- und die URL in einem Sitzungsschlüssel für die Sitzung mit dem Namen showauth2use.

Wenn du das Anwendungsverhalten prüfen möchtest, wenn das gapi.auth2-Modul nicht mehr geladen ist, setze den Wert des Cookies G_AUTH2_MIGRATION auf enforced. So können Sie das Verhalten nach der Einstellung vor dem Umsetzungsdatum testen.

Mögliche G_AUTH2_MIGRATION-Cookie-Werte:

  • enforced Laden Sie das Modul gapi.auth2 nicht.
  • informational Protokolliert veraltete Funktionen in der JS-Konsole. Auch im Logspeicher speichern, wenn ein optionaler Schlüsselname festgelegt ist: informational:key-name.

Es empfiehlt sich, dieses Cookie während der Entwicklung und des Tests lokal zu speichern, bevor Sie es in Produktionsumgebungen verwenden. So minimieren Sie die Auswirkungen auf die Nutzer.

Bibliotheken und Module

Das gapi.auth2-Modul verwaltet die Nutzerauthentifizierung für die Anmeldung und den impliziten Vorgang für die Autorisierung, ersetzt dieses verworfene Modul und die zugehörigen Objekte und Methoden mit der Google Identity Services-Bibliothek.

Fügen Sie die Identity Services-Bibliothek Ihrer Webanwendung hinzu. Fügen Sie sie dazu Ihrem Dokument hinzu:

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

Entfernen Sie alle Instanzen des Ladens des auth2-Moduls mit gapi.load('auth2', function).

Die Bibliothek „Google Identity Services“ ersetzt die Nutzung des Moduls „gapi.auth2“. Du kannst das gapi.client-Modul weiterhin ohne Probleme aus der Google API-Clientbibliothek für JavaScript verwenden und die automatische Erstellung aufrufbarer JS-Methoden aus einem Discovery-Dokument, mehrere Batch-Aufrufe und CORS-Verwaltungsfunktionen nutzen.

Cookies

Für die Nutzerautorisierung sind keine Cookies erforderlich.

Weitere Informationen zur Verwendung von Cookies durch die Nutzerauthentifizierung finden Sie unter Migration von Google Log-in und unter Verwendung von Cookies durch Google in anderen Google-Produkten und -Diensten.

Anmeldedaten

Bei Google Identity Services werden die Nutzerauthentifizierung und -autorisierung in zwei verschiedene Vorgänge unterteilt. Nutzeranmeldedaten werden separat ausgeführt: Das ID-Token, mit dem ein Nutzer identifiziert wird, wird getrennt vom Zugriffstoken zurückgegeben, das für die Autorisierung verwendet wird.

Informationen zum Anzeigen dieser Änderungen finden Sie unter Beispielanmeldedaten.

Impliziter Ablauf

Trennen Sie die Nutzerauthentifizierung und -autorisierung, indem Sie die Nutzerprofilverarbeitung aus Autorisierungsabläufen entfernen.

Entfernen Sie die JavaScript-Client-Referenzen für Google Log-in:

Methoden

  • GoogleUser.getBasicProfile()
  • GoogleUser.getId()

Ablauf des Autorisierungscodes

Identity Services trennt die Anmeldedaten im Browser in das ID- und Zugriffstoken. Diese Änderung gilt nicht für Anmeldedaten, die über direkte Aufrufe von Google OAuth 2.0-Endpunkten von Ihrer Back-End-Plattform oder über Bibliotheken auf einem sicheren Server auf der Plattform wie dem Node.js-Client von Google APIs abgerufen werden.

Sitzungsstatus

Früher hat dir Google Log-in dabei geholfen, den Anmeldestatus von Nutzern zu verwalten:

Du bist für die Verwaltung des Anmeldestatus und der Nutzersitzungen in deiner Webanwendung verantwortlich.

Entfernen Sie die JavaScript-Client-Referenzen für Google Log-in:

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 die Webanwendung, um einen Token-Client für den impliziten Vorgang oder den Autorisierungscode zu initialisieren.

Entfernen Sie die JavaScript-Client-Referenzen für Google Log-in:

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 hinzu, um Ihre Webanwendung zu konfigurieren. Folgen Sie dazu dem Beispiel im Abschnitt Token-Client initialisieren.

Ersetzen Google Log-in-JavaScript-Client-Referenzen durch Google Identity-Dienste:

Objekte:

  • gapi.auth2.AuthorizeConfig mit TokenClientConfig

Methoden:

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

Parameter:

  • gapi.auth2.AuthorizeConfig.login_hint mit TokenClientConfig.hint.
  • gapi.auth2.GoogleUser.getHostedDomain() mit TokenClientConfig.hosted_domain.

Ablauf des Autorisierungscodes

Füge ein CodeClientConfig-Objekt und einen initCodeClient()-Aufruf hinzu, um deine Webanwendung zu konfigurieren. Folge dazu dem Beispiel im Abschnitt Code-Client initialisieren.

Beim Wechsel vom impliziten zum Autorisierungscode-Ablauf:

Entfernen JavaScript-Client-Referenzen für Google Log-in

Objekte:

  • gapi.auth2.AuthorizeConfig

Methoden:

  • gapi.auth2.init()

Parameter:

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

Tokenanfrage

Eine Nutzerbewegung (z. B. ein Klick auf eine Schaltfläche) generiert eine Anfrage, die dazu führt, dass ein Zugriffstoken direkt mit dem impliziten Vorgang an den Browser des Nutzers oder nach dem Austausch eines Autorisierungscodes pro Nutzer gegen ein Zugriffstoken und Aktualisierungstoken an den Back-End-Plattform zurückgegeben wird.

Impliziter Ablauf

Zugriffstokens können im Browser abgerufen und verwendet werden, während der Nutzer angemeldet ist und eine aktive Sitzung mit Google hat. Im impliziten Modus ist eine Nutzergeste erforderlich, um ein Zugriffstoken anzufordern, auch wenn es zuvor eine Anfrage gab.

Ersetzen Google Log-in-JavaScript-Client-Referenzen: durch Google Identity-Dienste:

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 UX-Pop-up-Vorgang einzuleiten, um ein Zugriffstoken anzufordern. Sie können aber auch ein neues Token abrufen, wenn das vorhandene Token abläuft.

Aktualisieren Sie Ihre Codebasis auf:

  • Lösen Sie den OAuth 2.0-Tokenablauf mit requestAccessToken() aus.
  • Unterstützen Sie die inkrementelle Autorisierung, indem Sie mit requestAccessToken und OverridableTokenClientConfig eine Anfrage für viele Umfänge auf mehrere kleinere Anfragen aufteilen.
  • Fordern Sie ein neues Token an, wenn das vorhandene Token abläuft oder widerrufen wird.

Wenn Sie mit mehreren Bereichen arbeiten, müssen Sie unter Umständen strukturelle Änderungen an Ihrer Codebasis vornehmen, um den Zugriff nur auf Bereiche anzufordern, die sie wirklich benötigen. Dies wird als inkrementelle Autorisierung bezeichnet. Jede Anfrage sollte möglichst wenig und idealerweise nur einen Umfang enthalten. Informationen zum Aktualisieren der App für die inkrementelle Autorisierung finden Sie unter Umgang mit Nutzereinwilligungen.

Wenn ein Zugriffstoken abläuft, ruft das gapi.auth2-Modul automatisch ein neues, gültiges Zugriffstoken für Ihre Webanwendung ab. Zur Erhöhung der Nutzersicherheit wird diese automatische Tokenaktualisierung von der Google Identity Services-Bibliothek nicht unterstützt. Ihre Webanwendung muss aktualisiert werden, um ein abgelaufenes Zugriffstoken zu erkennen und ein neues anzufordern. Weitere Informationen finden Sie unten im Abschnitt „Token-Verarbeitung“.

Ablauf des Autorisierungscodes

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

Im Abschnitt „Tokenverarbeitung“ weiter unten erfahren Sie, wie Sie auf ein abgelaufenes oder widerrufenes Zugriffstoken reagieren.

Tokenverarbeitung

Fehlerbehandlung hinzufügen, um fehlgeschlagene Google API-Aufrufe zu erkennen, wenn ein abgelaufenes oder widerrufenes Zugriffstoken verwendet wird, und ein neues, gültiges Zugriffstoken anzufordern.

Die Google APIs erhalten den HTTP-Statuscode 401 Unauthorized und invalid_token, wenn ein abgelaufenes oder widerrufenes Zugriffstoken verwendet wird. Ein Beispiel finden Sie unter Ungültige Tokenantwort.

Abgelaufene Tokens

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

Widerruf von Tokens

Der Inhaber eines Google-Kontos kann die zuvor erteilte Einwilligung jederzeit widerrufen. Dadurch werden vorhandene Zugriffstokens und Aktualisierungstokens ungültig. Der Widerruf kann über revoke() oder über ein Google-Konto von deiner Plattform ausgelöst werden.

Ersetzen Google Log-in-JavaScript-Client-Referenzen: durch Google Identity-Dienste:

Methoden:

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

Rufe revoke auf, wenn ein Nutzer sein Konto auf deiner Plattform löscht oder die Einwilligung zum Teilen von Daten mit deiner App entfernen möchte.

Google zeigt dem Nutzer ein Dialogfeld zur Einwilligung an, wenn entweder Ihre Webanwendung oder Back-End-Plattform ein Zugriffstoken anfordert. Siehe Beispiel-Dialogfelder für Nutzer, die Google angezeigt wird.

Bevor eine Zugriffstokens an Ihre App gesendet werden kann, ist eine vorhandene und aktive Google-Sitzung erforderlich, um die Zustimmung des Nutzers einzuholen und das Ergebnis aufzuzeichnen. Der Nutzer muss sich möglicherweise in einem Google-Konto anmelden, wenn noch keine Sitzung eingerichtet ist.

Nutzer anmelden

Nutzer können sich auf einem separaten Browsertab oder nativ über einen Browser oder ein Betriebssystem in einem Google-Konto anmelden. Wir empfehlen dir, deiner Website Über Google anmelden hinzuzufügen, um eine aktive Sitzung zwischen einem Google-Konto und dem Browser einzurichten, wenn der Nutzer deine App zum ersten Mal öffnet. Das bietet folgende Vorteile:

  • Reduziert die Häufigkeit, mit der sich ein Nutzer anmelden muss. Wenn kein Zugriffstoken angefordert wird, wird der Anmeldevorgang für das Google-Konto eingeleitet, sofern noch keine aktive Sitzung vorhanden ist.
  • Verwenden Sie das Feld Anmeldedaten email für das JWT-ID als Wert des Parameters hint in CodeClientConfig- oder TokenClientConfig-Objekten. Das ist besonders hilfreich, wenn es auf Ihrer Plattform kein Nutzerkonto zur Verwaltung von Nutzerkonten gibt.
  • Es kann ein Google-Konto gefunden und einem vorhandenen lokalen Nutzerkonto auf Ihrer Plattform zugeordnet werden. So werden doppelte Konten auf Ihrer Plattform minimiert.
  • Wenn ein neues lokales Konto erstellt wird, können die Dialogfelder für die Registrierung und der Ablauf deutlich von den Dialogfeldern und Abläufen der Nutzerauthentifizierung getrennt werden. Dadurch wird die Anzahl der erforderlichen Schritte verringert und die Abbruchrate verbessert.

Nach der Anmeldung und bevor ein Zugriffstoken ausgestellt wird, müssen Nutzer die Einwilligung für die angefragten Bereiche erteilen.

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

Detaillierte Berechtigungen ermöglichen es Nutzern, einzelne Bereiche zu genehmigen oder abzulehnen. Wenn Sie Zugriff auf mehrere Bereiche anfordern, wird jeder Bereich unabhängig von den anderen Bereichen gewährt oder abgelehnt. Je nach Nutzerauswahl werden für Ihre App selektiv Funktionen und Funktionalität aktiviert, die von einem individuellen Bereich abhängen.

Impliziter Ablauf

Ersetzen Google Log-in-JavaScript-Client-Referenzen durch Google Identity-Dienste:

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 JavaScript-Client-Referenzen für Google Log-in:

Methoden:

  • GoogleUser.getAuthResponse()

Aktualisieren Sie Ihre Webanwendung mit hasGrantedAllScopes() und hasGrantedAnyScope(). Folgen Sie dazu diesem Beispiel für detaillierte Berechtigungen.

Ablauf des Autorisierungscodes

Aktualisieren oder hinzufügen Sie einen Autorisierungscode-Endpunkt für Ihre Back-End-Plattform. Folgen Sie dazu der Anleitung unter Authentifizierungscode-Verarbeitung.

Aktualisieren Sie Ihre Plattform. Folgen Sie dazu den Schritten im Leitfaden zur Verwendung des Codemodells, um die Anfrage zu validieren und ein Zugriffstoken und ein Aktualisierungstoken abzurufen.

Aktualisiere deine Plattform, um Funktionen anhand der einzelnen Bereiche, die der Nutzer genehmigt hat, selektiv zu aktivieren bzw. zu deaktivieren. Befolge dabei die Anleitung für die schrittweise Autorisierung und die vom Nutzer gewährten Zugriffbereiche.

Beispiele für impliziten Vorgang

Der alte Weg

GAPI-Clientbibliothek

Beispiel für die Google API-Clientbibliothek für JavaScript, die im Browser mit einem Pop-up-Dialogfeld für die Nutzereinwilligung ausgeführt wird.

Das Modul gapi.auth2 wird automatisch geladen und von gapi.client.init() verwendet und ist daher 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 im Browser mit einem Pop-up-Dialogfeld für die Nutzereinwilligung ausgeführt wird.

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 wird und Weiterleitungen zu Google für die Nutzereinwilligung ausführt.

In diesem Beispiel werden direkte Aufrufe an die OAuth 2.0-Endpunkte von Google über den Browser des Nutzers angezeigt. Außerdem wird das gapi.auth2-Modul oder eine JavaScript-Bibliothek nicht verwendet.

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

Dieses Beispiel zeigt nur die JavaScript-Bibliothek von Google Identity Service, die das Tokenmodell und das Pop-up-Dialogfeld für die Nutzereinwilligung verwendet. Sie soll die minimale Anzahl von Schritten veranschaulichen, die zum Konfigurieren eines Clients, zum Anfordern und Abrufen eines Zugriffstokens und zum Aufrufen einer Google API erforderlich sind.

<!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 mit dem Tokenmodell hinzufügen, das gapi.auth2-Modul entfernen und eine API mit der Google API-Clientbibliothek für JavaScript aufrufen.

Promise-, async- und „wait“-Befehle werden verwendet, um die Ladereihenfolge der Bibliothek zu erzwingen und Autorisierungsfehler zu beheben. Ein API-Aufruf wird nur ausgeführt, wenn ein gültiges Zugriffstoken verfügbar ist.

Nutzer sollten die Schaltfläche „Kalender anzeigen '“ drücken, wenn das Zugriffstoken fehlt, wenn die Seite zum ersten Mal geladen wird, oder nach Ablauf des Zugriffstokens.

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

In diesem Beispiel wird gezeigt, wie Sie die Google Identity Service-Bibliothek mit dem Tokenmodell hinzufügen, das gapi.auth2-Modul entfernen und eine API mit der Google API-Clientbibliothek für JavaScript aufrufen.

Variablen werden verwendet, um die Ladereihenfolge der Bibliothek zu erzwingen. GAPI-Aufrufe erfolgen innerhalb des Callbacks, nachdem ein gültiges Zugriffstoken zurückgegeben wurde.

Die Nutzer müssen beim ersten Laden der Seite auf die Schaltfläche „Kalender anzeigen“ klicken und dann, wenn sie ihre Kalenderinformationen aktualisieren möchten.

<!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 an 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

Im Pop-up-Fenster der Google Identity Service-Bibliothek kann entweder eine URL-Weiterleitung verwendet werden, um einen Autorisierungscode direkt an den Back-End-Token-Endpunkt zurückzugeben, oder ein JavaScript-Callback-Handler, der im Browser des Nutzers ausgeführt wird und die die Antwort auf Ihre Plattform weiterleitet. In beiden Fällen schließt die Back-End-Plattform den OAuth 2.0-Vorgang aus, um ein gültiges Aktualisierungs- und Zugriffstoken zu erhalten.

Der alte Weg

Serverseitige Webanwendungen

Google Log-in für serverseitige Anwendungen, die auf einer Back-End-Plattform ausgeführt wird. Dabei wird eine Weiterleitung zu Google für die Nutzereinwilligung verwendet.

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

Verwenden von OAuth 2.0 für Webserveranwendungen, um Autorisierungscode vom Browser des Nutzers an Ihre Back-End-Plattform zu senden. Nutzereinwilligung wird verarbeitet, indem der Browser des Nutzers an Google weitergeleitet wird.

/\*
 \* 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,

GIS Pop-up UX

Dieses Beispiel zeigt nur die Google Identity Service-JavaScript-Bibliothek, die das Autorisierungscodemodell verwendet, ein Pop-up-Dialogfeld für Nutzereinwilligung und Callback-Handler, mit dem der Autorisierungscode von Google empfangen wird. Sie soll die minimale Anzahl von Schritten veranschaulichen, die zum Konfigurieren eines Clients, zum Einholen der Einwilligung und zum Senden eines Autorisierungscodes an Ihre Back-End-Plattform erforderlich sind.

<!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=' + 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>

GIS-Weiterleitungs-UX

Das Autorisierungscodemodell unterstützt die Pop-up- und UX-Modi, um einen Autorisierungscode pro Nutzer an den von Ihrer Plattform gehosteten Endpunkt zu senden. Der Weiterleitungs-UX-Modus wird hier angezeigt:

<!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 die Nutzerauthentifizierung und -autorisierung verwendet wird. Damit werden die Funktionen und Funktionalitäten verschiedener Bibliotheken und Module konsolidiert und ersetzt:

Das sollten Sie bei der Migration zu Identity Services tun:

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 Neue Bibliothek und Autorisierungscode hinzufügen.

Kurzreferenz für Mediathek

Vergleich von Objekten und Methoden zwischen der JavaScript-Clientbibliothek von Google Log-in und der Bibliothek Neu Google Identity Services und Notes mit zusätzlichen Informationen und Maßnahmen, die während der Migration durchzuführen sind.

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 neues ersetzen. Der Widerruf kann auch unter https://myaccount.google.com/permissions auftreten
GoogleAuth.grantOfflineAccess() Entfernen Sie sie, indem Sie den Autorisierungscode ausführen.
GoogleAuth.isSignedIn.get() Entfernen
GoogleAuth.isSignedIn.listen() Entfernen
GoogleAuth.signIn() Entfernen
GoogleAuth.signOut() Entfernen
GoogleAuth.then() Entfernen
GoogleUser-Objekt und zugehörige Methoden:
GoogleUser.disconnect() google.accounts.id.revoke Altes durch neues ersetzen. Der Widerruf kann auch unter https://myaccount.google.com/permissions auftreten
GoogleUser.getAuthResponse() requestCode() oder requestAccessToken() Alte ersetzen durch
GoogleUser.getBasicProfile() Entfernen. Verwenden Sie stattdessen das ID-Token. Weitere Informationen finden Sie unter Migration von Google Log-in.
GoogleUser.getGrantedScopes() hasededBeliebigScope() Alte ersetzen durch
GoogleUser.getHostedDomain() Entfernen
GoogleUser.getId() Entfernen
GoogleUser.grantOfflineAccess() Entfernen Sie sie, indem Sie den Autorisierungscode ausführen.
GoogleUser.grant() Entfernen
GoogleUser.hasGrantedScopes() hasededBeliebigScope() Alte ersetzen durch
GoogleUser.isSignedIn() Entfernen
GoogleUser.reloadAuthResponse() RequestAccessToken() Altes entfernen, neues aufrufen, um abgelaufenes oder widerrufenes Zugriffstoken zu ersetzen.
Objekt gapi.auth2 und zugehörige Methoden:
Objekt „gapi.auth2.AutorisierenConfig“ TokenClientConfig oder CodeClientConfig Alte ersetzen durch
Objekt „gapi.auth2.AutorisierenResponse“ Entfernen
Objekt „gapi.auth2.AuthResponse“ Entfernen
gapi.auth2.authorized() requestCode() oder requestAccessToken() Alte ersetzen durch
gapi.auth2.ClientConfig() TokenClientConfig oder CodeClientConfig Alte ersetzen durch
gapi.auth2.getAuthInstance() Entfernen
gapi.auth2.init() initTokenClient() oder initCodeClient() Alte ersetzen durch
Objekt „gapi.auth2.OfflineAccessOptions“ Entfernen
Objekt „gapi.auth2.SignInOptions“ Entfernen
Objekt gapi.signin2 und zugehörige Methoden:
gapi.signin2.render() Entfernen. Das HTML-DOM-Laden des Elements g_id_signin oder des JS-Aufrufs an google.accounts.id.renderButton löst die Nutzeranmeldung in einem Google-Konto aus.

Beispiel-Anmeldedaten

Vorhandene Anmeldedaten

Die Google Log-in-Plattformbibliothek, die Google API-Clientbibliothek für JavaScript oder direkte Aufrufe an Google Auth 2.0-Endpunkte geben sowohl ein OAuth 2.0-Zugriffstoken als auch ein OpenID Connect-ID-Token in einer einzigen Antwort zurück.

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 zur Verwendung für die Autorisierung:
  {
    "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 bei dem Versuch, eine API-Anfrage mit einem abgelaufenen, widerrufenen oder ungültigen Zugriffstoken zu stellen:

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"
    }
  }