Sind Sie bereit, das Einloggen auf Ihrer Website zum Kinderspiel zu machen? Tauchen Sie ein in unsere Schritt-für-Schritt-Anleitung zur Integration von Google OAuth 2.0 für die Anmeldung auf Websites von Drittanbietern. Wir führen Sie durch den Prozess, um die Benutzererfahrung zu verbessern und die Sicherheit zu erhöhen.
Bevor wir beginnen, wollen wir zunächst verstehen, was OAuth 2.0 ist.
Was ist OAuth 2.0?
OAuth 2.0 ist ein offener Standard für das Autorisierungsprotokoll, das Anwendungen von Drittanbietern den Zugriff auf geschützte Ressourcen ermöglicht, ohne dass der Benutzername und das Passwort des Benutzers angegeben werden müssen. Es ermöglicht Benutzern, Anwendungen von Drittanbietern zu autorisieren, auf ihre geschützten Ressourcen zuzugreifen, ohne ihre Anmeldeinformationen direkt preiszugeben. OAuth 2.0 wird in Web- und mobilen Anwendungen häufig verwendet, um einen sicheren Autorisierungsmechanismus bereitzustellen.
Das OAuth 2.0-Protokoll umfasst die folgenden Rollen:
- Ressourcenbesitzer: Normalerweise der Benutzer, dem die geschützten Ressourcen gehören, z. B. Fotos, persönliche Profile usw.
- Client: Die Anwendung eines Drittanbieters, die auf die geschützten Ressourcen des Ressourcenbesitzers zugreifen möchte.
- Autorisierungsserver: Der Server, der für die Authentifizierung des Ressourcenbesitzers und die Autorisierung des Clients für den Zugriff auf die Ressourcen zuständig ist.
- Ressourcenserver: Der Server, der die geschützten Ressourcen speichert und APIs für den Zugriff darauf bereitstellt.
Das OAuth 2.0-Protokoll erreicht die Autorisierung über den Autorisierungsablauf. Häufige Autorisierungsabläufe sind:
- Authorization Code Grant: Der Client leitet den Benutzer zum Autorisierungsserver weiter, der Benutzer meldet sich an und autorisiert, und der Autorisierungsserver gibt dem Client einen Autorisierungscode zurück, den der Client dann verwendet, um ihn gegen ein Zugriffstoken auszutauschen.
- Resource Owner Password Credentials Grant: Der Ressourcenbesitzer stellt dem Client direkt den Benutzernamen und das Passwort zur Verfügung, und der Client verwendet diese Anmeldeinformationen, um ein Zugriffstoken vom Autorisierungsserver anzufordern.
- Client Credentials Grant: Der Client verwendet seine eigenen Anmeldeinformationen, um direkt ein Zugriffstoken vom Autorisierungsserver anzufordern, was für Fälle geeignet ist, in denen der Client selbst auf die Ressourcen zugreifen muss.
- Implicit Grant: Wird verwendet, um direkt ein Zugriffstoken vom Client in einer browserbasierten Anwendung zu erhalten.
Google OAuth 2.0 Implicit Grant: Implementierung & Apidog Debugging
Google verwendet den Implicit Grant-Ablauf für die OAuth 2.0-Autorisierung im Web. Sehen wir uns also an, wie man ihn implementiert und wie man ihn in Apidog debuggt.
Schritt 1: Konfigurieren Sie die Client-ID und die Weiterleitungs-URL
Zuerst müssen wir die Google API Console besuchen, um die OAuth 2.0-Anmeldeinformationen zu erhalten. Klicken Sie in der linken Seitenleiste auf die Option "Credentials" und erstellen Sie dann eine OAuth-Client-ID.
Wählen Sie dann Ihren Anwendungstyp aus, der je nach Ihrem Unternehmen eine Website, eine Android- oder eine iOS-App sein kann. Geben Sie als Nächstes im Feld "Authorized JavaScript origins" Ihre Website-Domain ein.
Wenn es sich um ein lokales Debugging handelt, wird es normalerweise auf http://localhost oder http://localhost:8000 gesetzt, wenn ein Port vorhanden ist. Der Zweck ist es, Google die HTTP-Quelle mitzuteilen, auf der Ihre Website gehostet wird. Geben Sie dann im Feld "Authorized redirect URIs" Ihre Weiterleitungsadresse ein, die normalerweise Ihr Anmeldepfad oder eine andere Domain ist, auf die Sie zugreifen können.
Nachdem Sie alle relevanten Optionen konfiguriert haben, klicken Sie auf die Schaltfläche "CREATE", um sie zu speichern. Dadurch werden die Client-ID und das Client-Geheimnis generiert, die wir später benötigen.
Schritt 2: Konfigurieren Sie die OAuth-Berechtigungsanforderungsseite
Klicken Sie auf der Seite auf die Option "OAuth consent screen" in der linken Seitenleiste, um eine Anwendung zu erstellen.
Konfigurieren Sie den OAuth-Zustimmungsbildschirm
Füllen Sie auf dieser Seite die grundlegenden Informationen der Anwendung aus, z. B. den Namen, die E-Mail-Adresse und die Domain. Diese Seiteninformationen werden in dem Popup-Autorisierungsanmeldefeld angezeigt, das dem Endbenutzer helfen kann zu verstehen, wer Sie sind und wie er Sie kontaktieren kann.
Konfigurieren Sie als Nächstes die Bereiche. Gehen Sie zum nächsten Schritt und wählen Sie die Berechtigungen aus, auf die Sie zugreifen möchten, und speichern Sie sie dann.
Sie können auch ein Testkonto hinzufügen, bei dem es sich um ein E-Mail-Konto handelt, das sich vor dem offiziellen Start mit OAuth 2.0 anmelden kann, mit einer Begrenzung von bis zu 100 zugelassenen Benutzern.
Nachdem Sie die obige Konfiguration abgeschlossen haben, können wir offiziell in den Hauptablauf der OAuth 2.0-Autorisierung eintreten.
Schritt 3: Erhalten Sie das Zugriffstoken
Sobald die ersten und zweiten Schritte abgeschlossen sind, können wir das Zugriffstoken anfordern. Um diesen Schritt zu demonstrieren, verwenden wir Apidog, ein hervorragendes Tool für das Debugging und die Verwaltung von APIs. Sie können das Token direkt in Apidog abrufen.
Die wichtigsten Funktionen von Apidog bei der Implementierung des Google OAuth 2.0-Anmeldeablaufs:
- Vereinfachte Konfiguration: Apidog bietet eine zentralisierte Konfigurationsschnittstelle, mit der Entwickler einfach die Client-ID, die Weiterleitungs-URL und andere Schlüsselparameter eingeben können, ohne komplexe Autorisierungsanforderungs-URLs manuell erstellen zu müssen.
- Intelligente Auswahl des Autorisierungsmodus: Apidog unterstützt die automatische Identifizierung des Autorisierungsmodus von Google und bietet die Möglichkeit, den Implicit Grant-Modus auszuwählen, wodurch der Aufwand für den Wechsel zwischen verschiedenen Autorisierungsmodi entfällt.
- Token-Abruf mit einem Klick: Apidog kann Entwickler durch den gesamten Autorisierungsablauf führen und das Zugriffstoken automatisch abrufen, wodurch die Schwierigkeit des Token-Abrufs erheblich reduziert wird.
- Automatische Token-Verwaltung: Apidog fügt das abgerufene Zugriffstoken automatisch dem Anforderungsheader oder den Abfrageparametern hinzu, ohne dass der Entwickler die Token-Übertragung manuell verarbeiten muss.
- Nahtloser Ressourcenzugriff: Mit dem von Apidog bereitgestellten Zugriffstoken können Entwickler es direkt verwenden, um auf die offenen Ressourcen von Google zuzugreifen, ohne dass eine zusätzliche komplexe Autorisierung erforderlich ist.
Erstellen Sie in Apidog ein neues HTTP-Projekt, erstellen Sie dann eine neue Anfrage und wählen Sie die Option "Edit Document -> Auth -> OAuth 2.0".
Wählen Sie den Autorisierungsmodus "Implicit", da Google "OAuth 2.0 for Client-side Web Applications" den Implicit Grant verwendet.
Geben Sie die Client-ID und die Weiterleitungs-URL ein. Die Google OAuth 2.0-Dienstparameter, die Sie im ersten Schritt konfiguriert haben.
Abrufen eines Zugriffstokens
Gemäß der offiziellen Google-Dokumentation lautet die URL für die Anforderung eines Zugriffstokens:
https://accounts.google.com/o/oauth2/v2/auth
Sie können diese Adresse in das Eingabefeld "Auth URL" eingeben.
Die offizielle Google-Dokumentation erfordert auch, dass zusätzliche Parameter im URL-Pfad enthalten sind, z. B.:
https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
include_granted_scopes=true&
response_type=token&
state=state_parameter_passthrough_value&
redirect_uri=https%3A//oauth2.example.com/code&
client_id=client_id
Hinweis: In tatsächlichen Anwendungen sind keine Zeilenumbrüche erforderlich.
In Apidog ist dies jedoch im Allgemeinen nicht erforderlich, da die erforderlichen Parameter separat in anderen Optionen konfiguriert wurden.
Wenn Sie sie konfigurieren möchten, können Sie auf das Symbol neben der "Auth URL" klicken, um sie zu konfigurieren, oder auf "Mehr" klicken, um andere Konfigurationselemente zu erweitern, z. B. den Wert openid zum "Scope" hier hinzufügen, der die im "Schritt 2" oben ausgewählte Berechtigung ist.
Nachdem alle oben genannten Konfigurationselemente festgelegt wurden, können Sie auf die Schaltfläche "Token abrufen" klicken, um das Token abzurufen. Wenn Sie nach dem Klicken zum ersten Mal angemeldet sind, wird ein Fenster angezeigt, in dem Sie sich autorisieren können, und Sie können die Informationen ausfüllen.
Nachdem Sie den Benutzernamen und das Passwort eingegeben haben, erhalten Sie möglicherweise einen SMS-Verifizierungscode, um Ihr Konto zu verifizieren, oder Sie können das Konto direkt verknüpfen und das Zugriffstoken abrufen.
Sobald die Autorisierung abgeschlossen ist, wird das Zugriffstoken automatisch abgerufen und auf der Seite angezeigt, und auch andere von Google zurückgegebene Informationen werden analysiert und angezeigt.
Schritt 4: Zugriff auf offene Ressourcen basierend auf dem Token
Mit dem abgerufenen Zugriffstoken können Sie es jetzt verwenden, um auf die offenen Ressourcen von Google zuzugreifen. Sie können alle verfügbaren Google APIs und ihre Berechtigungsbereiche im OAuth 2.0 Playground erkunden.
Beim Senden von Anfragen fügt Apidog das Token automatisch dem Authorization-Header als Bearer-Token an. Wenn Sie das Token in die URL aufnehmen möchten, können Sie die Option "Token Add Position" in den Apidog-Einstellungen in "Query Params" ändern.
Fazit
Zusammenfassend lässt sich sagen, dass die Implementierung der Google OAuth 2.0-Anmeldung aus vier Hauptschritten besteht. Zuerst müssen Sie in Schritt 1 die Client-ID und die Weiterleitungs-URL konfigurieren, um die OAuth 2.0-Anmeldeinformationen zu erhalten. Dann müssen Sie in Schritt 2 den Umfang der Zugriffsberechtigungen bestimmen und eine Anwendung erstellen, die die relevanten Informationen konfiguriert, einschließlich der zugänglichen Berechtigungen und Testkonten.
Als Nächstes können Sie in Schritt 3 das Zugriffstoken mithilfe eines Tools wie Apidog über die Token-Anforderung abrufen. Schließlich können Sie in Schritt 4 das abgerufene Zugriffstoken verwenden, um auf die offenen Ressourcen von Google zuzugreifen.