https://code.google.com/apis/console 웹 사이트에서 애플리케이션을 등록하고 생성 된 클라이언트 ID : 및 클라이언트 시크릿 을 앱에 설정하고 Google에 로그인하려고했습니다. 불행히도 오류 메시지가 나타납니다.

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

이 메시지는 무엇을 의미하며 어떻게 해결할 수 있습니까? gem omniauth-google-oauth2를 사용합니다 .

응답이 리턴되는 경로 재 지정 URI가 API 콘솔에 등록되어 있어야하며,이를 수행하지 않았거나 올바르게 수행하지 않았다는 오류가 표시됩니다.

프로젝트의 콘솔로 이동하여 API 액세스 아래를 확인하십시오. 리디렉션 URI 목록과 함께 client ID& client secret가 표시되어야합니다 . 원하는 URI가 목록에 없으면 설정 편집을 클릭하고 URI를 목록에 추가하십시오.

편집 : (아래의 높은 평가 의견에서) Google API 콘솔을 업데이트하고 변경 사항이 있으면 다소 시간이 걸릴 수 있습니다. 일반적으로 단 몇 분이지만 때로는 더 길어 보입니다.

내 경우에는 그것은이었다 www및 non-wwwURL. 실제 사이트에는 wwwURL이 있고 Google 개발자 콘솔 의 인증 된 리디렉션 URI 에는 non-wwwURL이 있습니다. 따라서 리디렉션 URI에 불일치가있었습니다. Authorized Redirect URIsGoogle 개발자 콘솔에서 wwwURL 로 업데이트 하여 해결했습니다 .

다른 일반적인 URI 불일치는 다음과 같습니다.

• 사용 http://승인 된 리디렉션 URI에와 https://실제 URL, 또는 그 반대로
• http://example.com/승인 된 리디렉션 URI에서 후행 슬래시 ( ) 사용 및 후행 슬래시 ( http://example.com)를 실제 URL로 사용하지 않거나 그 반대의 경우

다음은 Google 개발자 콘솔의 단계별 스크린 샷입니다. 리디렉션 URI를 업데이트하기 위해 개발자 콘솔 페이지를 찾는 데 어려움이있는 사용자에게 도움이됩니다.

1. https://console.developers.google.com으로 이동

2. 프로젝트를 선택하십시오

3. 메뉴 아이콘을 클릭하십시오

4. API Manager메뉴를 클릭하십시오

5. Credentials메뉴를 클릭하십시오 . 아래 OAuth 2.0 Client IDs에 고객 이름이 있습니다. 제 경우에는입니다 Web Client 1. 이를 클릭하면 Authorized Javascript Origin 및 Authorized redirect URI를 편집 할 수있는 팝업이 나타납니다 .

다음은 프로젝트 및 클라이언트 ID 작성 에 대한 Google 기사입니다 .

당신이 사용하는 경우 Google+에서 자바 스크립트 버튼을 , 당신은 사용해야하는 postmessage대신 실제 URI의. Google 문서는 어떤 이유로 든 명확하게 설명하지 않기 때문에 거의 하루 종일이 문제를 파악했습니다.

API 와 같은 클라이언트 측에서 인증 코드 를 검색 한 후 플로우 를 서버에 전달하고 코드를 사용하여 액세스 및 새로 고침 토큰을 저장하려는 경우 리터럴 문자열을 사용해야합니다. redirect_uri 대신에.GoogleAuth.grantOfflineAccess()postmessage

예를 들어, Ruby doc 의 스 니펫을 기반으로 빌드하십시오 .

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

언급 할 유일한 Google 문서 postmessage는이 오래된 Google+ 로그인 문서 입니다. G +가 종료 된 이후 의 스크린 샷 및 보관 링크 는 다음과 같습니다.

오프라인 액세스 의 문서 페이지 에이 내용이 언급되어 있지 않은 것은 절대 용서할 수 없습니다. # 페이스 팜

내 웹 응용 프로그램의 경우 다음을 작성하여 실수를 수정했습니다.

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

Google Check 프로토콜도 "http : //"또는 "https : //"프로토콜을 확인하십시오. 목록에 두 URL을 모두 추가하는 것이 좋습니다.

이것은 "하나의"솔루션이 없다는 것이 상당히 이상하고 성가신 것 같습니다. 나를 위해 http : // localhost : 8000 은 해결되지 않았지만 http : // localhost : 8000 / 은 해결되었습니다.

https://code.google.com/apis/console 에서 앱을 등록 하고 클라이언트 ID를 만들면 하나 이상의 리디렉션 URI를 지정할 수 있습니다. redirect_uri인증 URI 의 매개 변수 값은 그 중 하나와 정확히 일치해야합니다.

이 답변은 이 Mike의 답변 및 Jeff의 답변 과 동일하며 둘 다 클라이언트 측에 설정 redirect_uri됩니다 postmessage. 서버 측 과이 구성에 적용되는 특수 상황에 대해 더 추가하고 싶습니다.

기술 스택

백엔드

• 파이썬 3.6
• 장고 1.11
• Django REST Framework 3.9 : API로 서버이며 템플릿을 렌더링하지 않고 다른 곳에서 많은 일을하지 않습니다.
• 장고 REST 프레임 워크 JWT 1.11
• Django REST Social Auth <2.1

프론트 엔드

• 반응 : 16.8.3, create-react-app버전 2.1.5
• react-google-login : 5.0.2

"코드"흐름 (구체적으로 Google OAuth2)

요약 : React-> 소셜 인증 요청 "code"-> jwt 토큰에 백엔드 서버 / 데이터베이스 측면에서 "로그인"상태를 요청합니다.

1. 프론트 엔드 (React)는 "Google 로그인 버튼"을 사용 responseType="code"하여 인증 코드를받습니다. (토큰이 아니며 토큰에 액세스하지 않습니다!)
   • Google 로그인 버튼은 react-google-login위에서 언급 한 것입니다.
   • 버튼을 클릭하면 사용자가 계정을 선택할 수있는 팝업 창이 나타납니다. 사용자가 하나를 선택하고 창이 닫히면 버튼의 콜백 함수에서 코드를 가져옵니다.
2. 프론트 엔드는 이것을 백엔드 서버의 JWT 엔드 포인트로 보냅니다.
   • POST 요청 { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" }
3. Django 서버에는 Django REST Framework JWT + Django REST Social Auth를 사용합니다. Django는 프론트 엔드에서 코드를 수신하여 Google 서비스에서 확인합니다 (완료). 확인되면 JWT (토큰)를 프런트 엔드로 다시 보냅니다. 프론트 엔드는 이제 토큰을 수집하여 어딘가에 저장할 수 있습니다.
   • 모든 REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGIN그리고 REST_SOCIAL_OAUTH_REDIRECT_URI장고의에서이 settings.py불필요하다 . (Django REST Social Auth에서 사용하는 상수입니다.) 간단히 말하면 Django의 URL 리디렉션과 관련된 것을 설정할 필요가 없습니다 . 은 "redirect_uri": "postmessage"의 프론트 엔드로 충분 반응. 이것은 당신이해야 할 소셜 인증 작업이 프론트 엔드의 모든 Ajax 스타일 POST 요청이므로 양식을 제출하지 않으므로 실제로 기본적으로 리디렉션이 발생하지 않기 때문입니다. 코드 + JWT 흐름을 사용하고 서버 측 리디렉션 URL 설정이 적용되지 않는 경우 리디렉션 URL이 쓸모없는 이유입니다.
4. Django REST Social Auth는 계정 생성을 처리합니다. 즉, Google 계정 이메일 / 성을 확인하고 데이터베이스의 계정과 일치하는지 확인합니다. 그렇지 않은 경우 정확한 이메일 및 성을 사용하여 자동으로 생성됩니다. 그러나 사용자 이름은 youremailprefix717e248c5b924d60귀하의 이메일이 다음과 같습니다 youremailprefix@example.com. 고유 한 사용자 이름을 만들기 위해 임의의 문자열을 추가합니다. 이것이 기본 동작이므로 사용자 정의하고 문서를 자유롭게 파헤칠 수 있다고 생각합니다.
5. 프론트 엔드가 해당 토큰을 저장하고 백엔드 서버에 CRUD를 수행해야 할 때, 특히 생성 / 삭제 / 업데이트, Authorization헤더에 토큰을 첨부하고 백엔드에 요청을 보내면 Django 백엔드는 이제 로그인, 즉 인증 된 것으로 인식합니다. 사용자. 물론 토큰이 만료되면 다른 요청을하여 새로 고쳐야합니다.

오 세상에, 나는 6 시간 이상을 보냈고 마침내 이것을 얻었습니다! 나는 이것이 내가 이것을 처음 본 것이라고 믿는다 postmessage. Django + DRF + JWT + Social Auth + React조합으로 일하는 사람 은 분명히 이것에 부딪 칠 것입니다. 나는 거기에있는 기사 중 아무것도 여기에 대한 답변을 제외하고는 이것을 언급 할 수 없다. 그러나 Django + React 스택을 사용하는 경우이 게시물로 많은 시간을 절약 할 수 있기를 바랍니다.

2015 년 7 월 15 일-로그인시이 스크립트로 지난 주에 작동했던 로그인

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

작동을 멈추고 오류 400 발생 Error: redirect_uri_mismatch

그리고 DETAILS 섹션에서 : redirect_uri=storagerelay://...

나는 다음으로 변경하여 해결했다.

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

점검표 :

• http또는 https?
• &또는 &?
• 후행 슬래시 ( /) 또는 열기 ?
• (CMD/CTRL)+F자격 증명 페이지에서 정확히 일치하는 항목을 검색하십시오. 찾을 수 없으면 누락 된 항목을 검색하십시오.
• 구글이 그것을 새로 고칠 때까지 기다리십시오. 자주 변경하거나 수영장에 머무르면 30 분마다 발생할 수 있습니다. 제 경우에는 거의 30 분이 걸렸습니다.

필자의 경우 자격 증명 응용 프로그램 유형은 "기타"입니다. Authorized redirect URIs자격 증명 페이지에서 찾을 수 없습니다 . 응용 프로그램 유형 : "웹 응용 프로그램"으로 나타납니다. 그러나 Download JSON버튼을 클릭 하여 client_secret.json파일 을 가져올 수 있습니다.

json 파일을 열고 다음과 같은 매개 변수를 찾을 수 있습니다 "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. http : // localhost 를 사용하도록 선택하면 제대로 작동합니다.

리디렉션 URL은 대소 문자를 구분합니다.

제 경우에는 두 가지 모두를 추가했습니다 : http : // localhost : 5023 / AuthCallback / IndexAsync http : // localhost : 5023 / authcallback / indexasync

위의 해결책 중 어느 것도 나를 위해 일하지 않았습니다. 아래 않았다

승인 된 리디렉션 URL을 https : // localhost : 44377 / signin-google로 변경

이것이 누군가를 돕기를 바랍니다.

여분의 조심 /URL의 끝에 것은 http://localhost:8000다르다http://localhost:8000/

레일즈 사용자 ( omniauth-google-oauth2 문서에서) :

Rails에서 redirect_uri에 대한 프로토콜 불일치 수정

Rails.env를 기반으로 OmniAuth에서 full_host를 설정하십시오.

# config / initializers / omniauth.rb

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

기억하십시오 : 후행 "/"를 포함하지 마십시오

https://developers.google.com/identity/sign-in/web/server-side-flow 자습서를 사용하는 경우 "postmessage"를 사용해야합니다.

GO에서 이것은 문제를 해결했습니다.

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

나를 위해 그것은 'Authorized redirect URIs'목록에 https://developers.google.com/oauthplayground/대신 https://developers.google.com/oauthplayground( 끝없이) 잘못 넣었 기 때문입니다 /.

@Bazyl의 답변을 완성하겠습니다.받은 메시지에서 URI를 언급했습니다 "http://localhost:8080/" (물론 내부 Google 구성 인 것 같습니다). 해당 URL에 대한 승인 된 URI를 변경 "http://localhost:8080/"했는데 메시지가 더 이상 표시되지 않았습니다. 동영상이 업로드되었습니다 ... APIS 설명서는 매우 절름발이입니다 ... Google API로 작업 할 때마다 간단하게 "운이 좋다"고 생각하지만 그것에 관한 좋은 문서가 부족합니다 .... :( 예, 작동하지만, 왜 실패했는지 또는 왜 효과가 있는지 이해하지 못합니다. 웹에서 URI를 확인하는 곳이며 client_secrets.json에 복사되었습니다 ... 같은 URI를 작성 해야하는 세 번째 장소가 있으면 얻을 수 없습니다 ... 나는 문서뿐만 아니라 구글의 GUI 디자인

새 콘솔에서 리디렉션 URL을 설정하는 위치를 찾는 데 어려움을 겪고있는 사람 : API 및 인증-> 자격 증명-> OAuth 2.0 클라이언트 ID-> 모든 리디렉션 URL을 찾으려면 링크를 클릭하십시오.

API 및 서비스-> 자격 증명-> 자격 증명 생성-> OAuth-> 기타에서 새 클라이언트 ID를 작성해야했습니다.

그런 다음 YouTube 계정에 업로드하는 명령 행 프로그램과 함께 client_secret.json을 다운로드하여 사용했습니다. 브라우저에서 리디렉션 URI 오류를 발생시키는 Web App OAuth 클라이언트 ID를 사용하려고했습니다.

이 점검을 수행하십시오.

1. 콘솔 및 애플리케이션의 번들 ID 이 "org.peredovik. $ {PRODUCT_NAME : rfc1034identifier}"와 같은 애플리케이션의 번들 ID를 설정하는 것이 좋습니다.
2. 정보 탭에서 URL 유형을 추가했는지 확인하십시오. 식별자 및 URL 체계에 역할 ID를 입력하고 역할은 편집기로 설정하십시오.
3. cloud.google.com의 콘솔에서 "API 및 인증"-> "동의 화면"은 애플리케이션에 대한 양식을 작성합니다. "제품 이름"은 필수 필드입니다.

즐겨 :)

필자의 경우 웹 응용 프로그램 / 설치된 응용 프로그램의 클라이언트 ID 유형을 확인해야했습니다.

설치된 응용 프로그램 : http : // localhost [리디렉션 URI]이 경우 localhost는 간단하게 작동합니다

웹 애플리케이션 : 유효한 도메인 이름이 필요합니다 [리디렉션 URI :]

필요한 것은 개발자 콘솔로 돌아가서 API 및 인증> 동의 화면으로 이동하여 작성하십시오. 구체적으로 제품 이름입니다.

도메인과 IP 뒤에 경로를 포함시키는 것을 잊지 마십시오. 제 경우에는 잊어 버렸습니다.

/ oauth2callback

콘솔에는 http : // xxxxx / client / api / spreadsheet / authredirect 및 http : // localhost의 두 가지 요청 URI가 있습니다.

나는이 질문에 대한 모든 최고의 답변을 시도했지만 그들 중 어느 것도 내 문제가 아님을 확인했습니다.

콘솔에서 localhost를 제거하고 프로젝트에서 client_secret.json을 업데이트했는데 불일치 오류가 사라졌습니다.

Google 로그인과 동일한 문제가 있었으며 머리카락을 뽑으려고했습니다. Google 개발자 콘솔의 Google 자격 증명 패널에 콜백을 올바르게 입력했습니다. 여기에는 리디렉션 URL이 있습니다.

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

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

https://www.example.com/oauth2callback

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

모든 것이 괜찮아 보인다? 하지만 여전히 나는이 추가 될 때까지 작업은하지 않았다 또 하나의 URL 마법 내가 추가 로그인 절차 - 구글 URL을 (기본 구글 콜백 인) 없이 www를 해결하고 문제.

www URL을 사용하거나 사용하지 않고 추가하거나 추가하지 않아도 될 수 있습니다 (도메인에 따라 다름).

프론트 엔드 앱과 백엔드 API가 있습니다.

백엔드 서버에서 Google API를 쳐서 테스트하고 있었고이 오류에 직면했습니다. 내 시간 동안 나는 이것이 왜 redirect_uri백엔드이기 때문에 왜 제공해야하는지 궁금해 했다.

내가하고있는 일은 redirect_uri서버 와 다른 (유효하지만) 제공하는 것이 었습니다 (이것은 단지 자리 표시 자라고 가정하면 Google에 등록해야합니다). 토큰 코드를 생성 한 프론트 엔드 URL은 다릅니다. 따라서 서버 측 테스트 에서이 코드를 전달할 때 (리다이렉션 URI가 다른)이 오류에 직면했습니다.

따라서이 실수를하지 마십시오. redirect_uri구글이 진위를 검증하는데 사용하는 것처럼 프론트 엔드 가 서버와 동일한 지 확인하십시오 .

다음은 오류의 원인입니다 : redirect_uri_mismatch 문제가 발생합니다 :

1. Google 프로젝트에서 URL 입력란을 비워 두십시오.
2. 리디렉션 URL이 사이트와 일치하지 않습니다
3. 중대한! example.com, book.com 등과 같은 작업 도메인에서만 작동합니다 (로컬 호스트 또는 AWS LB URL에서는 작동하지 않음)

도메인 URL을 사용하는 것이 좋습니다

요령은 ID를 만들 때 올바른 리디렉션 URL을 입력하는 것입니다. ID가 '편집'을 통해 생성되면 리디렉션 URL을 업데이트해도 작업이 완료되지 않습니다. 나를 위해 일한 것은 전체 '벤더'폴더를 복제하고 'oauth'파일이있는 동일한 위치에 복사하는 것입니다 (토큰을 성공적으로 생성 한 다음 중복 '벤더'폴더를 삭제할 수 있습니다). '../vendor/autoload'를 통해 공급 업체 폴더를 가리 키려고하면 작동하지 않기 때문입니다.

따라서 기존의 번거로운 클라이언트 OAuth ID를 삭제 하고이 방법을 시도하면 작동합니다.