Google OAuth 2-Autorisierung - Fehler: redirect_uri_mismatch

Question

Auf der Website https://code.google.com/apis/console Ich habe meine Anwendung registriert, generierte Kunden-ID: y Geheimnis des Kunden zu meiner App und versuchte, sich mit Google anzumelden. Leider bekam ich die Fehlermeldung:

Error: redirect_uri_mismatch
The redirect URI in the request: http://127.0.0.1:3000/auth/google_oauth2/callback did not match a registered redirect URI

scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email
response_type=code
redirect_uri=http://127.0.0.1:3000/auth/google_oauth2/callback
access_type=offline
approval_prompt=force
client_id=generated_id

Was bedeutet diese Meldung, und wie kann ich sie beheben? Ich verwende den Edelstein omniauth-google-oauth2 .

Answer 1

1.Sie würden einen Fehler wie diesen sehen

2.dann sollten Sie auf Details anfordern

Danach müssen Sie diese Url kopieren und Folgendes hinzufügen https://console.cloud.google.com/

3. gehen zu https://console.cloud.google.com/

4. Klicken Sie auf Menü -> API & Dienste -> Anmeldeinformationen

5. sehen Sie ein Dashboard wie dieses, klicken Sie auf OAuth Client bearbeiten

6. jetzt in Authorized Javascript Origins y Authorized redirect URLS fügen Sie die Url hinzu, die den Fehler angezeigt hat redirect_uri_mismatch d.h. hier ist es http://algorithammer.herokuapp.com also habe ich das an beiden Stellen in Authorized Javascript Origins y Authorized redirect URLS

7. Klicken Sie auf "Speichern" und warten Sie 5 Minuten, bevor Sie erneut versuchen, sich einzuloggen.

Answer 2

Achten Sie darauf, das Protokoll "http://" oder "https://" zu überprüfen, da Google das Protokoll ebenfalls überprüft. Besser ist es, beide URLs in die Liste aufzunehmen.

Answer 3

Es scheint ziemlich seltsam und ärgerlich zu sein, dass es keine "eine" Lösung gibt. für mich http://localhost:8000 hat nicht geklappt, aber http://localhost:8000/ ausgearbeitet.

Answer 4

Diese Antwort ist identisch mit diese Antwort von Mike y Jeffs Antwort beide Sätze redirect_uri a postmessage auf der Client-Seite. Ich möchte mehr über die Serverseite hinzufügen, und auch die besonderen Umstände, die für diese Konfiguration gelten.

Technischer Stapel

Backend

• Python 3.6
• Django 1.11
• Django REST Framework 3.9 Server als API, keine Rendering-Vorlage, auch sonst nicht viel zu tun.
• Django REST Framework JWT 1.11
• Django REST Social Auth < 2.1

Frontend

• Reagieren Sie : 16.8.3, create-react-app Version 2.1.5
• react-google-login : 5.0.2

Der "Code"-Fluss (speziell für Google OAuth2)

Zusammenfassung: React --> request social auth "code" --> request jwt token, um den "login"-Status in Bezug auf Ihren eigenen Backend-Server/Datenbank zu erhalten.

1. Frontend (React) verwendet eine "Google-Anmeldeschaltfläche" mit responseType="code" um einen Autorisierungscode zu erhalten. (Es ist nicht Token, nicht Zugriffstoken!)
   • Die Google-Anmeldeschaltfläche ist von react-google-login oben erwähnt.
   • Wenn Sie auf die Schaltfläche klicken, öffnet sich ein Popup-Fenster, in dem der Benutzer ein Konto auswählen kann. Nachdem der Benutzer ein Konto ausgewählt und das Fenster geschlossen hat, erhalten Sie den Code aus der Callback-Funktion der Schaltfläche.
2. Das Frontend sendet dies an den JWT-Endpunkt des Backend-Servers.
   • POST-Anfrage, mit { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" }
3. Für meinen Django-Server verwende ich Django REST Framework JWT + Django REST Social Auth. Django empfängt den Code vom Frontend und verifiziert ihn mit dem Google-Dienst (für Sie erledigt). Sobald er verifiziert ist, sendet er den JWT (das Token) zurück an das Frontend. Das Frontend kann nun das Token auslesen und irgendwo speichern.
   • Alle von REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI , REST_SOCIAL_DOMAIN_FROM_ORIGIN y REST_SOCIAL_OAUTH_REDIRECT_URI in Djangos settings.py sind unnötig . (Sie sind Konstanten, die von Django REST Social Auth verwendet werden) Kurz gesagt, Sie müssen in Django nichts einrichten, was mit der Umleitungsurl zusammenhängt . Die "redirect_uri": "postmessage" im React-Frontend ausreichen. Das macht Sinn, weil die Social-Authentifizierungsarbeit, die Sie auf Ihrer Seite machen müssen, eine POST-Anfrage im Ajax-Stil im Frontend ist, ohne dass ein Formular eingereicht wird, so dass standardmäßig keine Umleitung stattfindet. Das ist der Grund, warum die Umleitungsurl nutzlos wird, wenn Sie den Code + JWT-Flow verwenden, und die serverseitige Umleitungsurl-Einstellung hat keine Wirkung.
4. Die Django REST Social Auth übernimmt die Erstellung von Konten. Das bedeutet, dass es die E-Mail und den Nachnamen des Google-Kontos überprüft und feststellt, ob sie mit einem Konto in der Datenbank übereinstimmen. Wenn nicht, wird es ein Konto für Sie erstellen, mit der genauen E-Mail und Nachname. Der Benutzername wird aber etwa so lauten youremailprefix717e248c5b924d60 wenn Ihre E-Mail lautet youremailprefix@example.com . Es fügt eine zufällige Zeichenfolge an, um einen eindeutigen Benutzernamen zu erstellen. Dies ist das Standardverhalten, ich glaube, Sie können es anpassen und sich in der Dokumentation umsehen.
5. Das Frontend speichert dieses Token und wenn es CRUD mit dem Backend-Server durchführen muss, insbesondere Erstellen/Löschen/Aktualisieren, wenn Sie das Token in Ihrem Authorization Header und senden Sie die Anfrage an das Backend. Das Django-Backend erkennt nun, dass es sich um einen Login handelt, d.h. um einen authentifizierten Benutzer. Wenn Ihr Token abläuft, müssen Sie es natürlich durch eine weitere Anfrage aktualisieren.

Ach du meine Güte, ich habe mehr als 6 Stunden damit verbracht und es endlich geschafft! Ich glaube, das ist das 1. Mal, dass ich das gesehen habe postmessage Sache. Jeder, der an einem Django + DRF + JWT + Social Auth + React Die Kombination wird auf jeden Fall einschlagen. Ich kann nicht glauben, dass keiner der Artikel da draußen erwähnt dies außer Antworten hier. Aber ich hoffe wirklich, dass dieser Beitrag können Sie Tonnen von Zeit sparen, wenn Sie die Django + React-Stack verwenden.

Answer 5

In meinem Fall ist meine Anmeldedaten-Anwendungsart "Sonstige". Ich kann also nicht finden Authorized redirect URIs auf der Seite mit den Anmeldeinformationen. Es scheint unter Anwendungstyp: "Webanwendung" zu erscheinen. Aber Sie können auf die Download JSON Taste, um die client_secret.json Datei.

Öffnen Sie die json-Datei, und Sie können den Parameter wie folgt finden: "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"] . Ich wähle die Verwendung http://localhost und bei mir funktioniert es einwandfrei.