1. Übersicht
In diesem Codelab erstellen wir eine Webseite für die Nutzeranmeldung. Dazu verwenden wir die JavaScript-Bibliothek von Google Identity Services, um den Button „Über Google anmelden“ anzuzeigen und anzupassen.
Lerninhalte
- Button „Über Google anmelden“ zu einer Webseite hinzufügen
- OAuth 2.0-Webanwendung einrichten
- ID-Token decodieren
- Button „Über Google anmelden“ anpassen
Voraussetzungen
- Einen Texteditor und einen Ort zum Hosten einer Webseite. Die Umgebungen, die wir in diesem Codelab verwenden, sind:
- lokal in einem Terminal auf Ihrem Computer oder
- auf 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 einer entsprechenden Alternative).
Fangen wir also an.
2. Anmeldeseite erstellen
Fügen Sie dieses Codebeispiel in eine Datei mit dem Namen index.html ein. Sie können das 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 führt eine Reihe von Aktionen aus:
- Konfiguriert die Google Identity Services-Bibliothek mit
g_id_onload. - Zeigt einen Button „Über Google anmelden“ mit
g_id_signinan. - Fügt einen JavaScript-Callback-Funktionshandler namens
handleCredentialResponsehinzu, um Anmeldedaten von Google zu erhalten. - Eine
decodeJWTFunktion zum Konvertieren der JSON Web Token-Anmeldedaten (JWT) in einfaches JSON.
Bei data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" stimmt möglicherweise etwas nicht.
Ignorieren Sie das vorerst. Wir kommen gleich darauf zurück.
3. Webseite bereitstellen
Wir besprechen zwei Umgebungen für die Bereitstellung von index.html für den Browser:
- Webserver lokal auf Ihrem Computer ausführen
- Remoteplattform wie Glitch.
Wählen Sie die Umgebung aus, mit der Sie am besten vertraut sind. Nach der Einrichtung verwenden wir die URL, um einen OAuth-Webclient zu konfigurieren.
Lokal von Ihrem Computer
Prüfen Sie, ob Python 3 auf Ihrem System installiert ist. Die Einrichtung unterscheidet sich je nach Betriebssystem und Plattform. Beginnen Sie mit der Python-Einrichtung und -Nutzung, wenn Sie Python auf Ihrem Computer installieren müssen.
Starten Sie den Python-Webserver im Verzeichnis mit index.html:
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
Ein Webserver überwacht jetzt Port 8000 auf Verbindungen und ist bereit, Ihre Anmeldeseite bereitzustellen. Die URL lautet
http://localhost:8000
Von einer Webentwicklungsplattform
Wenn Sie Ihre Anmeldeseite mit Glitch (oder einer entsprechenden Plattform) bearbeiten und hosten, können Sie index.html entweder in einem Vorschaufenster oder in einem neuen Browsertab öffnen.
Normalerweise ist die URL der Projektname, den Sie bei der Einrichtung Ihres Glitch-Projekts eingegeben haben. Wenn Ihr Glitch-Projekt beispielsweise gis-example heißt, lautet die URL https://gis-example.glitch.me. Sie haben natürlich einen anderen Projektnamen ausgewählt und können diesen nicht wiederverwenden. Die URL lautet
https://<var>your-project-name</var>.glitch.me
Seite laden
Warten Sie einen Moment.
Wir müssen zuerst einen OAuth 2.0-Webclient erstellen und konfigurieren.
Kopieren Sie die URL oder notieren Sie sie. Sie wird im nächsten Schritt verwendet.
4. OAuth-Webclient einrichten
Konfigurieren wir OAuth, damit sich Nutzer anmelden können.
- Klicken Sie auf diesen Link, um einen OAuth 2.0-Webclient zu erstellen. Bei Bedarf hilft Ihnen 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. Sie finden sie in Schritt 3: Webseite bereitstellen.Lokal auf Ihrem Computer gehostet
Auf einer Remoteplattform gehostet
- Klicken Sie auf Erstellen.
- Kopieren Sie die neue Client-ID.
Eine Sache,
wir müssen zurückgehen und index.html aktualisieren, damit die neue Client-ID verwendet wird. Ersetzen Sie in Ihrem Editor PUT_YOUR_WEB_CLIENT_ID_HERE durch Ihre neue Client-ID. Eine Client-ID sieht so aus: 1234567890-abc123def456.apps.googleusercontent.com.
Melden wir uns an.
5. Anmelden
Öffnen Sie zuerst die Entwicklerkonsole Ihres Browsers. Alle Fehler und die JWT-ID-Token-Anmeldedaten, die von Google zurückgegeben werden, werden hier protokolliert.
Klicken Sie auf den Button „Über Google anmelden“.
Was als Nächstes passiert, kann leicht variieren:
- Wenn Sie derzeit in mehr als einem Google-Konto angemeldet sind, werden Sie aufgefordert, das Konto auszuwählen, mit dem Sie sich in dieser Webanwendung anmelden möchten.
- Wenn Sie sich zum ersten Mal in dieser Webanwendung anmelden, wird eine Einwilligungsaufforderung angezeigt.
Nachdem Sie optional ein Konto ausgewählt und Ihre Einwilligung gegeben haben, antwortet Google mit einem JWT. Die Callback-Funktion handleCredentialResponse, die im Browser ausgeführt wird, empfängt das JWT.
In diesem Codelab decodieren und geben wir den JWT-Inhalt aus. In einer Produktions-Webanwendung prüfen und verwenden Sie das decodierte JWT, um etwas Sinnvolleres zu tun, z. B. ein neues Konto auf Ihrer Backend-Plattform zu erstellen oder eine neue Sitzung für den Nutzer einzurichten.
6. JWT-ID-Token prüfen
Das codierte JWT wird in der Entwicklerkonsole protokolliert. Nach dem Decodieren des JWT werden auch einige häufig verwendete ID-Token-Felder in der Konsole protokolliert.
Sie können Online-Tools wie jwt.io verwenden, um das JWT zu decodieren.
Alternativ können Sie auch jq in Ihrem Terminal verwenden, um das JWT zu decodieren und anzusehen. Möglicherweise müssen Sie jq mit Ihrem Paketmanager installieren. Fügen Sie zuerst den codierten JWT-String in die doppelten Anführungszeichen ein:
$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"
Verwenden Sie dann diesen Befehl, um ihn zu decodieren:
$ 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 der Schlüssel und Werte wie E-Mail-Adresse, Name und Bild sollten relativ leicht zu verstehen sein. Andere Werte werden verwendet, um das JWT zu prüfen, bevor Sie es verwenden. Unter Nutzerinformationen aus dem ID-Token abrufen erfahren Sie mehr über die Bedeutung der einzelnen Felder.
7. Schaltfläche anpassen
So platzieren Sie einen Standardschaltfläche für die Anmeldung auf einer Seite:
<div class="g_id_signin"></div>
Sie sehen dann diese Schaltfläche:
Möglicherweise möchten Sie aber die Farbe, Größe oder den Text an Ihr Websitedesign anpassen.
Ändern wir die Schaltflächenfarbe in Blau und lassen wir stattdessen Mit Google registrieren anzeigen.
Ö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>
Nachdem Sie die Seite gespeichert und neu geladen haben, sehen Sie eine blaue Schaltfläche mit dem neuen Text.
Sie können die Schaltfläche weiter anpassen. Eine vollständige Liste der Optionen finden Sie unter Visuelle Datenattribute. Probieren Sie auch unseren HTML-Codegenerator aus.
8. Zusätzliche Ressourcen
Glückwunsch!
Sie haben einer Webseite einen Button „Über Google anmelden“ hinzugefügt, einen OAuth 2.0-Webclient konfiguriert, ein JWT-ID-Token decodiert und gelernt, wie Sie das Aussehen des Buttons anpassen.
Diese Links können Ihnen bei den nächsten Schritten helfen:
- Google Identity Services HTML API
- Google Identity Services JavaScript API
- So richten Sie „Über Google anmelden“ für das Web ein
- Google-ID-Token prüfen
- Weitere Informationen zu Google Cloud-Projekten.
- Google Identity Authentifizierungsmethoden