Auf der Website https://code.google.com/apis/console habe ich meine Anwendung registriert, die generierte Client-ID und das Client-Geheimnis für meine App eingerichtet und versucht, mich bei Google anzumelden. Leider habe ich die Fehlermeldung bekommen:

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 Nachricht und wie kann ich sie beheben? Ich benutze das Juwel omniauth-google-oauth2 .

Der Umleitungs-URI (an den die Antwort zurückgegeben wird) muss in der API-Konsole registriert sein, und der Fehler zeigt an, dass Sie dies nicht oder nicht richtig getan haben.

Gehen Sie zur Konsole für Ihr Projekt und suchen Sie unter API-Zugriff. Sie sollten Ihr client ID& client secretdort zusammen mit einer Liste von Umleitungs-URIs sehen. Wenn der gewünschte URI nicht aufgeführt ist, klicken Sie auf Einstellungen bearbeiten und fügen Sie den URI zur Liste hinzu.

BEARBEITEN: (Aus einem hoch bewerteten Kommentar unten) Beachten Sie, dass das Aktualisieren der Google API-Konsole und das Vorhandensein von Änderungen einige Zeit dauern kann. Im Allgemeinen nur ein paar Minuten, aber manchmal scheint es länger.

In meinem Fall war es wwwund non-wwwURL. Die tatsächliche Website hatte eine wwwURL und die URIs für autorisierte Weiterleitungen in der Google Developer Console hatten eine non-wwwURL. Daher gab es eine Nichtübereinstimmung in der Umleitungs-URI. Ich habe es gelöst, indem ich Authorized Redirect URIsin der Google Developer Console auf wwwURL aktualisiert habe .

Andere häufige URI-Fehlanpassungen sind:

• Verwendung http://in autorisierten Umleitungs-URIs und https://als tatsächliche URL oder umgekehrt
• Verwenden von abschließendem Schrägstrich ( http://example.com/) in URIs für autorisierte Umleitungen und nicht von abschließendem Schrägstrich ( http://example.com) als tatsächliche URL oder umgekehrt

Hier sind die schrittweisen Screenshots von Google Developer Console, damit es für diejenigen hilfreich ist, die Schwierigkeiten haben, die Seite der Entwicklerkonsole zu finden, um Umleitungs-URIs zu aktualisieren.

1. Gehen Sie zu https://console.developers.google.com

2. Wählen Sie Ihr Projekt aus

3. Klicken Sie auf das Menüsymbol

4. Klicken Sie auf API ManagerMenü

5. Klicken Sie auf CredentialsMenü. Und unter OAuth 2.0 Client IDsfinden Sie Ihren Kundennamen. In meinem Fall ist es Web Client 1. Klicken Sie darauf und ein Popup wird angezeigt, in dem Sie Authorized Javascript Origin und Authorized Redirect URIs bearbeiten können .

Hier ist ein Google-Artikel zum Erstellen einer Projekt- und Kunden-ID .

Wenn Sie die Google+ Javascript-Schaltfläche verwenden , müssen Sie diese verwendenpostmessage anstelle der tatsächlichen URI verwenden. Ich habe fast den ganzen Tag gebraucht, um das herauszufinden, da in den Google-Dokumenten aus irgendeinem Grund dies nicht eindeutig angegeben ist.

In jedem Ablauf, in dem Sie einen Autorisierungscode auf der Clientseite abgerufen haben , z. B. die GoogleAuth.grantOfflineAccess()API , und jetzt den Code an Ihren Server übergeben, einlösen und die Zugriffs- und Aktualisierungstoken speichern möchten, müssen Sie die Literalzeichenfolge verwenden postmessageanstelle des redirect_uri.

Bauen Sie beispielsweise auf dem Snippet im Ruby-Dokument auf :

client_secrets = Google::APIClient::ClientSecrets.load('client_secrets.json')
auth_client = client_secrets.to_authorization
auth_client.update!(
  :scope => 'profile https://www.googleapis.com/auth/drive.metadata.readonly',
  :redirect_uri => 'postmessage' # <---- HERE
)

# Inject user's auth_code here:
auth_client.code = "4/lRCuOXzLMIzqrG4XU9RmWw8k1n3jvUgsI790Hk1s3FI"
tokens = auth_client.fetch_access_token!
# { "access_token"=>..., "expires_in"=>3587, "id_token"=>..., "refresh_token"=>..., "token_type"=>"Bearer"}

Die einzige Google-Dokumentation, die überhaupt erwähnt wird postmessage ist dieses alte Google+ Anmeldedokument . Hier ist ein Screenshot und ein Archiv-Link, da G + geschlossen wird und dieser Link wahrscheinlich verschwinden wird:

Es ist absolut unverzeihlich, dass die Dokumentseite für Offline-Zugriff dies nicht erwähnt. #FacePalm

Für meine Webanwendung habe ich meinen Fehler durch Schreiben korrigiert

instead of : http://localhost:11472/authorize/
type :      http://localhost/authorize/

Stellen Sie sicher, dass Sie das Protokoll "http: //" oder "https: //" überprüfen, da Google das Protokoll ebenfalls überprüft. Fügen Sie besser beide URLs zur Liste hinzu.

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

Wenn Sie Ihre App unter https://code.google.com/apis/console registrieren und eine Client-ID erstellen, können Sie einen oder mehrere Weiterleitungs-URIs angeben. Der Wert des redirect_uriParameters in Ihrem Auth-URI muss genau mit einem von ihnen übereinstimmen.

Diese Antwort ist dieselbe wie die Antwort von Mike und Jeffs Antwort , beide Sätzeredirect_uri aufpostmessage auf Client - Seite. Ich möchte mehr über die Serverseite und die besonderen Umstände hinzufügen, die für diese Konfiguration gelten.

Tech Stack

Backend

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

Vorderes Ende

• Reagieren : 16.8.3, create-react-appVersion 2.1.5
• React-Google-Login : 5.0.2

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

Zusammenfassung: Reagieren -> Social Auth "Code" anfordern -> JWT-Token anfordern, um den "Login" -Status in Bezug auf Ihren eigenen Backend-Server / Ihre eigene Backend-Datenbank zu erhalten.

1. Frontend (React) verwendet eine "Google-Anmeldeschaltfläche" responseType="code", um einen Autorisierungscode zu erhalten. (Es ist kein Token, kein Zugriffstoken!)
   • Die Google-Anmeldeschaltfläche stammt von react-google-loginoben.
   • Klicken Sie auf die Schaltfläche, um ein Popup-Fenster aufzurufen, in dem der Benutzer ein Konto auswählen kann. Nachdem der Benutzer eine ausgewählt und das Fenster geschlossen hat, erhalten Sie den Code von der Rückruffunktion 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 das Django REST Framework JWT + Django REST Social Auth. Django erhält den Code vom Frontend. Überprüfen Sie ihn mit dem Google-Dienst (für Sie erledigt). Nach der Überprüfung wird das JWT (das Token) an das Frontend zurückgesendet. Das Frontend kann den Token jetzt ernten und irgendwo aufbewahren.
   • Alle REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGINund REST_SOCIAL_OAUTH_REDIRECT_URIin Djangos settings.pysind nicht erforderlich . (Dies sind Konstanten, die von Django REST Social Auth verwendet werden.) Kurz gesagt, Sie müssen in Django nichts im Zusammenhang mit der Umleitungs-URL einrichten . Das "redirect_uri": "postmessage"In-React-Frontend reicht aus. Dies ist sinnvoll, da die soziale Authentifizierungsarbeit, die Sie auf Ihrer Seite ausführen müssen, alle POST-Anfragen im Ajax-Stil im Frontend sind und keinerlei Formulare senden. Daher erfolgt standardmäßig keine Umleitung. Aus diesem Grund wird die Umleitungs-URL unbrauchbar, wenn Sie den Code + JWT-Flow verwenden und die Einstellung für die serverseitige Umleitungs-URL keine Auswirkungen hat.
4. Die Django REST Social Auth übernimmt die Kontoerstellung. Dies bedeutet, dass die E-Mail-Adresse / der Nachname des Google-Kontos überprüft wird und festgestellt wird, ob sie mit einem Konto in der Datenbank übereinstimmt. Wenn nicht, wird eine für Sie erstellt, wobei die genaue E-Mail-Adresse und der Vorname verwendet werden. Der Benutzername ist jedoch ungefähr so, als youremailprefix717e248c5b924d60ob Ihre E-Mail-Adresse lautet [email protected]. Es wird eine zufällige Zeichenfolge angehängt, um einen eindeutigen Benutzernamen zu erstellen. Dies ist das Standardverhalten. Ich glaube, Sie können es anpassen und sich in die Dokumentation vertiefen.
5. Das Frontend speichert dieses Token und wenn es CRUD auf dem Backend-Server ausführen muss, insbesondere erstellen / löschen / aktualisieren, wenn Sie das Token in Ihrem AuthorizationHeader anhängen und eine Anfrage an das Backend senden, erkennt das Django-Backend dies nun als Login, dh authentifiziert Benutzer. Wenn Ihr Token abläuft, müssen Sie es natürlich aktualisieren, indem Sie eine weitere Anfrage stellen.

Oh mein Gott, ich habe mehr als 6 Stunden verbracht und endlich das richtig verstanden! Ich glaube, dies ist das erste Mal, dass ich dieses postmessageDing gesehen habe. Jeder, der an einer Django + DRF + JWT + Social Auth + ReactKombination arbeitet, wird definitiv darauf stoßen. Ich kann nicht glauben, dass keiner der Artikel dies erwähnt, außer den Antworten hier. Aber ich hoffe wirklich, dass dieser Beitrag Ihnen viel Zeit sparen kann, wenn Sie den Django + React-Stack verwenden.

2015Juli15 - die Anmeldung, die letzte Woche mit diesem Skript beim Anmelden gearbeitet hat

<script src="https://apis.google.com/js/platform.js" async defer></script>

hat aufgehört zu arbeiten und Fehler 400 mit verursacht Error: redirect_uri_mismatch

und im Abschnitt DETAILS: redirect_uri=storagerelay://...

Ich habe es gelöst, indem ich zu:

<script src="https://apis.google.com/js/client:platform.js?onload=startApp"></script>

Checkliste:

• httpoder https?
• &oder &?
• abschließender Schrägstrich ( /) oder offen ?
• (CMD/CTRL)+FSuchen Sie auf der Seite mit den Anmeldeinformationen nach der genauen Übereinstimmung. Wenn nicht gefunden, suchen Sie nach dem fehlenden.
• Warten Sie, bis Google es aktualisiert. Kann in jeder halben Stunde auftreten, wenn Sie häufig wechseln, oder es kann im Pool bleiben. Für meinen Fall war es fast eine halbe Stunde, um wirksam zu werden.

In meinem Fall lautet mein Anmeldeinformationstyp "Andere". Ich kann es also nicht Authorized redirect URIsauf der Seite mit den Anmeldeinformationen finden. Es scheint im Anwendungstyp "Webanwendung" zu erscheinen. Sie können jedoch auf die Download JSONSchaltfläche klicken , um die client_secret.jsonDatei abzurufen.

Öffnen Sie die JSON-Datei, und Sie finden den Parameter wie folgt : "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. Ich benutze http: // localhost und es funktioniert gut für mich.

Bei der Weiterleitungs-URL wird zwischen Groß- und Kleinschreibung unterschieden.

In meinem Fall habe ich beide hinzugefügt: http: // localhost: 5023 / AuthCallback / IndexAsync http: // localhost: 5023 / authcallback / indexasync

Keine der oben genannten Lösungen hat bei mir funktioniert. unten tat

Ändern Sie autorisierte Redirect-URLs in - https: // localhost: 44377 / signin-google

Hoffe das hilft jemandem.

Vorsicht vor dem Extra /am Ende der URL http://localhost:8000unterscheidet sich vonhttp://localhost:8000/

Rails-Benutzer (aus den Dokumenten omniauth-google-oauth2 ):

Behebung einer Protokollfehlanpassung für redirect_uri in Rails

Stellen Sie einfach den full_host in OmniAuth basierend auf Rails.env ein.

# config / initializers / omniauth.rb

OmniAuth.config.full_host = Rails.env.production? ? ' https://domain.com ': ' http: // localhost: 3000 '

ERINNERN SIE SICH: Fügen Sie nicht das nachfolgende "/" ein.

Wenn Sie dieses Tutorial verwenden: https://developers.google.com/identity/sign-in/web/server-side-flow , sollten Sie "postmessage" verwenden.

In GO wurde das Problem behoben:

confg = &oauth2.Config{
        RedirectURL:  "postmessage",
        ClientID:   ...,
        ClientSecret: ...,
        Scopes:      ...,
        Endpoint:     google.Endpoint,
}

Für mich lag es daran, dass ich in der Liste "Autorisierte Weiterleitungs-URIs" falsch https://developers.google.com/oauthplayground/statt https://developers.google.com/oauthplayground(ohne /am Ende) eingefügt habe .

Lassen Sie mich die Antwort von @ Bazyl vervollständigen: In der Nachricht, die ich erhalten habe, wurde der URI erwähnt "http://localhost:8080/" (was natürlich eine interne Google-Konfiguration zu sein scheint). Ich habe den autorisierten URI für diesen geändert "http://localhost:8080/"und die Nachricht wurde nicht mehr angezeigt ... Und das Video wurde hochgeladen ... Die APIS-Dokumentation ist SEHR lahm ... Jedes Mal, wenn ich etwas habe, das mit Google Apis funktioniert, habe ich einfach fühle mich "glücklich", aber es gibt einen Mangel an guter Dokumentation darüber .... :( Ja, ich habe es zum Laufen gebracht, aber ich verstehe noch nicht, warum es fehlgeschlagen ist oder warum es funktioniert hat ... Es gab nur EINEN Ort, um den URI im Web zu bestätigen, und er wurde in client_secrets.json kopiert ... Ich verstehe nicht, ob es einen DRITTEN Ort gibt, an dem man denselben URI schreiben sollte ... Ich finde nicht nur die Dokumentation, sondern auch die GUI-Design von Google '

Jeder, der Schwierigkeiten hat, herauszufinden, wo Umleitungs-URLs in der neuen Konsole festgelegt werden sollen: APIs & Authentifizierung -> Anmeldeinformationen -> OAuth 2.0-Client-IDs -> Klicken Sie auf den Link, um alle Ihre Weiterleitungs-URLs zu finden

Ich musste eine neue Client-ID unter APIs & Services -> Anmeldeinformationen -> Anmeldeinformationen erstellen -> OAuth -> Andere erstellen

Dann habe ich die Datei client_secret.json heruntergeladen und mit meinem Befehlszeilenprogramm verwendet, das auf mein YouTube-Konto hochgeladen wird. Ich habe versucht, eine Web App OAuth-Client-ID zu verwenden, die mir den Umleitungs-URI-Fehler im Browser gab.

Versuchen Sie, diese Überprüfungen durchzuführen:

1. Bundle-ID in der Konsole und in Ihrer Anwendung. Ich bevorzuge es, die Bundle-ID der Anwendung wie folgt festzulegen: "org.peredovik. $ {PRODUCT_NAME: rfc1034identifier}"
2. Überprüfen Sie, ob Sie auf der Registerkarte "Info" URL-Typen hinzugefügt haben. Geben Sie einfach Ihre Bundle-ID in "Kennung" und "URL-Schemata" ein. Die Rolle ist auf "Editor" festgelegt
3. Füllen Sie in der Konsole unter cloud.google.com "APIs & auth" -> "Zustimmungsbildschirm" das Formular zu Ihrer Anwendung aus. Das Feld "Produktname" ist erforderlich.

Genießen :)

In meinem Fall musste ich den Client-ID-Typ für Webanwendungen / installierte Anwendungen überprüfen.

installierte Anwendungen: http: // localhost [URIs umleiten] In diesem Fall funktioniert localhost einfach

Webanwendungen: Sie benötigen einen gültigen Domainnamen [URIs umleiten:]

Was Sie tun müssen, ist, zu Ihrer Entwicklerkonsole zurückzukehren und zu APIs & Auth> Zustimmungsbildschirm zu gehen und diese auszufüllen. Insbesondere der Produktname.

Vergessen Sie nicht, den Pfad nach Ihrer Domain und IP anzugeben. In meinem Fall habe ich vergessen:

/ oauth2callback

Ich hatte zwei Anforderungs-URIs in der Konsole, http: // xxxxx / client / api / tablesheet / authredirect und http: // localhost .

Ich habe alle wichtigen Antworten auf diese Frage ausprobiert und bestätigt, dass keine davon mein Problem ist.

Ich habe localhost aus der Konsole entfernt, meine client_secret.json in meinem Projekt aktualisiert und der Fehlanpassungsfehler wurde behoben.

Ich hatte das gleiche Problem mit der Google-Anmeldung, ich wollte gerade meine Haare ziehen !!! Ich hatte meine Rückrufe im Google Credential Panel auf der Google Developer Console korrekt eingegeben. Hier waren meine Weiterleitungs-URLs:

https://www.example.com/signin-google

https://www.example.com/signin-google/

https://www.example.com/oauth2callback

https://www.example.com/oauth2callback/

alles scheint in Ordnung zu sein, oder? Aber es hat immer noch nicht funktioniert, bis ich eine weitere magische URL hinzugefügt habe. Ich habe die Anmelde-Google- URL (die standardmäßig Google-Rückruf ist) hinzugefügt, ohne dass www und das Problem gelöst wurden.

Berücksichtigen Sie dies (abhängig von Ihrer Domain). Möglicherweise müssen Sie sowohl mit als auch ohne WWW-URLs hinzufügen

Ich habe Frontend-App und Backend-API.

Von meinem Backend-Server aus habe ich getestet, indem ich auf Google API geklickt habe, und war mit diesem Fehler konfrontiert. Während meiner ganzen Zeit habe ich mich gefragt, warum ich geben mussredirect_uri da dies nur das Backend ist, denn Frontend macht Sinn.

Was ich getan habe, war, etwas anderes redirect_uri(obwohl gültig) vom Server zu geben (vorausgesetzt, dies ist nur ein Platzhalter, es muss nur bei Google registriert werden), aber meine Frontend-URL, die den Token-Code erstellt hat, war anders. Als ich diesen Code in meinen serverseitigen Tests übergab (für die Redirect-Uri anders war), trat dieser Fehler auf.

Also mach diesen Fehler nicht. Stellen Sie sicher, dass Ihr Frontend redirect_urimit dem Ihres Servers identisch ist, da Google es verwendet, um die Authentizität zu überprüfen.

Im Folgenden sind die Gründe für den Fehler aufgeführt: Das Problem redirect_uri_mismatch tritt auf:

1. URL-Feld bei Ihrem Google-Projekt leer umleiten.
2. Die Weiterleitungs-URL stimmt nicht mit Ihrer Site überein
3. Wichtig! Es funktioniert nur mit Arbeitsdomänen wie example.com, book.com usw. (funktioniert nicht mit lokalem Host oder AWS LB-URL)

Empfohlen, Domain-URL zu verwenden

Der Trick besteht darin, die richtige Umleitungs-URL zum Zeitpunkt der Erstellung der ID einzugeben. Ich habe festgestellt, dass das Aktualisieren der Weiterleitungs-URL, sobald die ID über "Bearbeiten" erstellt wurde, den Job einfach nicht erledigt. Was auch für mich funktioniert hat, ist das Duplizieren des gesamten "Vendor" -Ordners und das Kopieren an denselben Speicherort, an dem sich die "oauth" -Datei befindet (nur bis Sie das Token erfolgreich generiert haben und dann den doppelten "Vendor" -Ordner löschen können). Dies liegt daran, dass der Versuch, über '../vendor/autoload' auf den Herstellerordner zu verweisen, bei mir nicht funktioniert hat.

Löschen Sie also Ihre vorhandene problematische Client-OAuth-ID und versuchen Sie diesen Ansatz, es wird funktionieren.