Trên trang web https://code.google.com.vn/apis/console Tôi đã đăng ký ứng dụng của mình, thiết lập ID khách hàng được tạo : và Bí mật khách hàng cho ứng dụng của tôi và cố gắng đăng nhập bằng Google. Thật không may, tôi nhận được thông báo lỗi:

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

Điều này có nghĩa là gì, và làm thế nào tôi có thể sửa nó? Tôi sử dụng đá quý omniauth-google-oauth2 .

URI chuyển hướng (nơi phản hồi được trả về) phải được đăng ký trong bảng điều khiển API và lỗi cho thấy bạn đã không làm điều đó hoặc không thực hiện đúng.

Chuyển đến bảng điều khiển cho dự án của bạn và xem phần Truy cập API. Bạn sẽ thấy client ID& client secretở đó, cùng với một danh sách các URI chuyển hướng. Nếu URI bạn muốn không được liệt kê, nhấp vào chỉnh sửa cài đặt và thêm URI vào danh sách.

EDIT: (Từ một nhận xét được đánh giá cao bên dưới) Lưu ý rằng việc cập nhật bảng điều khiển api của google và sự thay đổi đó có mặt có thể mất một thời gian. Nói chung chỉ vài phút nhưng đôi khi có vẻ lâu hơn.

Trong trường hợp của tôi, nó là wwwvà non-wwwURL. Trang web thực tế có wwwURL và URI chuyển hướng được ủy quyền trong Bảng điều khiển dành cho nhà phát triển của Google có non-wwwURL. Do đó, có sự không phù hợp trong URI chuyển hướng. Tôi đã giải quyết nó bằng cách cập nhật Authorized Redirect URIstrong Google Developer Console thành wwwURL.

Sự không phù hợp URI phổ biến khác là:

• Sử dụng http://trong URI chuyển hướng được ủy quyền và https://làm URL thực tế hoặc ngược lại
• Sử dụng dấu gạch chéo ( http://example.com/) trong URI chuyển hướng được ủy quyền và không sử dụng dấu gạch chéo ( http://example.com) làm URL thực tế hoặc ngược lại

Dưới đây là các ảnh chụp màn hình từng bước của Google Developer Console để nó hữu ích cho những ai đang gặp khó khăn trong việc định vị trang bảng điều khiển dành cho nhà phát triển để cập nhật URI chuyển hướng.

1. Tới https://console.developers.google.com

2. Chọn dự án của bạn

3. Nhấp vào biểu tượng menu

4. Bấm vào API Managermenu

5. Bấm vào Credentialsmenu. Và dưới OAuth 2.0 Client IDs, bạn sẽ tìm thấy tên khách hàng của bạn. Trong trường hợp của tôi, nó là Web Client 1. Nhấp vào nó và một cửa sổ bật lên sẽ xuất hiện nơi bạn có thể chỉnh sửa Nguồn gốc Javascript được ủy quyền và URI chuyển hướng được ủy quyền .

Đây là một bài viết của Google về việc tạo dự án và ID khách hàng .

Nếu bạn đang sử dụng nút Google+ javascript , thì bạn phải sử dụng postmessagethay vì URI thực tế. Tôi đã mất gần như cả ngày để tìm hiểu điều này vì các tài liệu của Google không nêu rõ vì lý do nào đó.

Trong bất kỳ luồng nào bạn đã truy xuất mã ủy quyền ở phía máy khách, chẳng hạn như GoogleAuth.grantOfflineAccess()API và bây giờ bạn muốn chuyển mã đến máy chủ của mình, đổi mã và lưu trữ mã thông báo truy cập và làm mới, sau đó bạn phải sử dụng chuỗi ký tựpostmessage thay vì redirect_uri.

Ví dụ: xây dựng trên đoạn mã trong tài liệu 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"}

Tài liệu duy nhất của Google để đề cập đến postmessagelà tài liệu đăng nhập Google+ cũ này . Đây là ảnh chụp màn hình và liên kết lưu trữ vì G + đang đóng và liên kết này có thể sẽ biến mất:

Điều hoàn toàn không thể tha thứ là trang tài liệu cho Truy cập ngoại tuyến không đề cập đến điều này. #FacePalm

Đối với ứng dụng web của tôi, tôi đã sửa chữa lỗi của mình bằng cách viết

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

Đảm bảo kiểm tra giao thức "http: //" hoặc "https: //" khi google cũng kiểm tra giao thức. Tốt hơn để thêm cả hai URL trong danh sách.

Điều này có vẻ khá lạ và khó chịu khi không có giải pháp "một" nào ở đó. đối với tôi http: // localhost: 8000 không hoạt động nhưng http: // localhost: 8000 / đã hoạt động.

Khi bạn đăng ký ứng dụng của mình tại https://code.google.com.vn/apis/console và tạo ID khách hàng, bạn có cơ hội chỉ định một hoặc nhiều URI chuyển hướng. Giá trị của redirect_uritham số trên URI xác thực của bạn phải khớp chính xác với một trong số chúng.

Câu trả lời này giống như câu trả lời của Mike và câu trả lời của Jeff , cả hai đều được đặt redirect_urithànhpostmessage đứng về phía khách hàng. Tôi muốn thêm nhiều hơn về phía máy chủ, và cả trường hợp đặc biệt áp dụng cho cấu hình này.

Ngăn xếp công nghệ

Cuối tuần

• Python 3.6
• Django 1.11
• Django REST Framework 3.9 : máy chủ dưới dạng API, không kết xuất mẫu, không hoạt động nhiều ở nơi khác.
• Django REST Framework JWT 1.11
• Django REST Xã hội Auth <2.1

Frontend

• Phản ứng : 16.8.3, create-react-appphiên bản 2.1.5
• phản ứng-google-đăng nhập : 5.0.2

Luồng "Mã" (Cụ thể cho Google OAuth2)

Tóm tắt: Phản ứng -> yêu cầu "mã" xác thực xã hội -> yêu cầu mã thông báo jwt để có được trạng thái "đăng nhập" về mặt máy chủ / cơ sở dữ liệu phụ trợ của riêng bạn.

1. Frontend (React) sử dụng "nút đăng nhập Google" responseType="code"để lấy mã ủy quyền. (nó không phải là mã thông báo, không phải là mã thông báo truy cập!)
   • Nút đăng nhập google là từ react-google-loginđã đề cập ở trên.
   • Nhấp vào nút sẽ hiển thị cửa sổ bật lên để người dùng chọn tài khoản. Sau khi người dùng chọn một và cửa sổ đóng lại, bạn sẽ nhận được mã từ chức năng gọi lại của nút.
2. Frontend gửi cái này đến điểm cuối JWT của máy chủ phụ trợ.
   • POST yêu cầu, với { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" }
3. Đối với máy chủ Django của tôi, tôi sử dụng Django REST Framework JWT + Django REST Social Auth. Django nhận được mã từ frontend, xác minh nó bằng dịch vụ của Google (hoàn thành cho bạn). Sau khi được xác minh, nó sẽ gửi JWT (mã thông báo) trở lại lối vào. Frontend hiện có thể thu hoạch mã thông báo và lưu trữ ở đâu đó.
   • Tất cả REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGINvà REST_SOCIAL_OAUTH_REDIRECT_URItrong Django settings.pylà không cần thiết . (Chúng là các hằng số được sử dụng bởi Django REST Social Auth) Tóm lại, bạn không phải thiết lập bất cứ điều gì liên quan đến url chuyển hướng trong Django . Mặt trước "redirect_uri": "postmessage"trong React đủ. Điều này có ý nghĩa bởi vì công việc xác thực xã hội mà bạn phải thực hiện về phía bạn là tất cả các yêu cầu POST kiểu Ajax ở phía trước, không gửi bất kỳ hình thức nào, vì vậy thực tế không có chuyển hướng nào xảy ra theo mặc định. Đó là lý do tại sao url chuyển hướng trở nên vô dụng nếu bạn đang sử dụng luồng mã + JWT và cài đặt url chuyển hướng phía máy chủ không có hiệu lực.
4. Django REST Social Auth xử lý việc tạo tài khoản. Điều này có nghĩa là nó sẽ kiểm tra email / tên tài khoản google và xem nó có khớp với bất kỳ tài khoản nào trong cơ sở dữ liệu không. Nếu không, nó sẽ tạo một cái cho bạn, sử dụng email và họ chính xác. Nhưng, tên người dùng sẽ giống như youremailprefix717e248c5b924d60nếu email của bạn là youremailprefix@example.com. Nó nối thêm một số chuỗi ngẫu nhiên để tạo một tên người dùng duy nhất. Đây là hành vi mặc định, tôi tin rằng bạn có thể tùy chỉnh nó và thoải mái tìm hiểu tài liệu của họ.
5. Frontend lưu mã thông báo đó và khi nó phải thực hiện CRUD cho máy chủ phụ trợ, đặc biệt là tạo / xóa / cập nhật, nếu bạn đính kèm mã thông báo trong Authorizationtiêu đề của mình và gửi yêu cầu đến phụ trợ, giờ đây, phần phụ trợ Django sẽ nhận ra đó là thông tin đăng nhập, tức là đã được xác thực người dùng. Tất nhiên, nếu mã thông báo của bạn hết hạn, bạn phải làm mới nó bằng cách thực hiện một yêu cầu khác.

Ôi chúa ơi, tôi đã dành hơn 6 giờ và cuối cùng đã hiểu điều này! Tôi tin rằng đây là lần đầu tiên tôi thấy điều này postmessage. Bất cứ ai làm việc trên một Django + DRF + JWT + Social Auth + Reactsự kết hợp chắc chắn sẽ đâm vào điều này. Tôi không thể tin rằng không có bài báo nào ngoài đó đề cập đến điều này ngoại trừ câu trả lời ở đây. Nhưng tôi thực sự hy vọng bài đăng này có thể giúp bạn tiết kiệm hàng tấn thời gian nếu bạn đang sử dụng ngăn xếp Django + React.

2015July15 - đăng nhập đã hoạt động vào tuần trước với tập lệnh này khi đăng nhập

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

ngừng hoạt động và bắt đầu gây ra lỗi 400 với Error: redirect_uri_mismatch

và trong phần CHI TIẾT: redirect_uri=storagerelay://...

tôi đã giải quyết nó bằng cách thay đổi thành:

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

Danh mục:

• httphay https?
• &hay &?
• dấu gạch chéo ( /) hoặc mở ?
• (CMD/CTRL)+F, tìm kiếm kết quả khớp chính xác trong trang thông tin xác thực. Nếu không tìm thấy thì tìm kiếm cái còn thiếu.
• Đợi đến khi google làm mới nó. Có thể xảy ra trong mỗi nửa giờ nếu bạn thay đổi thường xuyên hoặc nó có thể ở trong bể bơi. Đối với trường hợp của tôi, nó đã gần nửa giờ để có hiệu lực.

Trong trường hợp của tôi, loại Ứng dụng thông tin của tôi là "Khác". Vì vậy, tôi không thể tìm thấyAuthorized redirect URIs trong trang thông tin đăng nhập. Nó dường như xuất hiện trong loại Ứng dụng: "Ứng dụng web". Nhưng bạn có thể nhấp vào Download JSONnút để lấy client_secret.jsontệp.

Mở tệp json và bạn có thể tìm thấy tham số như thế này : "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. Tôi chọn sử dụng http: // localhost và nó hoạt động tốt với tôi.

Các url chuyển hướng là trường hợp nhạy cảm.

Trong trường hợp của tôi, tôi đã thêm cả hai: http: // localhost: 5023 / AuthCallback / IndexAsync http: // localhost: 5023 / authcallback / indexasync

Không có giải pháp nào ở trên làm việc cho tôi. dưới đây đã làm

thay đổi các url chuyển hướng được ủy quyền thành - https: // localhost: 44377 / đăng nhập-google

Hy vọng điều này sẽ giúp được ai đó.

hãy cẩn thận với phần bổ sung /ở cuối url http://localhost:8000khác vớihttp://localhost:8000/

Người dùng Rails (từ tài liệu omniauth-google-oauth2 ):

Sửa lỗi không khớp giao thức cho redirect_uri trong Rails

Chỉ cần đặt full_host trong OmniAuth dựa trên Rails.env.

# config / khởi tạo / omniauth.rb

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

HÃY NHỚ: Không bao gồm dấu "/"

Nếu bạn sử dụng hướng dẫn này: https://developers.google.com/identity/sign-in/web/server-side-flow thì bạn nên sử dụng "postmessage".

Trong GO, vấn đề này đã được khắc phục:

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

đối với tôi đó là vì trong danh sách 'URI chuyển hướng được ủy quyền' tôi đã đặt không chính xác https://developers.google.com/oauthplayground/thay vì https://developers.google.com/oauthplayground(không có /ở cuối).

Hãy để tôi hoàn thành câu trả lời của @ Bazyl: trong tin nhắn tôi nhận được, họ đã đề cập đến URI "http://localhost:8080/" (tất nhiên, có vẻ như là một cấu hình google nội bộ). Tôi đã thay đổi URI ủy quyền cho cái đó "http://localhost:8080/"và thông báo không xuất hiện nữa ... Và video đã được tải lên ... Tài liệu APIS rất RẤT ... Mỗi khi tôi có điều gì đó làm việc với google apis, tôi chỉ đơn giản là cảm thấy "may mắn", nhưng thiếu tài liệu tốt về nó .... :( Vâng, tôi đã làm cho nó hoạt động, nhưng tôi không hiểu tại sao nó thất bại, và tại sao nó chỉ hoạt động ... Chỉ có MỘT nơi để xác nhận URI trên web và nó đã được sao chép trong client_secrets.json ... Tôi không nhận được nếu có một nơi THIRD nơi người ta nên viết cùng một URI ... Tôi không chỉ tìm thấy tài liệu mà còn cả Thiết kế GUI của Google '

Bất cứ ai gặp khó khăn trong việc tìm nơi đặt url chuyển hướng trong bảng điều khiển mới: API & Auth -> Thông tin xác thực -> ID khách OAuth 2.0 -> Nhấp vào liên kết để tìm tất cả các url chuyển hướng của bạn

Tôi cần tạo ID khách hàng mới trong API & Dịch vụ -> Thông tin xác thực -> Tạo thông tin đăng nhập -> OAuth -> Khác

Sau đó, tôi đã tải xuống và sử dụng client_secret.json với chương trình dòng lệnh đang tải lên tài khoản youtube của mình. Tôi đã cố gắng sử dụng ID khách OAuth của Ứng dụng Web, điều này khiến tôi gặp lỗi URI chuyển hướng trong trình duyệt.

Hãy thử làm những kiểm tra này:

1. Gói ID trong bảng điều khiển và trong ứng dụng của bạn. Tôi thích đặt ID gói ứng dụng như thế này "org.peredovik. $ {PRODUCT_NAME: rfc1034identifier}"
2. Kiểm tra xem bạn đã thêm các loại URL tại tab Thông tin chỉ cần nhập ID gói của bạn trong Mã định danh và Lược đồ URL, vai trò được đặt thành Trình chỉnh sửa
3. Trong bảng điều khiển tại cloud.google.com "API & auth" -> mẫu "Màn hình đồng ý" về ứng dụng của bạn. "Tên sản phẩm" là trường bắt buộc.

Thưởng thức :)

Trong trường hợp của tôi, tôi đã phải kiểm tra loại ID khách hàng cho các ứng dụng web / ứng dụng đã cài đặt.

các ứng dụng đã cài đặt: http: // localhost [URI chuyển hướng] Trong trường hợp này localhost chỉ đơn giản hoạt động

ứng dụng web: Bạn cần tên miền hợp lệ [Chuyển hướng URI:]

Những gì bạn cần làm là quay trở lại Bảng điều khiển dành cho nhà phát triển của bạn và đi tới API & Auth> Màn hình đồng ý và điền vào đó. Cụ thể, tên sản phẩm.

Đừng quên bao gồm đường dẫn sau tên miền và ip của bạn. Trong trường hợp của tôi, tôi quên:

/ oauth2callback

Tôi đã có hai URI yêu cầu trong Bảng điều khiển, http: // xxxxx / client / api / bảng tính / authredirect và http: // localhost .

Tôi đã thử tất cả các câu trả lời hàng đầu cho câu hỏi này và xác nhận rằng không ai trong số chúng là vấn đề của tôi.

Tôi đã xóa localhost khỏi Bảng điều khiển, cập nhật client_secret.json trong dự án của tôi và lỗi không khớp đã biến mất.

Tôi gặp vấn đề tương tự với đăng nhập google, tôi chuẩn bị nhổ tóc !!! Tôi đã nhập chính xác các cuộc gọi lại của mình trong bảng Thông tin xác thực của google tại bảng điều khiển dành cho nhà phát triển google, đây là các url chuyển hướng của tôi:

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

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

https://www.example.com/oauth2callback

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

mọi thứ có vẻ ổn phải không? nhưng nó vẫn không hoạt động cho đến khi tôi thêm một Url huyền diệu nữa. Tôi đã thêm url đăng nhập google (đó là cuộc gọi lại mặc định của google) mà không có www và vấn đề được giải quyết.

đưa nó vào tài khoản (tùy thuộc vào tên miền của bạn) bạn có thể hoặc không cần thêm cả có và không có url www

Tôi có ứng dụng frontend và api phụ trợ.

Từ máy chủ phụ trợ của tôi, tôi đã kiểm tra bằng cách nhấn google api và gặp phải lỗi này. Trong suốt thời gian của tôi, tôi đã tự hỏi tại sao tôi cần phải đưa raredirect_uri vì đây chỉ là phần phụ trợ, vì frontend nó có ý nghĩa.

Những gì tôi đang làm là cung cấp khác nhau redirect_uri(mặc dù hợp lệ) từ máy chủ (giả sử đây chỉ là trình giữ chỗ, nó chỉ phải được đăng ký với google) nhưng url giao diện của tôi đã tạo mã mã thông báo khác. Vì vậy, khi tôi chuyển mã này trong thử nghiệm phía máy chủ của mình (đối với redirect-uri khác), tôi đã gặp phải lỗi này.

Vì vậy, đừng làm sai lầm này. Đảm bảo rằng lối vào của bạn redirect_urigiống như máy chủ của bạn khi google sử dụng nó để xác thực tính xác thực.

Dưới đây là các lý do Lỗi: sự cố redirect_uri_mismatch xảy ra:

1. Trường chuyển hướng URL trống tại dự án google của bạn.
2. URL chuyển hướng không phù hợp với trang web của bạn
3. Quan trọng! Nó sẽ chỉ hoạt động với miền hoạt động như example.com, book.com, v.v (Không hoạt động với máy chủ cục bộ hoặc URL AWS LB)

Khuyến nghị sử dụng URL miền

Mẹo nhỏ là nhập url chuyển hướng đúng vào thời điểm tạo ID. Tôi thấy rằng việc cập nhật url chuyển hướng một khi ID đã được tạo thông qua 'Chỉnh sửa' chỉ không hoàn thành công việc. Điều cũng làm việc với tôi là sao chép toàn bộ thư mục 'nhà cung cấp' và sao chép nó vào cùng một vị trí có tệp 'oauth' (chỉ cho đến khi bạn tạo thành công mã thông báo và sau đó bạn có thể xóa thư mục 'nhà cung cấp' trùng lặp). Điều này là do cố gắng trỏ đến thư mục nhà cung cấp qua '../vendor/autoload' không hiệu quả với tôi.

Vì vậy, hãy xóa ID OAuth Client rắc rối hiện có của bạn và thử phương pháp này, nó sẽ hoạt động.