Https://code.google.com/apis/console web sitesinde Uygulamamı kaydettirdim, uygulamam için oluşturulan Client ID: ve Client Secret'ı ayarladım ve Google ile giriş yapmaya çalıştım. Ne yazık ki, hata mesajını aldım:

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

Bu mesaj ne anlama geliyor ve nasıl düzeltebilirim? Gem omniauth-google-oauth2 kullanıyorum .

Yönlendirme URI'sı (yanıtın döndürüldüğü yer) API'lar konsoluna kaydedilmelidir ve hata bunu yapmadığınızı veya doğru şekilde yapmadığınızı gösterir.

Projeniz için konsola gidin ve API Erişimi bölümüne bakın. Yönlendirme URI'larının bir listesiyle birlikte client ID& client secretöğenizi de görmelisiniz . İstediğiniz URI listede yoksa, ayarları düzenle'yi tıklayın ve URI'yı listeye ekleyin.

DÜZENLEME: (Aşağıdaki yüksek oy alan bir yorumdan) Google api konsolunu güncellemenin ve mevcut değişikliğin biraz zaman alabileceğini unutmayın. Genellikle sadece birkaç dakika ama bazen daha uzun görünüyor.

Benim durumumda oldu wwwve non-wwwURL. Gerçek sitenin wwwURL'si vardı ve Google Geliştirici Konsolu'ndaki Yetkili Yönlendirme URI'lerininnon-www URL'si vardı . Bu nedenle, yönlendirme URI'sında uyumsuzluk vardı. Authorized Redirect URIsGoogle Geliştirici Konsolu'nda wwwURL'ye güncelleyerek çözdüm.

Diğer yaygın URI uyuşmazlığı:

• Kullanma http://Yetkili Yönlendirme URI'larda ve https://gerçek URL ya da tam tersi olarak
• Eğik çizgi (kullanarak http://example.com/Yetkili Yönlendirme URI'larda) ve çizgi (arka kullanmayan http://example.comgerçek URL gibi) ya da tam tersi

Yönlendirme URI'lerini güncellemek için geliştirici konsolu sayfasını bulmayı zorlaştıranlara yardımcı olması için Google Geliştirici Konsolu'nun adım adım ekran görüntüleri.

1. Https://console.developers.google.com adresine gidin.

2. Projenizi seçin

3. Menü simgesine tıklayın

4. API ManagerMenüye tıklayın

5. CredentialsMenüye tıklayın . Ve altında OAuth 2.0 Client IDs, müşteri adınızı bulacaksınız. Benim durumumda, öyle Web Client 1. Üzerine tıkladığınızda Yetkili Javascript Origin ve Yetkili yönlendirme URI'lerini düzenleyebileceğiniz bir açılır pencere görünür .

İşte proje ve müşteri kimliği oluşturma hakkında bir Google makalesi .

Eğer kullanıyorsanız Google+ javascript düğmesini , ardından kullanmak zorunda postmessageyerine gerçek URI. Google'ın dokümanları bir nedenden ötürü açıkça belirtmediği için bunu anlamak neredeyse tüm günü aldı.

İstemci tarafında API gibi bir yetkilendirme kodu aldığınız ve şimdi kodu sunucunuza iletmek, kullanmak ve erişim ve yenileme belirteçlerini depolamak istediğiniz herhangi bir akışta , değişmez dizeyi kullanmanız gerekir. redirect_uri yerine.GoogleAuth.grantOfflineAccess()postmessage

Örneğin, Ruby belgesindeki snippet'i oluşturmak :

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

Bahsetmesi postmessagegereken tek Google dokümanı , bu eski Google+ oturum açma belgesidir . G + kapanışından bu yana bir ekran görüntüsü ve arşiv bağlantısı var ve bu bağlantı büyük olasılıkla ortadan kalkacak:

Çevrimdışı Erişim için doküman sayfasının bundan bahsetmemesi kesinlikle affedilemez . #FacePalm

Web uygulamam için hatamı yazarak düzelttim

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

Google kontrol protokolü olarak "http: //" veya "https: //" protokolünü de kontrol ettiğinizden emin olun. Her iki URL'yi de listeye eklemek daha iyidir.

Bu "garip" bir çözümün bulunmaması oldukça garip ve can sıkıcı görünüyor. benim için http: // localhost: 8000 işe yaramadı ama http: // localhost: 8000 / işe yaradı.

Uygulamanızı https://code.google.com/apis/console adresinden kaydettiğinizde ve bir Müşteri Kimliği oluşturduğunuzda, bir veya daha fazla yönlendirme URI'si belirleme şansınız olur. redirect_uriKimlik doğrulama URI'nizdeki parametrenin değeri bunlardan biriyle tam olarak eşleşmelidir.

Bu cevap aynıdır bu Ahmet'in cevabı ve Jeff'in cevabı , her iki seti redirect_uriiçin postmessageistemci tarafında. Sunucu tarafı ve bu yapılandırmaya uygulanan özel durum hakkında daha fazla bilgi eklemek istiyorum.

Teknik Yığın

Arka uç

• Python 3.6
• Django 1.11
• Django REST Framework 3.9 : API olarak sunucu, şablon oluşturma değil, başka bir yerde pek bir şey yapmıyor.
• Django REST Çerçevesi JWT 1.11
• Django REST Sosyal Yetkilendirme <2.1

Başlangıç ​​aşaması

• Tepki : 16.8.3, create-react-appsürüm 2.1.5
• tepki-hakkında-giriş : 5.0.2

"Kod" Akışı (Özellikle Google OAuth2 için)

Özet: Tepki -> sosyal kimlik doğrulama "kodu" isteyin -> jwt jetonunu kendi arka uç sunucunuz / veritabanınız açısından "giriş" statüsü almasını isteyin.

1. Ön uç (React), "Google oturum açma düğmesi" responseType="code" yetkilendirme kodu almak için kullanır. (jeton değil, erişim jetonu değil!)
   • Google oturum açma düğmesi react-google-login yukarıda belirtilmiştir.
   • Düğmeyi tıkladığınızda kullanıcının hesap seçmesi için bir açılır pencere görüntülenir. Kullanıcı birini seçtikten ve pencere kapandıktan sonra, kodu düğmenin geri arama işlevinden alırsınız.
2. Ön uç bunu arka uç sunucusunun JWT uç noktasına gönderir.
   • POST isteği, ile { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" }
3. Django sunucum için Django REST Framework JWT + Django REST Social Auth kullanıyorum. Django kodu ön uçtan alır, Google'ın hizmetiyle doğrular (sizin için yapılır). Doğrulandıktan sonra, JWT'yi (jeton) ön uca geri gönderir. Frontend şimdi jetonu toplayabilir ve bir yerde saklayabilir.
   • Tüm REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGINve REST_SOCIAL_OAUTH_REDIRECT_URIDjango yıllarda settings.pygereksizdir . (Bunlar Django REST Social Auth tarafından kullanılan sabitlerdir) Kısacası, Django'daki yönlendirme URL'si ile ilgili hiçbir şey ayarlamanız gerekmez . "redirect_uri": "postmessage"İçinde ön uç toparlayıcı yanıt verin. Bu mantıklıdır, çünkü yanınızda yapmanız gereken sosyal kimlik çalışması, ön uçtaki tüm Ajax tarzı POST isteğidir, herhangi bir form göndermez, bu nedenle varsayılan olarak hiçbir yönlendirme gerçekleşmez. Bu nedenle, yönlendirme URL'si + JWT akışını kullanıyorsanız ve sunucu tarafı yönlendirme URL'si ayarının herhangi bir etkisi olmuyorsa işe yaramaz hale gelir.
4. Django REST Social Auth hesap oluşturmayı yönetir. Bu, google hesabı e-postasını / soyadını kontrol edeceği ve veritabanındaki herhangi bir hesapla eşleşip eşleşmeyeceği anlamına gelir. Değilse, tam e-postayı ve soyadını kullanarak sizin için bir tane oluşturur. Ancak, kullanıcı adı youremailprefix717e248c5b924d60e-postanız gibi bir şey olacaktır youremailprefix@example.com. Benzersiz bir kullanıcı adı oluşturmak için rastgele bir dize ekler. Bu varsayılan davranıştır, kişiselleştirebileceğiniz ve belgelerine girmekten çekinmeyin.
5. Ön uç bu belirteci depolar ve arka uç sunucusuna CRUD gerçekleştirmesi gerektiğinde, özellikle oluştur / sil / güncelle, belirteci Authorizationbaşlığınıza ekler ve arka uca istek gönderirseniz, Django arka ucu artık bunu bir giriş olarak tanıyacaktır, yani kimliği doğrulanmış kullanıcı. Elbette, jetonunuzun süresi dolarsa, başka bir istekte bulunarak yenilemeniz gerekir.

Aman tanrım, 6 saatten fazla zaman geçirdim ve sonunda bunu doğru anladım! Bu postmessageşeyi ilk gördüğüm zaman olduğuna inanıyorum . Bir Django + DRF + JWT + Social Auth + Reactkombinasyon üzerinde çalışan herkes kesinlikle buna çarpacaktır. Oradaki makalelerin hiçbirinin burada cevaplar dışında bundan bahsetmediğine inanamıyorum. Ama Django + React yığınını kullanıyorsanız bu yazının size tonlarca zaman kazandıracağını umuyorum.

Temmuz 2015 - girişte bu komut dosyasıyla geçen hafta çalışmakta olan oturum

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

çalışmayı durdurdu ve Hata 400 ile Error: redirect_uri_mismatch

ve DETAYLAR bölümünde: redirect_uri=storagerelay://...

i değiştirerek çözdü:

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

Kontrol Listesi:

• httpveya https?
• &veya &?
• sondaki eğik çizgi ( /) veya açık ?
• (CMD/CTRL)+F, kimlik bilgileri sayfasında tam eşleşmeyi arayın. Bulunamazsa eksik olanı arayın.
• Google'ın tazelemesini bekleyin. Sık sık değiştiriyorsanız yarım saatte bir meydana gelebilir veya havuzda kalabilir. Benim durumum için etkili olmak neredeyse yarım saat oldu.

Benim durumumda, kimlik bilgisi Uygulama türüm "Diğer" dir. Bu yüzden Authorized redirect URIskimlik bilgileri sayfasında bulamıyorum . Görünüşe göre Uygulama türü: "Web uygulaması". Ancak dosyayı Download JSONalmak için düğmeye tıklayabilirsiniz client_secret.json.

Json dosyasını açın ve böyle parametreyi bulabilirsiniz: "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. Ben http: // localhost kullanmayı tercih ediyorum ve benim için iyi çalışıyor.

Yönlendirme URL'si büyük / küçük harfe duyarlıdır.

Benim durumumda ikisini de ekledim: http: // localhost: 5023 / AuthCallback / IndexAsync http: // localhost: 5023 / authcallback / indexasync

Yukarıdaki çözümlerin hiçbiri benim için işe yaramadı. aşağıda yaptı

yetkili Yönlendirme URL'lerini şu şekilde değiştir - https: // localhost: 44377 / signin-google

Umarım bu birine yardımcı olur.

ekstra dikkat /url sonunda http://localhost:8000farklıdırhttp://localhost:8000/

Rails kullanıcıları ( omniauth-google-oauth2 dokümanlarından):

Rails içindeki redirect_uri için Protokol Uyuşmazlığını Düzeltme

Rails.env'ye dayanarak OmniAuth'ta full_host'u ayarlamanız yeterlidir.

# config / initializers / omniauth.rb

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

UNUTMAYIN: Sondaki "/" karakterini dahil etmeyin

Bu öğreticiyi kullanırsanız: https://developers.google.com/identity/sign-in/web/server-side-flow "postmessage" kullanmalısınız.

GO'da bu sorun giderildi:

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

'Yetkili yönlendirme URI'lerini' listesinde ben yanlış koyduk çünkü benim için öyleydi https://developers.google.com/oauthplayground/yerine https://developers.google.com/oauthplayground(olmadan /sonunda).

@ Bazyl'ın cevabını tamamlayayım: Aldığım mesajda URI'den bahsettiler "http://localhost:8080/" (elbette dahili bir google konfigürasyonu gibi görünüyor). Bunun için yetkili URI'yi değiştirdim "http://localhost:8080/"ve mesaj artık görünmedi ... Ve video yüklendi ... APIS belgeleri ÇOK topal ... Her zaman google apis ile çalışan bir şeyim olduğunda, sadece "şanslı" hissediyorum, ama bu konuda iyi bir belge eksikliği var .... :( Evet, işe yaradı, ama henüz neden başarısız olduğunu, ne işe yaradığını anlamıyorum ... Sadece bir tane vardı web'de URI onaylamak için bir yer, ve client_secrets.json kopyalandı ... Biri aynı URI yazmanız gereken bir ÜÇÜNCÜ yer varsa alamadım ... Ben ne sadece belgeleri bulmak ama aynı zamanda Google'ın GUI tasarımı

Yeni konsolda yönlendirme URL'lerinin nereye yerleştirileceğini bulmakta zorlanan herkes: API'lar ve Kimlik Doğrulaması -> Kimlik Bilgileri -> OAuth 2.0 istemci kimlikleri -> Tüm yönlendirme URL'lerinizi bulmak için bağlantıyı tıklayın

API'lar ve Hizmetler -> Kimlik Bilgileri -> Kimlik bilgileri oluştur -> OAuth -> Diğer altında yeni bir istemci kimliği oluşturmam gerekiyordu

Sonra youtube hesabımı yükleyen komut satırı programım ile client_secret.json'u indirip kullandım. Bana tarayıcıda yönlendirme URI hatası veren bir Web App OAuth istemci kimliği kullanmaya çalışıyordum.

Bu kontrolleri yapmaya çalışın:

1. Konsolda ve uygulamanızda paket kimliği. "Org.peredovik. $ {PRODUCT_NAME: rfc1034identifier}" gibi uygulamanın Paket Kimliğini ayarlamayı tercih ederim.
2. Bilgi sekmesine URL türleri ekleyip eklemediğinizi kontrol edin, rol Düzenleyiciye ayarlanmış olarak Tanımlayıcı ve URL Şemalarına Paket Kimliğinizi yazın
3. Cloud.google.com adresindeki konsolda "API'lar ve kimlik doğrulaması" -> "Onay ekranı" başvurunuzla ilgili formu doldurun. "Ürün adı" zorunludur.

Zevk almak :)

Benim durumumda, web uygulamaları / yüklü uygulamalar için İstemci Kimliği türünü kontrol etmek zorunda kaldım.

yüklü uygulamalar: http: // localhost [URI'leri yönlendir] Bu durumda localhost basitçe çalışır

web uygulamaları: Geçerli bir alan adına ihtiyacınız var [URI'leri yönlendir:]

Yapmanız gereken şey Geliştirici Konsolunuza geri dönüp API'lar ve Yetkilendirme> Onay Ekranı'na gidin ve doldurun. Özellikle, ürün adı.

Alan adınız ve ip'inizden sonraki yolu eklemeyi unutmayın. Benim durumumda unuttum:

/ oauth2callback

Konsolda iki istek URI'm vardı : http: // xxxxx / client / api / spreadsheet / authredirect ve http: // localhost .

Bu soruya verilen en iyi yanıtları denedim ve hiçbirinin benim sorunum olmadığını doğruladım.

Konsoldan localhost'u kaldırdım, projemdeki client_secret.json'umu güncelledim ve uyumsuzluk hatası ortadan kalktı.

Google oturum açma ile aynı sorunu vardı, saçlarımı çekmek üzereydim !!! Google geliştirici konsolundaki google Kimlik Bilgileri paneline geri aramalarımı doğru bir şekilde girdim, burada yönlendirme URL'lerim vardı:

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

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

https://www.example.com/oauth2callback

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

her şey iyi görünüyor değil mi? ama yine de ekledim kadar çalışma vermedi bir daha URL büyülü Eklediğim signin-google url (varsayılan google geri arama budur) olmadan www çözüldü ve problem.

(alan adınıza bağlı olarak) hem www URL'leri ile hem de URL'leri eklemeniz gerekip gerekmeyebileceğini dikkate alın

Ben frontend uygulaması ve arka uç api var.

Arka uç sunucumdan google api'ye vurarak test ediyordum ve bu hatayla karşılaşıyordum. Tüm zaman boyunca neden vermem gerektiğini merak ediyordumredirect_uri sadece arka uç olduğu , çünkü ön uç mantıklı.

Ne yapıyordum redirect_uri(geçerli olsa da) sunucudan (bu sadece yer tutucu olduğunu varsayarak, sadece google kayıtlı olması gerekir) farklı veriyordu ama jeton kodu oluşturulan benim ön uç url farklıydı. Yani sunucu kodumda (bu yönlendirme-uri farklıydı) bu kodu geçirirken, bu hatayla karşı karşıya kaldım.

Bu hatayı yapma. Ön uçunuzun redirect_urisunucunuzun google ile orijinal olduğundan emin olmak için kullandığından emin olun .

Hatanın nedenleri şunlardır: redirect_uri_mismatch sorunu oluşur:

1. Google projenizde boş URL yönlendirme alanı.
2. Yönlendirme URL'si sitenizle eşleşmiyor
3. Önemli! Yalnızca example.com, book.com vb. Gibi çalışma alanlarıyla çalışır (Yerel ana bilgisayar veya AWS LB URL'si ile çalışmaz)

Alan adı URL'sini kullanmanız önerilir

İşin püf noktası, kimliği oluşturma noktasına doğru yönlendirme URL'sini girmektir. Bir 'Düzenle' ile kimlik oluşturulduktan sonra yönlendirme URL'sinin güncellenmesinin sadece işi tamamlamadığını fark ettim. Benim için de işe yarayan şey, 'vendor' klasörünün tamamını çoğaltmak ve 'oauth' dosyasının bulunduğu konuma kopyalamak (jetonu başarılı bir şekilde oluşturacak ve sonra tekrarlayan 'vendor' klasörünü silene kadar). Çünkü '../vendor/autoload' üzerinden satıcı klasörünü işaret etmeye çalışmak benim için işe yaramadı.

Bu nedenle, mevcut sorunlu İstemci OAuth Kimliğinizi silin ve bu yaklaşımı deneyin, işe yarayacaktır.