Von Google Log-in migrieren

In dieser Anleitung erfahren Sie, welche Änderungen und Schritte erforderlich sind, um JavaScript-Bibliotheken erfolgreich von der alten Google Sign-In-Plattformbibliothek zur neuen Google Identity Services-Bibliothek für die Authentifizierung zu migrieren.

Wenn Ihr Client die Google API-Clientbibliothek für JavaScript oder andere frühere Bibliotheken für die Autorisierung verwendet, finden Sie weitere Informationen unter Zu Google Identity Services migrieren.

Authentifizierung und Autorisierung

Bei der Authentifizierung wird festgestellt, wer jemand ist. Sie wird häufig als Nutzerregistrierung oder Anmeldung bezeichnet. Bei der Autorisierung wird der Zugriff auf Daten oder Ressourcen gewährt oder abgelehnt. Ihre App fordert beispielsweise die Zustimmung des Nutzers an, um auf Google Drive zuzugreifen.

Wie die frühere Google Log-in-Plattformbibliothek wurde die neue Google Identity Services-Bibliothek für die Unterstützung von Authentifizierungs- und Autorisierungsprozessen entwickelt.

In der neueren Bibliothek sind die beiden Prozesse jedoch getrennt, um die Komplexität für Entwickler zu verringern, wenn sie Google-Konten in ihre App einbinden.

Wenn sich Ihr Anwendungsfall nur auf die Authentifizierung bezieht, lesen Sie auf dieser Seite weiter.

Wenn Ihr Anwendungsfall die Autorisierung umfasst, lesen Sie die Informationen unter So funktioniert die Nutzerautorisierung und Zu Google Identity Services migrieren, um sicherzustellen, dass Ihre Anwendung die neuen und verbesserten APIs verwendet.

Änderungen

Für Nutzer bietet die neue Google Identity Services-Bibliothek zahlreiche Verbesserungen in der Nutzerfreundlichkeit. Einige Highlights:

• Neue, reibungslose One Tap- und automatische Anmeldevorgänge mit weniger einzelnen Schritten
• eine aktualisierte Anmeldeschaltfläche mit Nutzerpersonalisierung,
• Einheitliches Branding und einheitliches Anmeldeverhalten im Web verbessern das Verständnis und das Vertrauen.
• Nutzer können schnell auf Inhalte zugreifen und sich von überall auf Ihrer Website direkt registrieren und anmelden, ohne zuerst eine Anmelde- oder Kontoseite aufrufen zu müssen.

Für Entwickler haben wir uns darauf konzentriert, die Komplexität zu reduzieren, die Sicherheit zu verbessern und die Integration so schnell wie möglich zu gestalten. Hier einige der Verbesserungen:

• Die Option, die Nutzeranmeldung für die statischen Inhalte Ihrer Website nur mit HTML hinzuzufügen,
• Da die Anmeldeauthentifizierung von der Autorisierung und der Weitergabe von Nutzerdaten getrennt ist, ist die Komplexität einer OAuth 2.0-Integration nicht mehr erforderlich, um Nutzer auf Ihrer Website anzumelden.
• Sowohl der Pop-up- als auch der Weiterleitungsmodus werden weiterhin unterstützt, aber die OAuth 2.0-Infrastruktur von Google leitet jetzt zum Anmeldeendpunkt Ihres Backend-Servers weiter.
• Zusammenführung der Funktionen der beiden früheren Google Identity- und Google API-JavaScript-Bibliotheken in einer einzigen neuen Bibliothek
• Bei Anmeldeantworten können Sie jetzt entscheiden, ob Sie ein Promise verwenden möchten. Die Indirektion über Getter-Funktionen wurde zur Vereinfachung entfernt.

Beispiel für die Anmeldungsmigration

Wenn Sie von der vorhandenen Schaltfläche „Google Log-in“ migrieren und Nutzer nur auf Ihrer Website anmelden möchten, ist die einfachste Änderung die Aktualisierung auf die neue personalisierte Schaltfläche. Dazu müssen Sie JavaScript-Bibliotheken austauschen und Ihre Codebasis aktualisieren, damit ein neues Anmeldeobjekt verwendet wird.

Bibliotheken und Konfiguration

Die früheren Google Log-in-Plattformbibliotheken apis.google.com/js/platform.js und die Google APIs-Clientbibliothek für JavaScript gapi.client sind für die Nutzerauthentifizierung und ‑autorisierung nicht mehr erforderlich. Sie wurden durch eine einzelne neue Google Identity Services-JavaScript-Bibliothek ersetzt: accounts.google.com/gsi/client.

Die drei JavaScript-Module api, client und platform, die für die Anmeldung verwendet werden, werden alle von apis.google.com geladen. So können Sie herausfinden, wo die frühere Bibliothek auf Ihrer Website enthalten ist:

• die standardmäßige Anmeldeschaltfläche wird geladen apis.google.com/js/platform.js,
• eine benutzerdefinierte Schaltflächengrafik wird geladen apis.google.com/js/api:client.js und
• Bei der direkten Verwendung von gapi.client werden apis.google.com/js/api.js geladen.

In den meisten Fällen können Sie Ihre vorhandenen Anmeldedaten für die Client-ID der Webanwendung weiterhin verwenden. Im Rahmen der Migration empfehlen wir, dass Sie unsere OAuth 2.0-Richtlinien lesen und die Google API Console verwenden, um die folgenden Clienteinstellungen zu bestätigen und gegebenenfalls zu aktualisieren:

• Ihre Test- und Produktions-Apps verwenden separate Projekte und haben eigene Client-IDs.
• Der OAuth 2.0-Client-ID-Typ ist „Webanwendung“ und
• HTTPS wird für autorisierte JavaScript-Quellen und Weiterleitungs-URIs verwendet.

Betroffenen Code ermitteln und testen

Mithilfe eines Debug-Cookies können Sie den betroffenen Code finden und das Verhalten nach der Einstellung testen.

Bei großen oder komplexen Apps kann es schwierig sein, den gesamten Code zu finden, der von der Einstellung des gapi.auth2-Moduls betroffen ist. Wenn Sie die vorhandene Nutzung von Funktionen, die bald eingestellt werden, in der Console protokollieren möchten, legen Sie den Wert des G_AUTH2_MIGRATION-Cookies auf informational fest. Optional können Sie einen Doppelpunkt gefolgt von einem Schlüsselwert hinzufügen, um auch im Sitzungsspeicher zu protokollieren. Nach der Anmeldung und dem Empfang von Anmeldedaten können Sie die Anmeldedaten überprüfen oder die erfassten Protokolle zur späteren Analyse an ein Backend senden. Mit informational:showauth2use werden beispielsweise Ursprung und URL unter einem Sitzungsspeicherschlüssel namens showauth2use gespeichert.

Wenn Sie das Verhalten der App prüfen möchten, wenn das gapi.auth2-Modul nicht mehr geladen wird, legen Sie den Wert des G_AUTH2_MIGRATION-Cookies auf enforced fest. So können Sie das Verhalten nach der Einstellung vor dem Datum der Erzwingung testen.

Mögliche G_AUTH2_MIGRATION-Cookie-Werte:

• enforced Das Modul gapi.auth2 wird nicht geladen.
• informational Verwendung von eingestellten Funktionen in der JS-Konsole protokollieren. Außerdem wird im Sitzungsspeicher protokolliert, wenn ein optionaler Schlüsselname festgelegt ist: informational:key-name.

Um die Auswirkungen auf Nutzer zu minimieren, empfehlen wir, dieses Cookie zuerst lokal während der Entwicklung und des Tests festzulegen, bevor Sie es in Produktionsumgebungen verwenden.

HTML und JavaScript

In diesem Anmeldeszenario, in dem nur die Authentifizierung erfolgt, werden Beispielcode und Renderings der vorhandenen Google Log-in-Schaltfläche angezeigt. Wählen Sie entweder den Pop-up- oder den Weiterleitungsmodus aus, um die Unterschiede bei der Verarbeitung der Authentifizierungsantwort durch einen JavaScript-Callback oder durch eine sichere Weiterleitung zu Ihrem Backend-Server-Anmeldeendpunkt zu sehen.

Früher

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
  </body>
</html>

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
    <script>
      function handleCredentialResponse(googleUser) {
        ...
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://yourbackend.example.com/tokensignin');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
          console.log('Signed in as: ' + xhr.responseText);
        };
        xhr.send('idtoken=' + id_token);
      }
    </script>
  </body>
</html>

Jetzt

Wenn Sie die neue Bibliothek in einem reinen Authentifizierungsszenario verwenden möchten, wählen Sie entweder den Pop-up- oder den Weiterleitungsmodus aus und ersetzen Sie die vorhandene Implementierung auf Ihrer Anmeldeseite durch das Codebeispiel.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-callback="handleCredentialResponse">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-ux_mode="redirect"
         data-login_uri="https://www.example.com/your_login_endpoint">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

In diesem Beispiel, in dem nur die Authentifizierung erfolgt, ersetzen die neue accounts.google.com/gsi/client-Bibliothek, die g_id_signin-Klasse und das g_id_onload-Objekt die frühere apis.google.com/js/platform.js-Bibliothek und das g-signin2-Objekt.

Neben dem Rendern der neuen personalisierten Schaltfläche wird im Beispielcode auch das neue One Tap-Pop-up angezeigt. Wir empfehlen dringend, das One Tap-Pop-up überall dort anzuzeigen, wo Sie die personalisierte Schaltfläche einblenden, um die Reibung für Nutzer bei der Registrierung und Anmeldung zu minimieren.

Obwohl dies aufgrund der erhöhten Anmeldeschwierigkeiten nicht empfohlen wird, kann die neue personalisierte Schaltfläche allein angezeigt werden, ohne dass gleichzeitig das One Tap-Dialogfeld angezeigt wird. Setzen Sie dazu das Attribut data-auto_prompt auf false.

HTML- und JavaScript-APIs

Im vorherigen Beispiel wird gezeigt, wie Sie die neue HTML API verwenden, um die Anmeldung auf Ihrer Website zu ermöglichen. Alternativ können Sie die funktional äquivalente JavaScript API verwenden oder HTML- und JavaScript-APIs auf Ihrer Website kombinieren.

Wenn Sie sich die Optionen zum Anpassen von Schaltflächen interaktiv ansehen möchten, z. B. Rückruftyp und Attribute wie Farbe, Größe, Form, Text und Design, können Sie unseren Codegenerator verwenden. Damit lassen sich verschiedene Optionen schnell vergleichen und HTML-Snippets für Ihre Website generieren.

Anmeldung über One Tap von jeder Seite aus

One Tap ist eine neue, unkomplizierte Methode, mit der Nutzer sich auf Ihrer Website registrieren oder anmelden können. So können Sie die Nutzeranmeldung direkt auf jeder Seite Ihrer Website aktivieren. Nutzer müssen dann keine spezielle Anmeldeseite aufrufen. Anders ausgedrückt: Dadurch wird die Registrierung und Anmeldung vereinfacht, da Nutzer sich nicht nur über Ihre Anmeldeseite registrieren und anmelden können.

Damit die Anmeldung von jeder Seite aus möglich ist, empfehlen wir, g_id_onload in eine gemeinsame Kopf- oder Fußzeile oder ein anderes Objekt einzufügen, das auf Ihrer gesamten Website enthalten ist.

Wir empfehlen außerdem, g_id_signin, mit dem die personalisierte Anmeldeschaltfläche angezeigt wird, nur auf Ihren Anmelde- oder Nutzerkontoverwaltungsseiten hinzuzufügen. Bieten Sie Nutzern die Möglichkeit, sich zu registrieren oder anzumelden, indem Sie die Schaltfläche neben anderen Schaltflächen für föderierte Identitätsanbieter und Eingabefeldern für Nutzernamen und Passwörter anzeigen.

Token-Antwort

Für die Nutzeranmeldung müssen Sie sich nicht mehr mit OAuth 2.0-Autorisierungscodes, Zugriffstokens oder Aktualisierungstokens auskennen oder diese verwenden. Stattdessen wird ein JWT-ID-Token (JSON Web Token) verwendet, um den Anmeldestatus und das Nutzerprofil freizugeben. Zur weiteren Vereinfachung müssen Sie nicht mehr auf Accessormethoden im „Getter“-Stil zurückgreifen, um mit Nutzerprofildaten zu arbeiten.

Ein sicheres, von Google signiertes JWT-ID-Token wird zurückgegeben, wenn:

• an den browserbasierten JavaScript-Callback-Handler des Nutzers im Pop-up-Modus oder
• an Ihren Backend-Server über eine Google-Weiterleitung zu Ihrem Anmeldeendpunkt, wenn die Schaltfläche „Über Google anmelden“ ux_mode auf redirect festgelegt ist.

Aktualisieren Sie in beiden Fällen Ihre vorhandenen Callback-Handler, indem Sie Folgendes entfernen:

• Anrufe an googleUser.getBasicProfile(),
• Verweise auf BasicProfile und zugehörige Aufrufe der Methoden getId(), getName(), getGivenName(), getFamilyName(), getImageUrl() und getEmail() sowie
• Verwendung des AuthResponse-Objekts.

Verwenden Sie stattdessen direkte Verweise auf credential-Unterfelder im neuen JWT-Objekt CredentialResponse, um mit Nutzerprofildaten zu arbeiten.

Achten Sie außerdem darauf, dass Sie nur im Weiterleitungsmodus Cross-Site Request Forgery (CSRF) verhindern und das Google-ID-Token auf Ihrem Back-End-Server überprüfen.

Um besser zu verstehen, wie Nutzer mit Ihrer Website interagieren, kann das Feld select_by in der CredentialResponse verwendet werden, um das Ergebnis der Nutzereinwilligung und den verwendeten Anmeldevorgang zu ermitteln.

Nutzereinwilligung und Widerrufen von Berechtigungen

Wenn sich ein Nutzer zum ersten Mal auf Ihrer Website anmeldet, fordert Google ihn auf, der Weitergabe seines Kontoprofils an Ihre App zuzustimmen. Erst nach der Einwilligung wird das Profil des Nutzers in einer Anmeldedaten-Nutzlast eines ID-Tokens an Ihre App weitergegeben. Das Widerrufen des Zugriffs auf dieses Profil entspricht dem Widerrufen eines Zugriffstokens in der früheren Anmeldebibliothek.

Nutzer können Berechtigungen widerrufen und Ihre App von ihrem Google-Konto trennen, indem sie https://myaccount.google.com/permissions aufrufen. Alternativ können Nutzer die Verbindung direkt über Ihre App trennen, indem sie einen API-Aufruf auslösen, den Sie implementieren. Die frühere Methode disconnect wurde durch die neuere Methode revoke ersetzt.

Wenn ein Nutzer sein Konto auf Ihrer Plattform löscht, empfiehlt es sich, revoke zu verwenden, um die Verbindung Ihrer App zu seinem Google-Konto zu trennen.

Bisher konnte auth2.signOut() verwendet werden, um die Abmeldung von Nutzern aus Ihrer App zu verwalten. Die Verwendung von auth2.signOut() sollte entfernt werden und Ihre App sollte den Sitzungsstatus und den Anmeldestatus der einzelnen Nutzer direkt verwalten.

Sitzungsstatus und Listener

In der neuen Bibliothek werden der Anmeldestatus oder der Sitzungsstatus für Ihre Web-App nicht beibehalten.

Der Anmeldestatus eines Google-Kontos und der Sitzungsstatus und Anmeldestatus Ihrer App sind unterschiedliche Konzepte.

Der Anmeldestatus des Nutzers in seinem Google-Konto und in Ihrer App ist unabhängig voneinander, außer während der Anmeldung selbst. Dann wissen Sie, dass der Nutzer erfolgreich authentifiziert wurde und in seinem Google-Konto angemeldet ist.

Wenn „Über Google anmelden“, „One Tap“ oder die automatische Anmeldung auf Ihrer Website enthalten sind, müssen sich Nutzer zuerst in ihrem Google-Konto anmelden, um:

• bei der ersten Registrierung oder Anmeldung auf Ihrer Website die Einwilligung zur Weitergabe ihres Nutzerprofils erteilen,
• und später für die Anmeldung bei erneuten Besuchen Ihrer Website.

Nutzer können angemeldet bleiben, sich abmelden oder zu einem anderen Google-Konto wechseln, während eine aktive, angemeldete Sitzung auf Ihrer Website aufrechterhalten wird.

Sie sind jetzt dafür verantwortlich, den Anmeldestatus für Nutzer Ihrer Webanwendung direkt zu verwalten. Bisher hat Google Log-in dabei geholfen, den Sitzungsstatus des Nutzers zu überwachen.

Entfernen Sie alle Verweise auf auth2.attachClickHandler() und die zugehörigen registrierten Callback-Handler.

Bisher wurden Listener verwendet, um Änderungen am Anmeldestatus für das Google-Konto eines Nutzers zu teilen. Listener werden nicht mehr unterstützt.

Entfernen Sie alle Verweise auf listen(), auth2.currentUser und auth2.isSignedIn.

Kekse

Bei der Anmeldung über Google werden Cookies nur in begrenztem Umfang verwendet. Eine Beschreibung dieser Cookies folgt. Weitere Informationen zu den anderen von Google verwendeten Cookie-Arten finden Sie unter So verwendet Google Cookies.

Das von der früheren Google Sign-in Platform Library gesetzte Cookie G_ENABLED_IDPS wird nicht mehr verwendet.

Die neue Google Identity Services-Bibliothek kann diese domainübergreifenden Cookies optional basierend auf Ihren Konfigurationsoptionen festlegen:

• g_state speichert den Abmeldestatus des Nutzers und wird beim Verwenden des One Tap-Pop-ups oder der automatischen Anmeldung festgelegt.

• g_csrf_token ist ein Double-Submit-Cookie, das verwendet wird, um CSRF-Angriffe zu verhindern. Es wird festgelegt, wenn Ihr Anmelde-Endpunkt aufgerufen wird. Der Wert für Ihren Anmelde-URI kann explizit festgelegt werden oder wird standardmäßig auf den URI der aktuellen Seite gesetzt. Ihr Anmeldeendpunkt kann unter diesen Bedingungen aufgerufen werden, wenn Sie Folgendes verwenden:

  • HTML API mit data-ux_mode=redirect oder wenn data-login_uri festgelegt ist, oder

  • JavaScript API mit ux_mode=redirect, wobei google.accounts.id.prompt() nicht zum Anzeigen von „Einmalanmeldung“ oder der automatischen Anmeldung verwendet wird.

Wenn Sie einen Dienst haben, der Cookies verwaltet, müssen Sie die beiden neuen Cookies hinzufügen und das alte Cookie entfernen, sobald die Migration abgeschlossen ist.

Wenn Sie mehrere Domains oder Subdomains verwalten, finden Sie unter One Tap auf Subdomains anzeigen weitere Informationen zur Verwendung des g_state-Cookies.

Referenz zur Objektmigration für die Nutzeranmeldung