198

純粋に JavaScript で OAuth 認証フローを開発しており、ポップアップで「アクセス許可」ウィンドウをユーザーに表示したいのですが、ブロックされます。

によって作成されたポップアップ ウィンドウ、window.openまたはwindow.showModalDialog別のブラウザのポップアップ ブロッカーによってブロックされないようにするにはどうすればよいですか?

4

11 に答える 11

319

一般的なルールは、ポップアップ ブロッカーは、ユーザーの直接の操作window.openによって呼び出されない JavaScript から呼び出された場合、または同様のものが作動するというものです。つまり、ポップアップ ブロッカーにヒットすることなくボタン クリックに応答して呼び出すことができますが、同じコードをタイマー イベントに入れるとブロックされます。コール チェーンの深さも要因です。一部の古いブラウザは、直前の呼び出し元のみを確認します。新しいブラウザは、少しバックトラックして、呼び出し元の呼び出し元がマウス クリックなどであるかどうかを確認できます。ポップアップ ブロッカーを回避するために、できる限り浅くしてください。window.open

于 2010-04-06T19:32:15.640 に答える
26

良い習慣として、ポップアップがブロックされたかどうかをテストし、その場合に対処することをお勧めします。window.open には戻り値があり、アクションが失敗した場合、その値は null になる可能性があることを知っておく必要があります。たとえば、次のコードでは:

function pop(url,w,h) {
    n=window.open(url,'_blank','toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width='+w+',height='+h);
    if(n==null) {
        return true;
    }
    return false;
}

ポップアップがブロックされている場合、window.open は null を返します。したがって、関数は false を返します。

例として、任意のリンクからこの関数を直接呼び出すことを想像してみてくださいtarget="_blank"。 .falsetrue

<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >

このようにして、機能する場合はポップアップが表示され、機能しない場合は _blank ウィンドウが表示されます。

ポップアップが開かない場合は、次のことができます。

  • 例のように空白のウィンドウを開き、次に進みます
  • 偽のポップアップ (ページ内の iframe) を開く
  • ユーザーに通知します (「このサイトのポップアップを許可してください」)
  • 空白のウィンドウを開き、ユーザーなどに通知します。
于 2015-09-25T11:20:26.510 に答える
8

GoogleのoauthJavaScriptAPIから：

http://code.google.com/p/google-api-javascript-client/wiki/Authentication

それが読む領域を参照してください：

認証の設定

クライアントのOAuth2.0の実装では、ポップアップウィンドウを使用して、ユーザーにサインインしてアプリケーションを承認するように求めます。gapi.auth.authorizeを最初に呼び出すと、ポップアップウィンドウが間接的に開くため、ポップアップブロッカーがトリガーされる可能性があります。ポップアップブロッカーが認証呼び出しでトリガーされないようにするには、クライアントのロード時にgapi.auth.init（callback）を呼び出します。提供されたコールバックは、ライブラリが認証呼び出しを行う準備ができたときに実行されます。

即時の応答があるかどうかを説明する方法で、上記の実際の答えに関連していると思いますが、ポップアップアラームは作動しません。「gapi.auth.init」がそれを作成しているので、APIはすぐに実行されます。

実用的なアプリケーション

npmのノードパスポートと各プロバイダーのさまざまなパスポートパッケージを使用して、オープンソース認証マイクロサービスを作成しました。サードパーティへの標準のリダイレクトアプローチを使用して、サードパーティにリダイレクトURLを提供しました。これはプログラムによるものだったので、ログイン/サインアップの場合と特定のページでリダイレクトする場所を変えることができました。

github.com/sebringj/athu

passportjs.org

于 2012-06-05T19:14:13.417 に答える