Informationen zu diesem Codelab
1. Übersicht
In diesem Codelab erstellen wir eine Webseite für die Nutzeranmeldung. Sie verwenden die Google Identity Services-JavaScript-Bibliothek, um die Schaltfläche „Über Google anmelden“ anzuzeigen und anzupassen.
Lerninhalte
- Einer Webseite die Schaltfläche „Über Google anmelden“ hinzufügen
- OAuth 2.0-Webanwendung einrichten
- ID-Token decodieren
- Schaltfläche „Über Google anmelden“ anpassen
Voraussetzungen
- Ein Texteditor und ein Ort zum Hosten einer Webseite. Diese Umgebungen werden in diesem Codelab behandelt:
- 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 -Projekt sind kostenlos.
- Grundkenntnisse in HTML, CSS, JavaScript und den Chrome-Entwicklertools (oder einem ähnlichen Tool).
Fangen wir also an.
2. Anmeldeseite erstellen
Fügen Sie dieses Codebeispiel in eine Datei mit dem Namen index.html ein. Sie können dies 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 besteht aus HTML und JavaScript und führt folgende Aktionen aus:
- konfiguriert die Google Identity Services-Bibliothek mit
g_id_onload. - eine Schaltfläche „Über Google anmelden“ mit
g_id_signinangezeigt wird, - fügt einen JavaScript-Callback-Funktionshandler namens
handleCredentialResponsehinzu, um Anmeldedaten von Google zu empfangen, und - Eine
decodeJWT-Funktion zum Konvertieren der JSON Web Token-Anmeldedaten (JWT) in einfaches JSON.
Möglicherweise stimmt etwas mit data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" nicht.
Ignorieren Sie es erst einmal. Wir kommen gleich darauf zurück.
3. Webseite bereitstellen
Wir sehen uns zwei Umgebungen für die Bereitstellung von index.html für den Browser an:
- einen Webserver lokal auf Ihrem Computer ausführen
- eine Remote-Plattform wie Glitch.
Wählen Sie die Methode aus, die Ihnen am besten liegt. Nach der Einrichtung verwenden wir die URL, um einen OAuth-Webclient zu konfigurieren.
Lokal auf Ihrem Computer
Prüfen Sie, ob Python3 auf Ihrem System installiert ist. Die Einrichtung unterscheidet sich je nach Betriebssystem und Plattform. Beginnen Sie mit Python Setup and Usage, 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 jetzt Port 8000 auf Verbindungen und ist bereit, Ihre Anmeldeseite bereitzustellen. Die URL lautet
http://localhost:8000
Über eine Webentwicklungsplattform
Wenn Sie sich dafür entschieden haben, Ihre Anmeldeseite mit Glitch (oder einem ähnlichen Tool) zu bearbeiten und zu hosten, sollten Sie index.html entweder in einem Vorschaufenster oder einem neuen Browsertab öffnen können.
Normalerweise verwenden Sie die URL, die dem Projektnamen entspricht, den Sie bei der Einrichtung Ihres glich.com-Projekts eingegeben haben. Wenn Ihr Glitch-Projekt beispielsweise den Namen gis-example hat, 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
Warte mal…
Zuerst müssen wir einen OAuth 2.0-Webclient erstellen und konfigurieren.
Kopieren Sie die URL oder notieren Sie sie sich, da sie im nächsten Schritt verwendet wird.
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.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 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. Hier werden alle Fehler und die von Google zurückgegebenen JWT-ID-Token-Anmeldedaten protokolliert.
Klicken Sie auf die Schaltfläche „Über Google anmelden“.
So geht es weiter:
- 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 Aufforderung zur Einwilligung angezeigt.
Nachdem Sie optional ein Konto ausgewählt und Ihre Einwilligung erteilt haben, antwortet Google mit einem JWT. Die Callback-Funktion handleCredentialResponse, die im Browser ausgeführt wird, empfängt das JWT.
In diesem Codelab dekodieren und geben wir den JWT-Inhalt aus. In einer Produktions-Web-App würden Sie das dekodierte JWT prüfen und verwenden, 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 einige häufig verwendete ID-Token-Felder auch in der Konsole protokolliert.
Sie können Onlinetools wie jwt.io verwenden, um das JWT zu decodieren.
Alternativ kann auch jq im Terminal verwendet werden, 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 sie 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 „email“, „name“ und „picture“ sind relativ leicht zu verstehen. Andere Werte werden verwendet, um das JWT zu überprüfen, bevor Sie es verwenden. Nutzerinformationen aus dem ID-Token abrufen enthält weitere Informationen zur Bedeutung der einzelnen Felder.
7. Schaltfläche anpassen
So platzieren Sie eine Standard-Anmeldeschaltfläche auf einer Seite:
<div class="g_id_signin"></div>
Diese Schaltfläche wird angezeigt.
Vielleicht möchten Sie aber die Farbe, Größe oder den Text an das Design Ihrer Website anpassen.
Wir ändern die Farbe der Schaltfläche in Blau und lassen 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>
Nach dem Speichern und Neuladen 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. Außerdem können Sie unseren HTML-Codegenerator ausprobieren.
8. Zusätzliche Ressourcen
Glückwunsch!
Sie haben einer Webseite eine Schaltfläche „Mit 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 können.
Diese Links können Ihnen bei den nächsten Schritten helfen:
- Google Identity Services HTML API
- Google Identity Services JavaScript API
- Einrichtung der Funktion „Über Google anmelden“ für das Web
- Google-ID-Token bestätigen
- Weitere Informationen zu Google Cloud-Projekten
- Authentifizierungsmethoden für Google-Identitäten