web-dev-qa-db-ja.com

Googleログインエラー：「popup_closed_by_user」

自分のクライアントIDを設定して実行した後、ログインプロセスを実行し、ポップアップで必要なGoogleアカウントを選択します。

これを選択すると、コンソールで次のエラーが発生してログインが失敗します。

err = {error: "popup_closed_by_user"}

誰かがこれを解決するのを助けてくれますか

google-login
8
Bhrungarajni

localhostをポートでテストする場合は、add port number Google開発者コンソールのAuthorized JavaScript originsセクション以下のように

http：// localhost：30

これで問題が解決することを願っています。

7
Raja Jaganathan

ブラウザのキャッシュをクリアしてみてください。

Chromeの場合：[設定]→[詳細設定]→閲覧データの消去→キャッシュされた画像とファイル

6
Craicerjack

Angular4-social-loginを使用してログインする場合も、同じ問題に直面しました。これは、ブラウザのCookieとポップアップ設定が原因です。 IEエラーなしで動作します。Chrome設定では、Cookie設定を変更してコンテンツ設定に移動し、ポップアップを許可します。次に、キャッシュをクリアしてリロードします。アプリ。

3
harsha

同じ問題があります。Google開発者コンソールでURLにポート番号を追加し、現在のページのキャッシュをクリアすると、すべてが正常に機能します。

enter image description here

2
Hoang Duong

onsuccessメソッドがエラーをスローしないことを確認してください。

私の場合、onsuccessメソッドのすべての失敗は、{ error: "popup_closed_by_user" }引数でonfailureに分類され、devtoolsコンソールにエラーメッセージは表示されませんでした。

0
Kris Ku

Firebase authでも同じ問題が発生しましたが、私の場合、localhostがすでに構成に含まれています。私のローカルIPアドレス（モバイルでのテスト用）も、承認済みドメインリストに追加する必要がありました。

0
Scrimothy

スクリプト（ '//apis.google.com/js/platform.js'）を読み込んだ後、DOMにiframeも挿入されます。例：

<body>
  ...
  <iframe aria-hidden="true" id="ssIFrame_google" sandbox="allow-scripts allow-same-Origin" src="https://accounts.google.com/o/oauth2/iframe#Origin=http%3A%2F%2Flocalhost%3A4200&amp;rpcToken=902946799.4541115&amp;clearCache=1" style="position: absolute; width: 1px; height: 1px; left: -9999px; display: none;"></iframe>
</body>

最初は、Googleがこれを行う理由が理解できなかったため、この要素を削除しました。

const iframeElem = document.getElementById('ssIFrame_google');
if (iframeElem) {
  iframeElem.remove();
}

しかし、認証の成功に関する応答を処理する段階に達したとき、私はあなたによって説明されたエラーpopup_closed_by_userに直面しました。
コードをコメント化してiframeを削除したところ、サインインは成功しました。

-
ブラウザがコンテンツをフィルタリングし、このiframeを削除すると想定できます。

0
ZoomAll

ポート番号を変更して、アプリを再実行してください。ポート番号を変更するには、package.jsonファイルのポート番号を更新する必要があります。

"scripts": {
    "start": "set PORT=3006 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 }

注：ここでポート番号は3006に変更されます。

次に、npm startを使用してアプリケーションを実行します。

0
suresh