Di situs web https://code.google.com/apis/console Saya telah mendaftarkan aplikasi saya, mengatur ID Klien yang dihasilkan : dan Rahasia Klien ke aplikasi saya dan mencoba masuk dengan Google. Sayangnya, saya mendapat pesan kesalahan:

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

Apa artinya pesan ini, dan bagaimana saya bisa memperbaikinya? Saya menggunakan permata omniauth-google-oauth2 .

URI pengalihan (tempat respons dikembalikan) harus didaftarkan di konsol API, dan kesalahannya menunjukkan bahwa Anda belum melakukan itu, atau belum melakukannya dengan benar.

Buka konsol untuk proyek Anda dan lihat di bawah Akses API. Anda akan melihat client ID& di client secretsana, bersama dengan daftar URI pengalihan. Jika URI yang Anda inginkan tidak tercantum, klik edit pengaturan dan tambahkan URI ke daftar.

Sunting: (Dari komentar yang berperingkat tinggi di bawah) Perhatikan bahwa memperbarui konsol google api dan perubahan yang ada dapat memakan waktu. Umumnya hanya beberapa menit tetapi terkadang terasa lebih lama.

Dalam kasus saya itu wwwdan non-wwwURL. Situs aktual memiliki wwwURL dan URI Pengalihan Resmi di Google Developer Console memiliki non-wwwURL. Oleh karena itu, ada ketidaksesuaian dalam pengalihan URI. Saya menyelesaikannya dengan memperbarui Authorized Redirect URIsdi Google Developer Console ke wwwURL.

Ketidakcocokan URI umum lainnya adalah:

• Menggunakan http://di URI Pengalihan Resmi dan https://sebagai URL aktual, atau sebaliknya
• Menggunakan trailing slash ( http://example.com/) di URI Pengalihan Resmi dan tidak menggunakan trailing slash ( http://example.com) sebagai URL aktual, atau sebaliknya

Berikut adalah screenshot langkah demi langkah dari Google Developer Console sehingga akan sangat membantu bagi mereka yang mengalami kesulitan untuk menemukan halaman konsol pengembang untuk memperbarui URI redirect.

1. Buka https://console.developers.google.com

2. Pilih Proyek Anda

3. Klik pada ikon menu

4. Klik pada API Managermenu

5. Klik pada Credentialsmenu. Dan di bawah OAuth 2.0 Client IDs, Anda akan menemukan nama klien Anda. Dalam kasus saya, benar Web Client 1. Klik dan popup akan muncul di mana Anda dapat mengedit Asal Javascript Resmi dan URI pengalihan Resmi .

Berikut ini adalah artikel Google tentang membuat ID proyek dan klien .

Jika Anda menggunakan tombol javascript Google+ , maka Anda harus menggunakan postmessagealih-alih URI yang sebenarnya. Hampir sepanjang hari saya perlu memikirkan hal ini karena dokumen Google tidak dengan jelas menyatakannya untuk beberapa alasan.

Dalam aliran apa pun di mana Anda mengambil kode otorisasi di sisi klien, seperti GoogleAuth.grantOfflineAccess()API , dan sekarang Anda ingin meneruskan kode ke server Anda, menebusnya, dan menyimpan akses dan menyegarkan token, maka Anda harus menggunakan string literal postmessagebukannya redirect_uri.

Misalnya, membangun cuplikan di dokumen 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"}

Satu-satunya dokumentasi Google untuk menyebutkan postmessageadalah dokumen masuk Google+ lama ini . Berikut screenshot dan tautan arsip sejak G + ditutup dan tautan ini kemungkinan akan hilang:

Benar-benar tidak dapat dimaafkan bahwa halaman doc untuk Akses Offline tidak menyebutkan ini. #Telapak tangan

Untuk aplikasi web saya, saya memperbaiki kesalahan saya dengan menulis

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

Pastikan untuk memeriksa protokol "http: //" atau "https: //" sebagai protokol cek google juga. Lebih baik menambahkan kedua URL dalam daftar.

Tampaknya ini agak aneh dan menyebalkan karena tidak ada "satu" solusi di sana. bagi saya http: // localhost: 8000 tidak berhasil tetapi http: // localhost: 8000 / berhasil.

Ketika Anda mendaftarkan aplikasi Anda di https://code.google.com/apis/console dan membuat ID Klien, Anda mendapatkan kesempatan untuk menentukan satu atau lebih URI pengalihan. Nilai redirect_uriparameter pada URI auth Anda harus sama persis dengan salah satunya.

Jawaban ini sama dengan jawaban ini Mike , dan jawaban Jeff , kedua set redirect_uriuntuk postmessagedi sisi client. Saya ingin menambahkan lebih banyak tentang sisi server, dan juga keadaan khusus yang berlaku untuk konfigurasi ini.

Stack teknologi

Backend

• Python 3.6
• Django 1.11
• Django REST Framework 3.9 : server sebagai API, bukan rendering template, tidak melakukan banyak hal di tempat lain.
• Kerangka Kerja Django REST JWT 1.11
• Django REST Auth Sosial <2.1

Paling depan

• Bereaksi : 16.8.3, create-react-appversi 2.1.5
• react-google-login : 5.0.2

Aliran "Kode" (Khusus untuk Google OAuth2)

Ringkasan: React -> request social auth "code" -> request jwt token untuk mendapatkan status "login" dalam hal server / database backend Anda sendiri.

1. Frontend (React) menggunakan "tombol masuk Google" dengan responseType="code"untuk mendapatkan kode otorisasi. (bukan token, bukan token akses!)
   • Tombol masuk google berasal dari yang react-google-logindisebutkan di atas.
   • Klik pada tombol akan memunculkan jendela sembulan bagi pengguna untuk memilih akun. Setelah pengguna memilih satu dan jendela ditutup, Anda akan mendapatkan kode dari fungsi panggilan balik tombol.
2. Frontend mengirim ini ke endpoint JWT server backend.
   • Permintaan POST, dengan { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" }
3. Untuk server Django saya, saya menggunakan Django REST Framework JWT + Django REST Auth Sosial. Django menerima kode dari frontend, verifikasi dengan layanan Google (dilakukan untuk Anda). Setelah diverifikasi, itu akan mengirim JWT (token) kembali ke frontend. Frontend sekarang dapat memanen token dan menyimpannya di suatu tempat.
   • Semua REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGINdan REST_SOCIAL_OAUTH_REDIRECT_URIdi Django settings.pytidak perlu . (Mereka adalah konstanta yang digunakan oleh Django REST Social Auth) Singkatnya, Anda tidak perlu mengatur apa pun yang berkaitan dengan redirect url di Django . The "redirect_uri": "postmessage"di Bereaksi mencukupi frontend. Ini masuk akal karena pekerjaan auth sosial yang harus Anda lakukan di sisi Anda adalah semua permintaan POST gaya Ajax di frontend, tidak mengirimkan bentuk apa pun, jadi sebenarnya tidak ada pengalihan yang terjadi secara default. Itu sebabnya url redirect menjadi tidak berguna jika Anda menggunakan kode + aliran JWT, dan pengaturan url redirect sisi-server tidak berpengaruh.
4. Django REST Social Auth menangani pembuatan akun. Ini berarti akan memeriksa email akun google / nama depan belakang, dan melihat apakah itu cocok dengan akun mana pun di basis data. Jika tidak, itu akan membuatnya untuk Anda, menggunakan email yang tepat & nama belakang pertama. Tapi, nama pengguna akan seperti youremailprefix717e248c5b924d60jika email Anda [email protected]. Ini menambahkan beberapa string acak untuk membuat nama pengguna yang unik. Ini adalah perilaku default, saya yakin Anda dapat menyesuaikannya dan merasa bebas untuk menggali dokumentasi mereka.
5. Frontend menyimpan token itu dan ketika harus melakukan CRUD ke server backend, terutama membuat / menghapus / memperbarui, jika Anda melampirkan token di Authorizationheader Anda dan mengirim permintaan ke backend, backend Django sekarang akan mengenali itu sebagai login, yaitu dikonfirmasi pengguna. Tentu saja, jika token Anda kedaluwarsa, Anda harus menyegarkannya dengan membuat permintaan lain.

Ya ampun, saya telah menghabiskan lebih dari 6 jam dan akhirnya berhasil dengan benar! Saya percaya ini adalah pertama kalinya saya melihat postmessagehal ini . Siapa pun yang mengerjakan Django + DRF + JWT + Social Auth + Reactkombinasi pasti akan menabrak ini. Saya tidak percaya tidak ada artikel di luar sana yang menyebutkan ini kecuali jawaban di sini. Tapi saya sangat berharap posting ini dapat menghemat banyak waktu jika Anda menggunakan tumpukan Django + Bereaksi.

2015Juli15 - masuk yang berfungsi minggu lalu dengan skrip ini saat masuk

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

berhenti bekerja dan mulai menyebabkan Kesalahan 400 dengan Error: redirect_uri_mismatch

dan di bagian DETAILS: redirect_uri=storagerelay://...

saya menyelesaikannya dengan mengubah ke:

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

Daftar periksa:

• httpatau https?
• &atau &?
• trailing slash ( /) atau terbuka ?
• (CMD/CTRL)+F, cari kecocokan persis di halaman kredensial. Jika tidak ditemukan maka cari yang hilang.
• Tunggu sampai google me-refresh-nya. Dapat terjadi dalam setiap setengah jam jika Anda sering berubah atau mungkin tetap di kolam renang. Untuk kasus saya, hampir setengah jam berlaku.

Dalam kasus saya, jenis Aplikasi kredensial saya adalah "Lainnya". Jadi saya tidak dapat menemukan Authorized redirect URIsdi halaman kredensial. Tampaknya muncul dalam jenis Aplikasi: "Aplikasi Web". Tetapi Anda dapat mengklik Download JSONtombol untuk mendapatkan client_secret.jsonfile.

Buka file json, dan Anda dapat menemukan parameter seperti ini: "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. Saya memilih untuk menggunakan http: // localhost dan berfungsi dengan baik untuk saya.

Url redirect sensitif huruf.

Dalam kasus saya, saya menambahkan keduanya: http: // localhost: 5023 / AuthCallback / IndexAsync http: // localhost: 5023 / authcallback / indexasync

Tidak ada solusi di atas yang berfungsi untuk saya. di bawah itu

ubah url Redirect yang diotorisasi ke - https: // localhost: 44377 / signin-google

Semoga ini bisa membantu seseorang.

Waspadalah terhadap ekstra /di akhir url http://localhost:8000berbeda darihttp://localhost:8000/

Pengguna Rails (dari omniauth-google-oauth2 docs):

Memperbaiki Protokol Ketidakcocokan untuk redirect_uri di Rails

Cukup atur full_host di OmniAuth berdasarkan pada Rails.env.

# config / initializers / omniauth.rb

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

INGAT: Jangan sertakan trailing "/"

Jika Anda menggunakan tutorial ini: https://developers.google.com/identity/sign-in/web/server-side-flow maka Anda harus menggunakan "postmessage".

Di GO ini memperbaiki masalah:

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

bagi saya itu karena dalam daftar 'URI pengalihan Resmi' saya salah memasukkan https://developers.google.com/oauthplayground/bukan https://developers.google.com/oauthplayground(tanpa /di akhir).

Biarkan saya menyelesaikan jawaban @ Bazyl: dalam pesan yang saya terima, mereka menyebutkan URI "http://localhost:8080/" (yang tentu saja, tampaknya merupakan konfigurasi internal google). Saya mengubah URI resmi untuk yang itu "http://localhost:8080/",, dan pesan itu tidak muncul lagi ... Dan videonya diunggah ... Dokumentasi APIS SANGAT timpang ... Setiap kali saya memiliki sesuatu yang bekerja dengan google apis, saya cukup merasa "beruntung", tetapi ada kekurangan dokumentasi yang baik tentang hal itu .... :( Ya, saya membuatnya bekerja, tapi saya belum mengerti mengapa itu gagal, atau mengapa itu bekerja ... Hanya ada SATU tempat untuk mengonfirmasi URI di web, dan disalin di client_secrets.json ... Saya tidak mengerti jika ada tempat KETIGA di mana orang harus menulis URI yang sama ... saya juga menemukan tidak hanya dokumentasi tetapi juga Desain GUI Google '

Siapa pun yang kesulitan menemukan tempat untuk mengatur url redirect di konsol baru: API & Auth -> Kredensial -> ID klien OAuth 2.0 -> Klik tautan untuk menemukan semua url redirect Anda

Saya perlu membuat ID klien baru di bawah API & Layanan -> Kredensial -> Buat kredensial -> OAuth -> Lainnya

Kemudian saya mengunduh dan menggunakan client_secret.json dengan program baris perintah saya yang mengunggah ke akun youtube saya. Saya mencoba menggunakan ID klien OAuth Web App yang memberi saya kesalahan URI redirect di browser.

Coba lakukan pemeriksaan ini:

1. Bundel ID di konsol dan di aplikasi Anda. Saya lebih suka menetapkan Bundel ID aplikasi seperti ini "org.peredovik. $ {PRODUCT_NAME: rfc1034identifier}"
2. Periksa apakah Anda menambahkan jenis URL di Info tab cukup ketik Bundle ID Anda di Identifier dan Skema URL, peran ditetapkan ke Editor
3. Di konsol di cloud.google.com "API & auth" -> "Layar persetujuan" mengisi formulir tentang aplikasi Anda. "Nama produk" wajib diisi.

Nikmati :)

Dalam kasus saya, saya harus memeriksa jenis ID Klien untuk aplikasi web / aplikasi yang diinstal.

aplikasi yang terinstal: http: // localhost [Redirect URIs] Dalam hal ini localhost cukup berfungsi

aplikasi web: Anda perlu nama domain yang valid [Redirect URIs:]

Yang perlu Anda lakukan adalah kembali ke Konsol Pengembang Anda dan pergi ke API & Auth> Layar Izin dan isi itu. Secara khusus, nama produk.

Jangan lupa untuk memasukkan path setelah domain dan ip Anda. Dalam kasus saya, saya lupa:

/ oauth2callback

Saya punya dua permintaan URI di Konsol, http: // xxxxx / client / api / spreadsheet / authredirect dan http: // localhost .

Saya mencoba semua jawaban teratas untuk pertanyaan ini dan mengkonfirmasi bahwa tidak ada satu pun dari mereka yang menjadi masalah saya.

Saya menghapus localhost dari Konsol, memperbarui client_secret.json di proyek saya, dan kesalahan ketidakcocokan hilang.

Saya memiliki masalah yang sama dengan masuk google, saya akan menarik rambut saya !!! Saya telah memasukkan callback dengan benar di panel Credential di google developer console di sini adalah url redirect saya:

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

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

https://www.example.com/oauth2callback

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

semuanya tampak baik-baik saja bukan? tetapi masih tidak berfungsi sampai saya menambahkan satu lagi Url magis saya menambahkan signin-google url (yang merupakan default google callback) tanpa www dan masalah terpecahkan.

memperhitungkannya (tergantung domain Anda), Anda mungkin atau mungkin tidak perlu menambahkan keduanya dengan dan tanpa url www

Saya punya aplikasi frontend dan backend api.

Dari server backend saya, saya menguji dengan menekan google api dan menghadapi kesalahan ini. Sepanjang waktu saya, saya bertanya-tanya mengapa saya harus memberi redirect_urikarena ini hanya backend, karena frontend masuk akal.

Apa yang saya lakukan adalah memberikan yang berbeda redirect_uri(meskipun valid) dari server (dengan asumsi ini hanya placeholder, hanya saja terdaftar di google) tetapi url frontend saya yang membuat kode token berbeda. Jadi ketika saya melewati kode ini dalam pengujian sisi server saya (yang redirect-uri berbeda), saya menghadapi kesalahan ini.

Jadi jangan lakukan kesalahan ini. Pastikan frontend Anda redirect_urisama dengan server Anda seperti google menggunakannya untuk memvalidasi keaslian.

Berikut adalah alasan Galat: terjadi masalah redirect_uri_mismatch:

1. Redirect bidang URL kosong di proyek google Anda.
2. URL pengalihan tidak cocok dengan situs Anda
3. Penting! Ini hanya akan berfungsi dengan domain yang berfungsi seperti example.com, book.com dll. (Tidak berfungsi dengan host lokal atau AWS LB URL)

Disarankan menggunakan URL domain

Caranya adalah dengan memasukkan url redirect yang tepat pada titik pembuatan ID. Saya menemukan bahwa memperbarui url redirect setelah ID dibuat melalui 'Edit' tidak menyelesaikan pekerjaan. Apa yang juga berhasil bagi saya adalah menduplikasi seluruh folder 'vendor' dan menyalinnya ke lokasi yang sama di mana file 'oauth' berada (hanya sampai Anda berhasil membuat token dan kemudian Anda dapat menghapus folder 'vendor' duplikat). Ini karena mencoba menunjuk ke folder vendor melalui '../vendor/autoload' tidak berfungsi untuk saya.

Jadi, hapus ID OAuth Klien Anda yang bermasalah dan coba pendekatan ini, itu akan berhasil.