494

ウェブサイト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を使用します。

4

43 に答える 43

488

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

プロジェクトのコンソールに移動し、API アクセスの下を確認します。client ID&が表示client secretされ、リダイレクト URI のリストが表示されます。必要な URI がリストにない場合は、[設定の編集] をクリックして、URI をリストに追加します。

EDIT：（以下の高評価のコメントから）Google APIコンソールを更新し、その変更が存在するのには時間がかかる場合があることに注意してください。通常は数分ですが、長く感じる場合もあります。

于 2012-07-14T16:57:15.940 に答える
157

www私の場合はnon-wwwURLでした。実際のサイトにはwwwURL があり、Google デベロッパー コンソールの承認済みリダイレクト URInon-wwwにはURL がありました。したがって、リダイレクト URI に不一致がありました。Authorized Redirect URIsGoogle Developer Console をwwwURLに更新することで解決しました。

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

  • http://承認されたリダイレクト URI で使用しhttps://、実際の URL として使用する、またはその逆
  • http://example.com/承認されたリダイレクト URI で末尾のスラッシュ ( ) を使用し、実際の URL として末尾のスラッシュ ( ) を使用しない、http://example.comまたはその逆

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

  1. https://console.developers.google.comに移動します

  2. プロジェクトを選択

プロジェクトを選択

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

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

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

API Manager メニューを選択

  1. メニューをクリックしCredentialsます。の下OAuth 2.0 Client IDsに、クライアント名が表示されます。私の場合は、ですWeb Client 1。それをクリックすると、 Authorized Javascript OriginとAuthorized redirect URIsを編集できるポップアップが表示されます。

資格情報メニューを選択します

注: 認証済み URI には、デフォルトですべての localhost リンクが含まれます。ライブ バージョンには、ドメインだけでなくフル パスを含める必要があります (例: https://example.com/path/to/oauth/url )。

プロジェクトとクライアント ID の作成に関する Google の記事を次に示します。

于 2015-12-25T11:19:43.937 に答える
55

私のWebアプリケーションでは、次のように書いて間違いを修正しました

instead of : http://localhost:11472/authorize/
type :      http://localhost/authorize/
于 2014-10-19T06:59:21.660 に答える
37

Google もプロトコルをチェックするため、プロトコル「http://」または「https://」を必ずチェックしてください。リストに両方の URL を追加することをお勧めします。

于 2014-02-12T13:48:40.950 に答える
12

これは、「1つの」解決策が存在しないという非常に奇妙で迷惑なようです。私にとってhttp://localhost:8000はうまくいきませんでしたが、http://localhost:8000/はうまくいきました。

于 2015-06-03T15:16:11.783 に答える
10

この回答は、このマイクの回答と同じであり、ジェフの回答はどちらもクライアント側に設定redirect_uriされています。postmessageサーバー側と、この構成に適用される特別な状況についてさらに追加したいと思います。

技術スタック

バックエンド

フロントエンド

「コード」フロー (特に Google OAuth2 の場合)

概要: React --> ソーシャル認証 "コード" をリクエスト --> 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_URIDjango のすべてsettings.pyは不要です。(これらは Django REST Social Auth で使用される定数です) つまり、Django でリダイレクト URL に関する設定を行う必要はありません。"redirect_uri": "postmessage"React フロントエンドで十分です。あなたの側で行わなければならないソーシャル認証作業は、フロントエンドでのすべての Ajax スタイルの POST 要求であり、フォームをまったく送信しないため、実際にはデフォルトではリダイレクトが発生しないため、これは理にかなっています。そのため、コード + JWT フローを使用している場合、リダイレクト URL が役に立たなくなり、サーバー側のリダイレクト URL 設定が有効になりません。
  4. Django REST ソーシャル認証は、アカウントの作成を処理します。これは、Google アカウントの電子メール/姓をチェックし、データベース内のアカウントと一致するかどうかを確認することを意味します。そうでない場合は、正確なメールアドレスと名字を使用して作成されます。ただし、ユーザー名はyouremailprefix717e248c5b924d60、電子メールがyouremailprefix@example.com. ランダムな文字列を追加して、一意のユーザー名を作成します。これはデフォルトの動作です。カスタマイズして、ドキュメントを自由に掘り下げることができると思います。
  5. フロントエンドはそのトークンを保存し、特に作成/削除/更新などのバックエンド サーバーに対して CRUD を実行する必要がある場合、Authorizationヘッダーにトークンを添付してバックエンドにリクエストを送信すると、Django バックエンドはそれをログインとして認識します。つまり、認証済みです。ユーザー。もちろん、トークンの有効期限が切れた場合は、別のリクエストを行ってトークンを更新する必要があります。

なんてこった、私は6時間以上費やして、ついにこれを正しくしました! 私はこれを見たのはこれが初めてだとpostmessage思います。組み合わせに取り組んでいる人は、Django + DRF + JWT + Social Auth + React間違いなくこれにクラッシュします。ここでの回答以外に、これについて言及している記事がないとは信じられません。しかし、Django + React スタックを使用している場合は、この投稿が時間を大幅に節約できることを願っています。

于 2019-03-06T03:46:44.970 に答える
8

私の場合、資格情報のアプリケーション タイプは「その他」です。Authorized redirect URIsそのため、資格情報ページで見つけることができません。Application type:"Web application" に表示されているようです。ただし、Download JSONボタンをクリックしてclient_secret.jsonファイルを取得することはできます。 ここに画像の説明を入力

json ファイルを開くと、次のようなパラメーターが見つかります"redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]。http://localhostを使用することにしましたが、問題なく動作します。

于 2016-03-12T05:31:04.497 に答える
4

上記の解決策はどれもうまくいきませんでした。以下でした

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

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

于 2016-11-04T14:54:38.883 に答える
4

1.このようなエラーが表示されます

ここに画像の説明を入力

2.次に、リクエストの詳細をクリックする必要があります ここに画像の説明を入力

この後、その URL をコピーしてhttps://console.cloud.google.com/に追加する必要があります。

  1. https://console.cloud.google.com/に移動します

ここに画像の説明を入力 ここに画像の説明を入力

  1. [メニュー] -> [API とサービス] -> [資格情報] をクリックします

ここに画像の説明を入力

  1. このようなダッシュボードが表示されたら、[OAuth クライアントの編集] をクリックします。 ここに画像の説明を入力

  2. ここで、つまり、ここでは http://algorithammer.herokuapp.comと 呼ばれるエラーを示した URL を追加しAuthorized Javascript Originsます。 Authorized redirect URLSredirect_uri_mismatchAuthorized Javascript OriginsAuthorized redirect URLS

  3. [保存] をクリックして 5 分間待ってから、再度ログインを試みます。

于 2022-02-04T06:54:47.793 に答える
3

新しいコンソールでリダイレクト URL を設定する場所を見つけるのに苦労している人: APIs & Auth -> Credentials -> OAuth 2.0 client IDs -> リンクをクリックして、すべてのリダイレクト URL を見つけます。

于 2015-10-21T11:37:58.950 に答える
2

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

バックエンド サーバーから Google API にアクセスしてテストしていたところ、このエラーに直面していました。redirect_uriフロントエンドは理にかなっているのに、これは単なるバックエンドであるため、なぜ与える必要があるのか​​ 疑問に思っていました。

私が行っていたのはredirect_uri、サーバーとは異なる (有効ですが) を与えることでした (これは単なるプレースホルダーであると仮定すると、Google に登録するだけで済みます) が、トークン コードを作成したフロントエンド URL は異なっていました。したがって、サーバー側のテスト (リダイレクト uri が異なる) でこのコードを渡しているときに、このエラーに直面していました。

だから、この間違いをしないでください。redirect_uriGoogleが信頼性を検証するために使用するため、フロントエンドがサーバーのものと同じであることを確認してください。

于 2018-11-18T11:57:33.867 に答える
1

必要なことは、開発者コンソールに戻り、[APIs & Auth] > [同意画面] に移動して入力することです。具体的には商品名。

于 2015-06-10T08:15:01.590 に答える
1

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

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

Web アプリケーション: 有効なドメイン名が必要です [リダイレクト URI:]

于 2015-04-04T13:04:14.673 に答える
1

次のチェックを試してください。

  1. コンソールとアプリケーションで ID をバンドルします。「org.peredovik.${PRODUCT_NAME:rfc1034identifier}」のようにアプリケーションのバンドル ID を設定することをお勧めします。
  2. タブ情報で URL タイプを追加したかどうかを確認します。識別子と URL スキームにバンドル ID を入力し、役割を編集者に設定します。
  3. cloud.google.com のコンソールで、[API と認証] -> [同意画面] で、アプリケーションに関するフォームに入力します。「商品名」は必須項目です。

楽しみ ：）

于 2014-01-02T16:49:50.913 に答える
-2

更新 --> Android アプリで動作中

使用するだけです：

http://localhost/oauth2callback

Web アプリのリダイレクト リンクなしで独自のロジックを処理する場合

于 2016-12-14T14:20:29.610 に答える