Informationen zu diesem Codelab
1. Übersicht
In diesem Codelab erstellen wir eine einfache Webseite für die Nutzeranmeldung. Sie verwenden die JavaScript-Bibliothek von Google Identity Services, um die Schaltfläche „Über Google anmelden“ anzuzeigen und anzupassen.
Lerninhalte
- So fügen Sie einer Webseite die Schaltfläche „Über Google anmelden“ hinzu
- OAuth 2.0-Webanwendung einrichten
- So decodieren Sie ein ID-Token
- Schaltfläche „Über Google anmelden“ anpassen
Voraussetzungen
- Einen Texteditor und Ort zum Hosten einer Webseite – die Umgebungen, die wir in diesem Codelab behandeln:
- lokal in einem Terminal auf Ihrem Computer ausgeführt wird oder
- mit einer Plattform wie Glitch.
- Ein Google Cloud-Projekt. Sie können Ihr vorhandenes Projekt verwenden oder ein neues erstellen. Ein Google Cloud Platform-Konto und ein Projekt sind kostenlos.
- Grundkenntnisse in HTML, CSS, JavaScript und Chrome-Entwicklertools oder vergleichbaren Tools
Fangen wir also an.
2. Anmeldeseite erstellen
Fügen Sie dieses Codebeispiel in eine Datei mit dem Namen index.html ein. Das können Sie auf Ihrem Computer mit Ihrem bevorzugten Texteditor oder auf einer Plattform wie Glitch tun.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function decodeJWT(token) {
let base64Url = token.split(".")[1];
let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
let jsonPayload = decodeURIComponent(
atob(base64)
.split("")
.map(function (c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
})
.join("")
);
return JSON.parse(jsonPayload);
}
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
const responsePayload = decodeJWT(response.credential);
console.log("Decoded JWT ID token fields:");
console.log(" Full Name: " + responsePayload.name);
console.log(" Given Name: " + responsePayload.given_name);
console.log(" Family Name: " + responsePayload.family_name);
console.log(" Unique ID: " + responsePayload.sub);
console.log(" Profile image URL: " + responsePayload.picture);
console.log(" Email: " + responsePayload.email);
}
</script>
</head>
<body>
<!-- g_id_onload contains Google Identity Services settings -->
<div
id="g_id_onload"
data-auto_prompt="false"
data-callback="handleCredentialResponse"
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
></div>
<!-- g_id_signin places the button on a page and supports customization -->
<div class="g_id_signin"></div>
</body>
</html>
Dieser Code ist eine Mischung aus HTML und JavaScript und erfüllt verschiedene Aufgaben:
- konfiguriert diese Google Identity Services-Bibliothek mit
g_id_onload, - zeigt die Schaltfläche „Über Google anmelden“ mit
g_id_signinan, - einen JavaScript-Callback-Funktions-Handler mit dem Namen
handleCredentialResponsehinzugefügt, um Anmeldedaten von Google zu empfangen, und - Eine
decodeJWT-Funktion, um die Anmeldedaten für JSON Web Token (JWT) in reines JSON-Format zu konvertieren
Bei data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" scheint etwas nicht zu stimmen.
Ignorieren Sie ihn vorerst einfach, wir kommen später noch darauf zurück.
3. Webseite bereitstellen
Wir werden zwei Umgebungen für die Bereitstellung von index.html für den Browser besprechen:
- einen Webserver lokal auf Ihrem Computer ausführen,
- eine Remote-Plattform wie Glitch.
Wählen Sie diejenige aus, die Ihnen am besten gefällt. Nach der Einrichtung konfigurieren wir mithilfe der URL einen OAuth-Webclient.
Lokal von Ihrem Computer
Python3 muss auf Ihrem System installiert sein. Die Einrichtung unterscheidet sich je nach Betriebssystem und Plattform. Beginnen Sie mit Python-Einrichtung und -Nutzung, wenn Sie Python auf Ihrem Computer installieren müssen.
Starten Sie den Python-Webserver in dem Verzeichnis, das index.html enthält:
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
Ein Webserver überwacht nun Port 8000 auf Verbindungen und kann Ihre Anmeldeseite bereitstellen. Die URL lautet
http://localhost:8000
Remote-Plattform verwenden
Wenn Sie Ihre Anmeldeseite mit Glitch (oder einem vergleichbaren Tool) bearbeiten und hosten, sollten Sie index.html entweder in einem Vorschaufenster oder einem neuen Browsertab öffnen können.
Normalerweise verwenden Sie den Projektnamen, den Sie bei der Einrichtung des glich.com-Projekts eingegeben haben. Wenn Ihr Glitch-Projekt beispielsweise den Namen gis-example hat, lautet die URL https://gis-example.glitch.me. Natürlich haben Sie einen anderen Projektnamen gewählt und können diesen nicht wiederverwenden. Die URL lautet
https://<var>your-project-name</var>.glitch.me
Seite laden
Einen Moment bitte...
Wir müssen zuerst einen OAuth 2.0-Webclient erstellen und konfigurieren.
Kopieren oder notieren Sie die URL. Sie wird im nächsten Schritt benötigt.
4. OAuth-Webclient einrichten
Konfigurieren wir OAuth so, dass sich Nutzer anmelden können.
- Klicken Sie auf diesen Link, um einen OAuth 2.0-Webclient zu erstellen. Bei Bedarf unterstützt Sie ein Assistent beim Erstellen und Einrichten eines neuen Google Cloud-Projekts.
- Wählen Sie im Drop-down-Menü Anwendungstyp die Option Webanwendung aus.
- Klicken Sie unter Autorisierte JavaScript-Quellen auf die Schaltfläche URI hinzufügen.
- Geben Sie die URL ein, unter der
index.htmlgehostet wird (siehe Schritt 3: Webseite bereitstellen).Auf Ihrem lokalen Computer gehostet
Auf einer Remote-Plattform gehostet
- Klicken Sie auf Erstellen.
- Kopieren Sie die neue Client-ID.
Eine Sache,
Wir müssen zurückgehen und index.html so aktualisieren, dass die neue Client-ID verwendet wird. Ersetzen Sie im Editor PUT_YOUR_WEB_CLIENT_ID_HERE durch Ihre neue Client-ID. Eine Client-ID sieht in etwa so aus: 1234567890-abc123def456.apps.googleusercontent.com.
Melden wir uns an.
5. Anmelden
Öffnen Sie zuerst die Entwicklerkonsole Ihres Browsers. Alle Fehler und die von Google zurückgegebenen Anmeldedaten des JWT-ID-Tokens werden hier protokolliert.
Klicken Sie auf die Schaltfläche „Über Google anmelden“.
Die nächsten Schritte können etwas variieren:
- Wenn Sie derzeit in mehreren Google-Konten angemeldet sind, werden Sie aufgefordert, das Konto auszuwählen, mit dem Sie sich in dieser Web-App anmelden möchten.
- Wenn Sie sich zum ersten Mal in dieser Web-App anmelden, wird eine Einwilligungsaufforderung angezeigt.
Nachdem Sie ein Konto ausgewählt und Ihre Einwilligung erteilt haben, antwortet Google mit einem JWT. Die im Browser ausgeführte handleCredentialResponse-Callback-Funktion empfängt das JWT.
In diesem Codelab decodieren wir die JWT-Inhalte und geben sie aus. In einer Produktions-Web-App überprüfen Sie das decodierte JWT und verwenden das decodierte JWT, um etwas Sinnvolleres zu tun, z. B. ein neues Konto auf Ihrer Backend-Plattform oder eine neue Sitzung für den Nutzer einzurichten.
6. JWT-ID-Token prüfen
Das codierte JWT wird in der Entwicklerkonsole protokolliert. Nach der Decodierung des JWT werden auch einige häufig verwendete ID-Tokenfelder in der Konsole protokolliert.
Du kannst das JWT mit Onlinetools wie jwt.io decodieren.
Alternativ kann jq in deinem Terminal auch zum Decodieren und Aufrufen des JWT verwendet werden. Möglicherweise musst du jq mit deinem Paketmanager installieren. Füge zuerst den codierten JWT-String in die doppelten Anführungszeichen ein:
$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"
und decodieren Sie es mit diesem Befehl.
$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
"alg": "RS256",
"kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
"typ": "JWT"
}
{
"iss": "https://accounts.google.com",
"azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"sub": "2718281828459045",
"email": "example@example.com",
"email_verified": true,
"nbf": 1744645148,
"name": "Brian Daugherty",
"picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
"given_name": "Brian",
"family_name": "Daugherty",
"iat": 1744645448,
"exp": 1744649048,
"jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}
Einige Schlüssel und Werte wie E-Mail-Adresse, Name und Bild sollten leicht verständlich sein. Andere Werte werden verwendet, um das JWT vor der Verwendung zu prüfen. Unter Nutzerinformationen aus dem ID-Token abrufen erfahren Sie mehr über die Bedeutung der Felder.
7. Schaltfläche anpassen
Das Platzieren einer Standard-Anmeldeschaltfläche auf einer Seite
<div class="g_id_signin"></div>
Diese Schaltfläche wird
Vielleicht möchten Sie aber die Farbe, die Größe oder den Text an das Design Ihrer Website anpassen.
Ändern wir die Farbe der Schaltfläche in Blau und sagen wir stattdessen Sign up with Google (Über Google anmelden).
Öffnen Sie index.html, suchen Sie das Element g_id_signin und fügen Sie die Attribute data-theme="filled_blue" und data-text="signup_with" hinzu:
<div
class="g_id_signin"
data-theme="filled_blue"
data-text="signup_with"
></div>
Nach dem Speichern und Aktualisieren der Seite wird eine blaue Schaltfläche mit dem neuen Text angezeigt.
Sie können die Schaltfläche weiter anpassen. Eine vollständige Liste der Optionen finden Sie unter Attribute für visuelle Daten.
8. Zusätzliche Ressourcen
Glückwunsch!
Sie haben einer Webseite die Schaltfläche „Über Google anmelden“ hinzugefügt, einen OAuth 2.0-Webclient konfiguriert, ein JWT-ID-Token decodiert und erfahren, wie Sie das Aussehen der Schaltfläche anpassen.
Die folgenden Links helfen dir möglicherweise bei den nächsten Schritten:
- Google Identity Services HTML API
- Google Identity Services JavaScript API
- „Über Google anmelden“ einrichten
- Google-ID-Token bestätigen
- Weitere Informationen zu Google Cloud-Projekten
- Authentifizierungsmethoden für Google Identity