web-dev-qa-db-ja.com

Google OAuth 2認証 - エラー：redirect_uri_mismatch

ウェブサイト上で 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 を使います。

authenticationoauth-2.0google-signin
329
user984621

リダイレクトURI（応答が返される場所）をAPIコンソールに登録する必要があります。エラーは、それを行っていないか、正しく行っていないことを示しています。

あなたのプロジェクトのコンソールに行き、API Accessの下を見てください。あなたはそこにあなたのclient IDとclient secretをリ​​ダイレクトURIのリストと共に見るべきです。必要なURIが表示されていない場合は、[設定の編集]をクリックしてURIをリストに追加します。

編集：（下記の高評価のコメントから）グーグルAPIコンソールを更新し、その変更が存在することにはしばらく時間がかかることに注意してください。一般的にほんの数分ですが、時々それはもっと長いようです。

336
Steve Bazyl

私の場合、それはwwwとnon-wwwのURLでした。実際のサイトのURLはwwwで、Google Developer Consoleの 承認されたリダイレクトURI のURLはnon-wwwです。したがって、リダイレクトURIに不一致がありました。 Google Developer ConsoleのAuthorized Redirect URIsをwwwのURLに更新することで解決しました。

他の一般的なURIの不一致は次のとおりです。

  • Authorized Redirect URIでhttp://を、実際のURLとしてhttps://を使用する、またはその逆
  • Authorized Redirect URIで末尾のスラッシュ（http://example.com/）を使用し、実際のURLとして末尾のスラッシュ（http://example.com）を使用しない、またはその逆

これは、リダイレクトURIを更新するために開発者コンソールページを見つけるのが困難になっている人に役立つように、Google開発者コンソールの段階的なスクリーンショットです。

  1. https://console.developers.google.com にアクセスします

  2. プロジェクトを選択してください

Select your Project

  1. メニューアイコンをクリック

Click on the menu icon

  1. API Managerメニューをクリック

Select API Manager menu

  1. Credentialsメニューをクリックしてください。そしてOAuth 2.0 Client IDsの下に、あなたのクライアント名があります。私の場合、それはWeb Client 1です。それをクリックするとポップアップが表示され、そこで編集可能な 許可されたJavascript Origin および 許可されたリダイレクトURI となります。

Select Credentials menu

これは プロジェクトとクライアントIDの作成 に関するGoogleの記事です。

87
Mukesh Chapagain

Google+のJavaScriptボタン を使用している場合は、実際のURIの代わりにpostmessageを使用する必要があります。グーグルの文書が何らかの理由でそれを明確に述べていないので、これを理解するのに私はほぼ一日かかった。

80
Mike Keskinov

私のWebアプリケーションのために私は書くことによって私の間違いを直しました

instead of : http://localhost:11472/authorize/
type :      http://localhost/authorize/
37
Guven Sezgin Kurt

グーグルもプロトコルをチェックするので、プロトコル「http：//」または「https：//」を必ずチェックしてください。両方のURLをリストに追加したほうがよいでしょう。

29
Chintan

GoogleAuth.grantOfflineAccess() APIなど、クライアント側で 認証コード を取得したすべてのフローで、コードをサーバーに渡したい場合は、それを使用します。アクセストークンとリフレッシュトークンを保存したら、redirect_uriの代わりにリテラル文字列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"}

postmessageについてさえ言及している唯一のGoogleドキュメンテーションはこれ 古いGoogle+サインインドキュメント です。これがスクリーンショットです。 アーカイブリンク G +が終了し、このリンクが消える可能性があるためです。

Legacy Google+ API DOC

オフラインアクセスのためのドキュメントページ がこれに言及していないことは絶対に許されません。 #FacePalm

24
Jeff Ward

これは「奇妙な」迷惑なように思えます。私の場合 http：// localhost：8000 はうまくいきませんでしたが http：// localhost：8000/ はうまくいきました。

7
arshpreet

アプリを https://code.google.com/apis/console に登録してクライアントIDを作成すると、1つ以上のリダイレクトURIを指定できます。認証URIのredirect_uriパラメータの値は、それらのうちの1つと正確に一致する必要があります。

6
Kathir

チェックリスト：

  • httpまたはhttps
  • &または&amp;？
  • 末尾のスラッシュ（/）または開く
  • (CMD/CTRL)+F、認証情報ページで完全に一致するものを検索します。見つからない場合は、見つからないものを探します。
  • Googleがそれを更新するまで待ちます。あなたが頻繁に変更している場合、またはそれがプールにとどまる可能性がある場合は、30分ごとに起こる可能性があります。私の場合は、有効になるまでに30分近くかかりました。
5
itsazzad

2015年7月15日 - ログイン時にこのスクリプトで先週作業していたサインイン

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

動作を停止し、Error: redirect_uri_mismatchでエラー400を引き起こし始め

そしてDETAILSセクションに：redirect_uri=storagerelay://...

私はそれをに変えることによってそれを解決しました：

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

リダイレクトURLでは大文字と小文字が区別されます。

私の場合、両方を追加しました： http：// localhost：5023/AuthCallback/IndexAsynchttp：// localhost：5023/authcallback/indexasync

4
h3n

上記の解決策のどれも私のために働きませんでした。以下でした

承認されたリダイレクトURLを - https：// localhost：44377/signin-googleに変更します

これが誰かに役立つことを願っています。

3
Dheeraj Palagiri

この答えは このMikeの答え 、および Jeffの答え と同じで、どちらもクライアント側でredirect_uriをpostmessageに設定します。私はサーバー側について、そしてまたこの設定に適用される特別な状況についてもっと加えたいと思います。

テックスタック

バックエンド

フロントエンド

「コード」フロー（特にGoogle OAuth2用）

要約：React - >ソーシャル認証を要求する "code" - >あなた自身のバックエンドサーバー/データベースの観点から "login"ステータスを取得するためのjwtトークンを要求する。

  1. Frontend（React）は認証コードを取得するためにresponseType="code"付きの「Googleログインボタン」を使用します。 （それはトークンではなく、アクセストークンでもない！）
    • 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（トークン）をフロントエンドに送り返します。フロントエンドはトークンを取得してどこかに保存することができます。
    • DjangoのREST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URIのREST_SOCIAL_DOMAIN_FROM_Origin、REST_SOCIAL_OAUTH_REDIRECT_URI、settings.pyはすべて不要です。 （これらはDjango REST Social Authで使用される定数です）要するに、DjangoのリダイレクトURLに関連した設定は必要ありませんです。 Reactフロントエンドの"redirect_uri": "postmessage"で十分です。あなたがしなければならないソーシャル認証作業はすべてフロントエンドでのAjaxスタイルのPOSTリクエストであり、フォームをまったく送信しないため、デフォルトではリダイレクトは発生しません。そのため、コード+ JWTフローを使用している場合にリダイレクトURLが無用になり、サーバーサイドのリダイレクトURLの設定が有効にならないことがあります。
  4. Django RESTソーシャル認証はアカウントの作成を処理します。これは、Googleアカウントのemail/last first nameをチェックし、それがデータベース内のいずれかのアカウントと一致するかどうかを確認することを意味します。そうでない場合は、正確なEメールアドレスと姓を使用して作成します。しかし、あなたのメールアドレスがyouremailprefix717e248c5b924d60の場合、ユーザー名は[email protected]のようになります。それはユニークなユーザー名を作るためにランダムな文字列を追加します。これがデフォルトの振る舞いです、私はあなたがそれをカスタマイズすることができて、彼らのドキュメンテーションを自由に調べられると信じています。
  5. フロントエンドはそのトークンを保存し、バックエンドサーバーにCRUDを実行しなければならないとき、特にcreate/delete/updateします。もしあなたがAuthorizationヘッダにトークンを添付してバックエンドにリクエストを送ると、認証されたユーザーもちろん、あなたのトークンが期限切れになった場合、あなたは別の要求をすることによってそれをリフレッシュしなければなりません。

おお、私の長所は、私は6時間以上を費やして、そしてついにこれを正しくした！私はこれが私がpostmessageなことを見たのは今回が初めてだと思います。 Django + DRF + JWT + Social Auth + Reactの組み合わせで作業している人は誰でも間違いなくこれに衝突します。私がここで答えを除いてこれに言及している記事のどれも信じることができません。しかし、Django + Reactスタックを使っているなら、この投稿があなたの時間を節約できることを本当に願っています。

2
Shaung Cheng

Railsユーザー（ omniauth-google-oauth2 docsから）：

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 '

注意：末尾の "/"を含めないでください

2
brntsllvn

このチュートリアルを使用する場合は、 https://developers.google.com/identity/sign-in/web/server-side-flow にアクセスしてください。

GOでは、これで問題が解決しました。

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

uRLの末尾の余分な/に注意してくださいhttp://localhost:8000はhttp://localhost:8000/とは異なります

2
wolfgang

私の場合、私の認証情報アプリケーションタイプは "Other"です。そのため、認証情報ページにAuthorized redirect URIsが見つかりません。アプリケーションの種類： "Webアプリケーション"に表示されます。しかし、Download JSONボタンをクリックしてclient_secret.jsonファイルを取得することができます。 enter image description here

Jsonファイルを開くと、次のようなパラメータを見つけることができます："redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]。私は http：// localhost を使用することを選択しましたが、それは私にとってはうまくいきます。

2
codezjx

私のためにそれは '承認されたリダイレクトURI'リストで私が間違ってhttps://developers.google.com/oauthplayground/の代わりにhttps://developers.google.com/oauthplaygroundを置いたからです（最後に/がありません）。

1
Jacek Góraj

新しいコンソールでリダイレクトURLを設定する場所を見つけるのに苦労している人：[APIと認証] - > [認証情報] - > [OAuth 2.0クライアントID] - >リンクをクリックしてすべてのリダイレクトURLを検索します。

1
Steji

@ Bazylの答えを完成させてください。私が受け取ったメッセージの中で、彼らはURI "http://localhost:8080/"を言及しました（もちろん、これはGoogle内部の設定のようです）。私はそのURIの認証URI "http://localhost:8080/"を変更しました、そしてメッセージはもう表示されませんでした...そしてビデオはアップロードされました... APISドキュメンテーションは非常に不完全です...単に「ラッキー」と感じますが、それに関する優れたドキュメントが欠如しています.... :(はい、うまくいきましたが、失敗した理由もうまくいった理由もまだわかりません... WebでURIを確認するための場所が1つあり、それがclient_secrets.jsonにコピーされています...同じURIを書くべき場所が3つある場合は得られません。グーグルのAPIのGUIデザインはかなり足りません...

1
David L

[APIとサービス] - > [認証情報] - > [認証情報の作成] - > [OAuth] - > [その他]の下に新しいクライアントIDを作成する必要がありました。

それから私は私のYouTubeアカウントにアップロードしている私のコマンドラインプログラムでclient_secret.jsonをダウンロードして使用しました。 Web App OAuthクライアントIDを使用しようとしたところ、ブラウザでリダイレクトURIエラーが発生しました。

1
James T.

ドメインとIPの後にパスを含めることを忘れないでください。私の場合、私は忘れていました：

/ oauth2callback

0
Matrym

私は2つのリクエストURI、 http：// xxxxx/client/api/spreadheet/authredirect と http：// localhost を持っていました。

私はこの質問に対するトップの回答をすべて試してみましたが、どれも私の問題ではないことを確認しました。

コンソールからlocalhostを削除し、プロジェクト内のclient_secret.jsonを更新したところ、ミスマッチエラーがなくなりました。

0
paul

あなたがする必要があるのはあなたの開発者コンソールに戻りそしてAPI＆Auth>同意スクリーンへ行きそしてそれを記入することです。具体的には、商品名です。

0
Satnam Sync

これらのチェックをしてみてください。

  1. コンソールとアプリケーションのバンドルID。私はこの "org.peredovik。$ {PRODUCT_NAME：rfc1034identifier}"のようにアプリケーションのバンドルIDを設定することを好みます。
  2. [情報]タブでURLの種類を追加したかどうかを確認する[バンドルID]を[識別子とURLの設定]に入力し、役割を[編集者]に設定します。
  3. Cloud.google.comのコンソールの[API＆auth] - > [同意画面]で、アプリケーションに関するフォームに記入します。 「製品名」は必須フィールドです。

楽しい ：）

0
Vlad

私の場合は、Webアプリケーション/インストール済みアプリケーションのクライアントIDタイプを確認する必要がありました。

インストールされているアプリケーション： http：// localhost [URIのリダイレクト]この場合、localhostは単に機能します。

ウェブアプリケーション：あなたは有効なドメイン名を必要とします[リダイレクトURI：]

0
Bhuwan Gautam

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 私は signin-google url（これはデフォルトのGoogleコールバックです） without www そして問題は解決しました。

（あなたのドメインに応じて）それを考慮に入れるあなたはwww urlsの有無にかかわらず両方を追加する必要があるかもしれないしないかもしれない

0
Code_Worm

ポート3000を使用するローカルマシンのReactjsアプリで認証するのと同じ問題がありました。
承認済みドメインにlvh.meを追加し、承認済みのOriginおよび承認済みリダイレクトURLにhttp://lvh.me:3000を追加しました。それぞれ次の画像を参照してください。

注：検証済みドメインに複数のサイトを追加できます。ローカルマシン、ステージングまたはその他の環境のi-e

enter image description here

enter image description here

0
Sarwan Kumar

Googleでログインしようとしている間、私はMeteorとNgrokを使用してこの問題を抱えていました。私はNgrok URLをリダイレクトURLとしてGoogle Developer Consoleに入れ、Ngrok URLページに行きました。問題は、アプリの実行時にMeteorのROOT_URLを使用しなかったことです。そのため、リダイレクトはNgrokのURLに挿入されたlocalhost:3000に行われます。 Meteorの設定でNgrokのURLをROOT_URLとして追加するか、端末でアプリケーションを実行する前にエクスポートすることで修正してください。export ROOT_URL=https://my_ngrok_url

0
Tincho825

Localhostで動作させるために、そしてweb-serverに使用するなら、提供してください。

Authorized JavaScript origins (Client ID for web appication)
e.g. http://localhost:4200
0
Deeksha Bilochi

トリックは、IDを作成する時点で正しいリダイレクトURLを入力することです。 IDを 'Edit'で作成した後でリダイレクトURLを更新しても、仕事がうまくいかないことがわかりました。私にとってもうまくいったのは、 'vendor'フォルダ全体を複製し、それを 'oauth'ファイルと同じ場所にコピーすることです（トークンが正しく生成され、その後複製した 'vendor'フォルダを削除できるまで）。これは '../vendor/autoload'でベンダーフォルダを指定しようとしてもうまくいかなかったからです。

それで、あなたの既存の厄介なクライアントOAuth IDを削除して、そしてこのアプローチを試みなさい、それはうまくいくでしょう。

0
Raymond Wachaga

下記はエラーの原因です：redirect_uri_mismatch問題が発生します：

  1. Googleプロジェクトでは、リダイレクトURLフィールドは空白です。
  2. リダイレクトURLがあなたのサイトと一致しません
  3. 重要！ example.com、book.comなどの作業ドメインでのみ機能します（ローカルホストまたはAWS LB URLでは機能しません）。

ドメインURLを使用することをお勧めします

0
Vernit Gupta

フロントエンドアプリとバックエンドAPIがあります。

私のバックエンドサーバーから私はグーグルAPIを打ってテストしていて、このエラーに直面していました。私はずっと前から、これが単なるバックエンドなので、なぜredirect_uriを与える必要があるのか​​疑問に思いました。

私がやっていたのはサーバーとは異なるredirect_uri（有効ではありますが）を与えることでした（これは単なるプレースホルダーであると仮定すれば、それは単にgoogleに登録されるだけです）だから私は私のサーバー側のテストでこのコードを渡していたとき（リダイレクトURIは異なっていました）、私はこのエラーに直面していました。

だから、この間違いをしないでください。あなたのフロントエンドのredirect_uriがあなたのサーバーのものと同じであることを確認してください。

0
omair azam