Sul sito web https://code.google.com/apis/console ho registrato la mia domanda, impostato l' ID cliente generato e il segreto cliente sulla mia app e ho provato ad accedere con Google. Sfortunatamente, ho ricevuto il messaggio di errore:

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

Cosa significa questo messaggio e come posso risolverlo? Uso la gemma omniauth-google-oauth2 .

L'URI di reindirizzamento (dove viene restituita la risposta) deve essere registrato nella console delle API e l'errore indica che non l'hai fatto o non l'hai fatto correttamente.

Vai alla console per il tuo progetto e cerca in Accesso API. Dovresti vedere il tuo client IDe client secretlì, insieme a un elenco di URI di reindirizzamento. Se l'URI desiderato non è elencato, fai clic su modifica impostazioni e aggiungi l'URI all'elenco.

EDIT: (da un commento molto apprezzato di seguito) Nota che l'aggiornamento della console di api di google e la modifica presente possono richiedere del tempo. Generalmente solo pochi minuti ma a volte sembra più lungo.

Nel mio caso era wwwe non-wwwURL. Il sito effettivo aveva l' wwwURL e gli URI di reindirizzamento autorizzati nella Console per gli sviluppatori di Google avevano l' non-wwwURL. Quindi, non c'era corrispondenza nell'URI di reindirizzamento. L'ho risolto aggiornando Authorized Redirect URIsnella Console per gli sviluppatori di Google l' wwwURL.

Altre non corrispondenti dell'URI sono:

• Utilizzo http://negli URI di reindirizzamento autorizzati e https://come URL effettivo o viceversa
• Uso della barra finale ( http://example.com/) negli URI di reindirizzamento autorizzati e non utilizzo della barra finale ( http://example.com) come URL effettivo o viceversa

Ecco le schermate passo-passo della Console per gli sviluppatori di Google in modo che sia utile per coloro che hanno difficoltà a individuare la pagina della console per gli sviluppatori per aggiornare gli URI di reindirizzamento.

1. Vai a https://console.developers.google.com

2. Seleziona il tuo progetto

3. Fai clic sull'icona del menu

4. Clicca sul API Managermenu

5. Clicca sul Credentialsmenu E sotto OAuth 2.0 Client IDstroverai il nome del tuo cliente. Nel mio caso, lo è Web Client 1. Fai clic su di esso e apparirà un popup in cui puoi modificare l' origine Javascript autorizzata e gli URI di reindirizzamento autorizzati .

Ecco un articolo di Google sulla creazione di ID progetto e client .

Se stai usando il pulsante javascript di Google+ , devi utilizzare postmessageinvece l'URI effettivo. Mi ci è voluto quasi tutto il giorno per capirlo dal momento che i documenti di Google non lo dichiarano chiaramente per qualche motivo.

In qualsiasi flusso in cui è stato recuperato un codice di autorizzazione sul lato client, ad esempio l' GoogleAuth.grantOfflineAccess()API , e ora si desidera passare il codice al server, riscattarlo e archiviare i token di accesso e aggiornamento, quindi è necessario utilizzare la stringa letterale postmessageinvece di redirect_uri.

Ad esempio, basandosi sullo snippet nel documento Ruby :

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"}

L'unica documentazione di Google a menzionare anche postmessagequesto vecchio documento di accesso a Google+ . Ecco uno screenshot e un link all'archivio poiché G + sta chiudendo e questo link probabilmente andrà via:

È assolutamente imperdonabile che la pagina del documento per l'accesso offline non ne faccia menzione. #FacePalm

Per la mia applicazione web ho corretto il mio errore scrivendo

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

Assicurati di controllare il protocollo "http: //" o "https: //" come anche Google controlla il protocollo. Meglio aggiungere entrambi gli URL nell'elenco.

Sembra abbastanza strano e fastidioso che non ci sia "una" soluzione. per me http: // localhost: 8000 non ha funzionato ma http: // localhost: 8000 / ha funzionato.

Quando registri la tua app su https://code.google.com/apis/console e crei un ID cliente, hai la possibilità di specificare uno o più URI di reindirizzamento. Il valore del redirect_uriparametro nell'URI di autenticazione deve corrispondere esattamente a uno di essi.

Questa risposta è uguale la risposta di questo Mike , e la risposta di Jeff , entrambi i set redirect_uria postmessagesul lato client. Voglio aggiungere altro sul lato server e anche la circostanza speciale che si applica a questa configurazione.

Tech Stack

backend

• Python 3.6
• Django 1.11
• Django REST Framework 3.9 : server come API, non modello di rendering, non fare molto altrove.
• Django REST Framework JWT 1.11
• Django REST Social Auth <2.1

Fine frontale

• Reagire : 16.8.3, create-react-appversione 2.1.5
• reazioni-google-login : 5.0.2

Il flusso "Codice" (in particolare per Google OAuth2)

Riepilogo: Reagisci -> richiedi "codice" dell'autenticazione sociale -> richiedi il token jwt per acquisire lo stato "login" in termini di server / database back-end.

1. Frontend (React) utilizza un "pulsante di accesso a Google" responseType="code"per ottenere un codice di autorizzazione. (non è un token, non un token di accesso!)
   • Il pulsante di accesso a google è react-google-loginmenzionato sopra.
   • Fare clic sul pulsante per visualizzare una finestra popup per consentire all'utente di selezionare l'account. Dopo che l'utente ne ha selezionato uno e la finestra si chiude, otterrai il codice dalla funzione di richiamata del pulsante.
2. Frontend invia questo all'endpoint JWT del server back-end.
   • Richiesta POST, con { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" }
3. Per il mio server Django utilizzo Django REST Framework JWT + Django REST Social Auth. Django riceve il codice dal frontend, verificalo con il servizio di Google (fatto per te). Una volta verificato, invierà JWT (il token) al frontend. Il frontend ora può raccogliere il token e conservarlo da qualche parte.
   • Tutti REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGINe REST_SOCIAL_OAUTH_REDIRECT_URIin di Django settings.pysono inutili . (Sono costanti utilizzate da Django REST Social Auth) In breve, non è necessario impostare nulla di correlato all'URL di reindirizzamento in Django . Il "redirect_uri": "postmessage"frontend in React è sufficiente. Questo ha senso perché il lavoro di autenticazione sociale che devi fare dalla tua parte è tutta una richiesta POST in stile Ajax in frontend, che non invia alcun modulo, quindi in realtà non si verifica alcun reindirizzamento di default. Ecco perché l'URL di reindirizzamento diventa inutile se si utilizza il flusso code + JWT e l'impostazione dell'URL di reindirizzamento sul lato server non ha alcun effetto.
4. Django REST Social Auth gestisce la creazione dell'account. Ciò significa che controllerà l'e-mail / cognome dell'account google e vedrà se corrisponde a qualsiasi account nel database. In caso contrario, ne creerà uno per te, utilizzando l'e-mail esatta e il cognome. Ma il nome utente sarà simile a quello della youremailprefix717e248c5b924d60tua email youremailprefix@example.com. Aggiunge una stringa casuale per creare un nome utente univoco. Questo è il comportamento predefinito, credo che tu possa personalizzarlo e sentirti libero di scavare nella loro documentazione.
5. Il frontend archivia quel token e quando deve eseguire CRUD sul server back-end, in particolare creare / eliminare / aggiornare, se si collega il token Authorizationnell'intestazione e si invia una richiesta al back-end, il back-end di Django ora lo riconoscerà come un login, ovvero autenticato utente. Naturalmente, se il token scade, è necessario aggiornarlo facendo un'altra richiesta.

Oh mio Dio, ho trascorso più di 6 ore e finalmente ho capito bene! Credo che sia la prima volta che vedo questa postmessagecosa. Chiunque lavori su una Django + DRF + JWT + Social Auth + Reactcombinazione si imbatterà sicuramente in questo. Non riesco a credere che nessuno dell'articolo là fuori menzioni questo tranne le risposte qui. Ma spero davvero che questo post possa farti risparmiare un sacco di tempo se usi lo stack Django + React.

15 luglio 2015 - il login che stava funzionando la scorsa settimana con questo script all'accesso

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

ha smesso di funzionare e ha iniziato a causare l'errore 400 con Error: redirect_uri_mismatch

e nella sezione DETTAGLI: redirect_uri=storagerelay://...

l'ho risolto cambiando in:

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

Elenco di controllo:

• httpo https?
• &o &?
• barra finale ( /) o aperta ?
• (CMD/CTRL)+F, cerca la corrispondenza esatta nella pagina delle credenziali. Se non trovato, cerca quello mancante.
• Attendi fino a quando Google lo aggiorna. Può accadere ogni mezz'ora se si cambia frequentemente o potrebbe rimanere in piscina. Per il mio caso è stata quasi mezz'ora per avere effetto.

Nel mio caso, il mio tipo di applicazione credenziale è "Altro". Quindi non riesco a trovare Authorized redirect URIsnella pagina delle credenziali. Sembra apparire in Tipo di applicazione: "Applicazione Web". Ma puoi fare clic sul Download JSONpulsante per ottenere il client_secret.jsonfile.

Aprire il file JSON, e si può trovare il parametro in questo modo: "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. Ho scelto di utilizzare http: // localhost e funziona bene per me.

L'URL di reindirizzamento fa distinzione tra maiuscole e minuscole.

Nel mio caso ho aggiunto entrambi: http: // localhost: 5023 / AuthCallback / IndexAsync http: // localhost: 5023 / authcallback / indexasync

Nessuna delle soluzioni sopra ha funzionato per me. sotto ha fatto

cambia gli URL di reindirizzamento autorizzati in - https: // localhost: 44377 / signin-google

Spero che questo aiuti qualcuno.

attenzione agli extra /alla fine dell'URL http://localhost:8000è diverso dahttp://localhost:8000/

Utenti di Rails (dai documenti omniauth-google-oauth2 ):

Correzione della mancata corrispondenza del protocollo per redirect_uri in Rails

Basta impostare full_host in OmniAuth in base a Rails.env.

# config / initializer / omniauth.rb

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

RICORDA: non includere il "/" finale

Se usi questo tutorial: https://developers.google.com/identity/sign-in/web/server-side-flow allora dovresti usare "postmessage".

In GO questo risolto il problema:

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

per me è stato perché nell'elenco "URI di reindirizzamento autorizzato" ho inserito erroneamente https://developers.google.com/oauthplayground/anziché https://developers.google.com/oauthplayground(senza /alla fine).

Vorrei completare la risposta di @ Bazyl: nel messaggio che ho ricevuto, hanno menzionato l'URI "http://localhost:8080/" (che, ovviamente, sembra una configurazione interna di Google). Ho cambiato l'URI autorizzato per quello "http://localhost:8080/", e il messaggio non è più apparso ... E il video è stato caricato ... La documentazione di APIS è MOLTO zoppa ... Ogni volta che ho qualcosa che funziona con Google Apis, semplicemente mi sento "fortunato", ma manca una buona documentazione a riguardo .... :( Sì, l'ho fatto funzionare, ma non capisco ancora né perché abbia fallito, né perché abbia funzionato ... C'era solo UNO posto per confermare l'URI nel web, e questo è stato copiato nel client_secrets.json ... Non capisco se c'è un TERZO posto dove si dovrebbe scrivere lo stesso URI ... Trovo non solo la documentazione ma anche il Progettazione della GUI di Google "

Chiunque abbia difficoltà a trovare dove impostare gli URL di reindirizzamento nella nuova console: API e autenticazione -> Credenziali -> ID client OAuth 2.0 -> Fare clic sul collegamento per trovare tutti gli URL di reindirizzamento

Avevo bisogno di creare un nuovo ID cliente in API e servizi -> Credenziali -> Crea credenziali -> OAuth -> Altro

Quindi ho scaricato e utilizzato client_secret.json con il mio programma da riga di comando che si sta caricando sul mio account YouTube. Stavo cercando di utilizzare un ID client OAuth per app Web che mi dava l'errore URI di reindirizzamento nel browser.

Prova a fare questi controlli:

1. ID pacchetto nella console e nell'applicazione. Preferisco impostare l'ID pacchetto dell'applicazione come questo "org.peredovik. $ {PRODUCT_NAME: rfc1034identifier}"
2. Controlla se hai aggiunto i tipi di URL nella scheda Informazioni digita semplicemente il tuo ID pacchetto in Identificatore e Schemi URL, ruolo impostato su Editor
3. Nella console di cloud.google.com "API e autenticazione" -> "Schermata di consenso" compilare il modulo relativo all'applicazione. Il campo "Nome prodotto" è obbligatorio.

Godere :)

Nel mio caso ho dovuto verificare il tipo di ID client per le applicazioni Web / installate.

applicazioni installate: http: // localhost [Redirect URIs] In questo caso localhost funziona semplicemente

applicazioni Web: è necessario un nome di dominio valido [Reindirizzare URI:]

Quello che devi fare è tornare alla tua Console per gli sviluppatori e andare su API e Aut> Schermata di consenso e compilarlo. In particolare, il nome del prodotto.

Non dimenticare di includere il percorso dopo il tuo dominio e IP. Nel mio caso, ho dimenticato:

/ oauth2callback

Ho avuto due URI di richiesta nella console, http: // xxxxx / client / api / foglio di calcolo / authredirect e http: // localhost .

Ho provato tutte le risposte migliori a questa domanda e ho confermato che nessuno di loro era il mio problema.

Ho rimosso localhost dalla console, ho aggiornato client_secret.json nel mio progetto e l'errore di mancata corrispondenza è scomparso.

Ho avuto lo stesso problema con l'accesso a Google, stavo per togliermi i capelli !!! Avevo inserito correttamente i miei callback nel pannello Credenziali di Google nella console per gli sviluppatori di Google qui c'erano i miei URL di reindirizzamento:

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

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

https://www.example.com/oauth2callback

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

tutto sembra a posto, vero? ma non ha funzionato fino a quando non ho aggiunto un altro URL magico che ho aggiunto signin-google url (che è callback predefinito di google) senza www e il problema è stato risolto.

prenderlo in considerazione (a seconda del dominio) potrebbe essere necessario o meno dover aggiungere entrambi con e senza URL www

Ho un'app front-end e un'API back-end.

Dal mio server back-end stavo testando colpendo google api e stavo affrontando questo errore. Durante tutto il mio tempo mi chiedevo perché avrei dovuto dare redirect_uridato che questo è solo il backend, perché il frontend ha senso.

Quello che stavo facendo era dare un redirect_uriserver diverso (anche se valido) dal server (supponendo che questo sia solo un segnaposto, deve solo essere registrato su google) ma l'URL del mio frontend che ha creato il codice token era diverso. Quindi, quando stavo passando questo codice nel mio test lato server (per il quale redirect-uri era diverso), stavo affrontando questo errore.

Quindi non fare questo errore. Assicurati che il tuo frontend redirect_urisia uguale a quello del tuo server in quanto Google lo utilizza per convalidare l'autenticità.

Di seguito sono riportati i motivi dell'errore: si verifica il problema redirect_uri_mismatch:

1. Reindirizza il campo URL vuoto nel tuo progetto Google.
2. L'URL di reindirizzamento non corrisponde al tuo sito
3. Importante! Funzionerà solo con un dominio funzionante come example.com, book.com ecc. (Non funziona con host locale o URL LB AWS)

Consigliato di utilizzare l'URL del dominio

Il trucco è inserire l'URL di reindirizzamento corretto al momento della creazione dell'ID. Ho scoperto che l'aggiornamento dell'URL di reindirizzamento una volta che l'ID è stato creato tramite un 'Modifica' non fa semplicemente il lavoro. Ciò che ha funzionato anche per me è duplicare l'intera cartella "fornitore" e copiarla nella stessa posizione in cui si trova il file "oauth" (fino a quando non si genera correttamente il token e quindi è possibile eliminare la cartella duplicata "fornitore"). Questo perché cercare di puntare alla cartella del fornitore tramite '../vendor/autoload' non ha funzionato per me.

Quindi, elimina il tuo problematico ID OAuth client esistente e prova questo approccio, funzionerà.