Lösungsvorschlag: Anmeldung mit Google-Konto

Das Projekt findet sich hier auf Github: https://github.com/ateachment/SimpleAuthService/tree/googleLogin

Mit Hilfe dieser Projektversion, kann man sich mit einem Google-Konto bei der Webanwendung anmelden.

Anmeldung mit Google-Konto

Im Exkurs: OAuth2 und OpenID Connect findet man genauere Informationen, zum verwendeten aktuellen und standardisierten Verfahren und zum Quellcode der Beispielanwendung.

Webanwendung als Client bei Google registrieren

Um den Google-Anmelde-Button nutzen zu können, muss über die Google developers credentials page  (Google-Konto erforderlich) die Anwendung als Client bei Google als Authentifizierungs-Provider erfolgen.

OAuth-Client-ID erstellen

Da eine OAuth-Client-ID einem Projekt zugeordnet sein muss, sollte ein neues Projekt erstellt werden:

Projekt erstellen -1-

Projekt erstellen -2-

Das neue Projekt muss danach ausgewählt werden:

Projekt auswählen -2-

Nun kann der mit der Erstellung der OAuth-ClientID begonnen werden:


Mit der Erstellung der OAuth-Client-ID beginnen

Zuerst muss jedoch der "Zustimmungsbildschirm" konfiguriert werden:

Zustimmungsbildschirm konfigurieren

Dazu muss die Google Auth Platform konfiguriert werden:

Google Auth Platform konfigurieren

Dann wird die Projektkonfiguration vorgenommen:

• Anwendungsname: z.B. simpleAuthService.py
• Nutzersupport: Ihre E-Mail-Adresse bei googlemail
• Zielgruppe: Extern (für in Liste der Testnutzer aufgenommene Benutzer mit Google-Konto)
• Kontaktdaten: Ihre E-Mail-Adresse um über Änderungen am Projekt von Google informiert werden zu können.
• Richtlinie zu Nutzerdaten für Google API-Dienste akzeptieren.

Projektkonfiguration vornehmen

Nun wird der OAuth-Client erstellt:

OAuth-Client erstellen

Im letzten Schritt wird die OAuth-Client-ID erstellt:

• Anwendungstyp: Webanwendung
• Autorisierte JavaScript-Quellen: https.//localhost:5000
• Autorisierte Weiterleitungs-URIs: https://localhost:5000/googleLogin/callback

OAuth-Client-ID erstellen

Kopieren von Client-ID und Clientschlüssel:

Der Clientschlüssel wird nur einmalig hier angezeigt!

Kopieren von Client-ID und Clientschlüssel

Beides wird in settings.py eingetragen.

Datenzugriff konfigurieren

Google überträgt als Authentifizierungsprovider Daten an die anfordernde Anwendung. Dies ist in der oben vorgenommenen Grundkonfiguration nur die Google-E-Mail-Adresse. Es können sehr weitreichend weitere Daten bereitgestellt werden. Sie können hier konfiguriert werden:

Datenzugriff konfigurieren (optional)

HTTPS mit Flask auf localhost

Google sperrt den Authentification Service sofort, wenn die Daten nicht sicher übertragen werden. Aus diesem Grund muss Flask die Seiten mit HTTPS ausliefern. Flask kommt mit dem Web Server Gateway Interface WSGI Werkzeug. Es liefert mit Hilfe der Bibliothek pyopenssl ein eigenes, eingebautes Zertifikat aus, das mit Flask installiert wird. Die Bibiliothek muss mit

pip install pyopenssl

installiert werden.

Am Ende des Flask-Programms simpleAuthService.py wird Flask, hierfür (lat. "ad hoc") unter Verwendung von  SSL/TLS-Verbindungen gestartet. (Außerdem stellen wir bereits auf localhost als sichere Testadresse anstelle der IP-Adresse 127.0.0.1 um, da das später für die Anmeldung mit Passkey benötigt wird.)

if __name__ == '__main__':
    app.run("localhost",ssl_context="adhoc") # run using https to ensure an encrypted connection with Google (pip install pyOpenSSL)
                                             # for later added Passkey support localhost is used instead of 127.0.0.1

Da diesem eingebauten Zertifikal von den modernen Browsern nicht vertraut wird. Wird man beim Öffnen des Links aufgefordert, das entsprechende Risiko einzugehen. Wobei hier natürlich kein Risiko besteht, da man selbst ja den Webserver betreibt, die Authentizität der lokalen Seite selbst gewährleistet:

Unsichere lokale Webseite mit dem Firefox-Browser öffnen (Die Edge-Konfiguration per GPO verbietet das an den Schulen in Ffm) 

Die Anmeldung ist nun mit dem Google Authentifizierungdienst möglich. Nun sorgt Google mit seiner Zwei-Faktor-Authentifizierung bzw. mit Passkey-Unterstützung für zusätzliche Sicherheit. In der Beispielanwendung wird beispielhaft trotzdem lediglich die Rolle Viewer freigegeben.

Anmeldung über Google

Dabei informiert Google darüber, welche Informationen an die Anwendung übertragen werden. (In der Standardkonfiguration wird lediglich die Google-E-Mail-Adresse übertragen.)

__________________________________________________________________________
Quelle:

Google developers credentials page    (13.03.2026)