11

Twitter や Facebook などのサーバーから OAuth を処理する場合、ユーザーをアプリの許可を求める URL にリダイレクトする可能性が高くなります。通常、リンクをクリックした後、AJAX を介してサーバーに要求を送信し、認証 URL を返します。

しかしwindow.open、応答が受信されたときに使用しようとすると、ブラウザがポップアップをブロックし、役に立たなくなります。もちろん、ユーザーを新しい URL にリダイレクトすることもできますが、それではユーザー エクスペリエンスが損なわれるだけでなく、煩わしくなります。IFRAME は使用できませんが、許可されていません (ロケーション バーが表示されないため)。

では、どうやってそれを行うのですか？

4

2 に答える 2

28

答えは非常に簡単で、ブラウザを問わず問題なく動作します。AJAX 呼び出し (この例では jQuery を使用します) を実行するときは、次のようにします。と の 2 つのボタンがあるフォームがあるとしLogin with TwitterますLogin with Facebook。

<button type="submit" class="login" value="facebook" name="type">Login with Facebook</button>
<button type="submit" class="login" value="twitter" name="type">Login with Twitter</button>

次に、魔法が起こる Javascript コード

$(function () {
    var
        $login = $('.login'),
        authWindow;

    $login.on('click', function (e) {
        e.preventDefault();
        /* We pre-open the popup in the submit, since it was generated from a "click" event, so no popup block happens */
        authWindow = window.open('about:blank', '', 'left=20,top=20,width=400,height=300,toolbar=0,resizable=1');
        /* do the AJAX call requesting for the authorize URL */

        $.ajax({
            url: '/echo/json/',
            type: "POST",
            data: {"json": JSON.stringify({"url": 'http://' + e.target.value + '.com'})}
            /*Since it's a jsfiddle, the echo is only for demo purposes */
        })
        .done(function (data) {
            /* This is where the magic happens, we simply redirec the popup to the new authorize URL that we received from the server */
            authWindow.location.replace(data.url);
        })
        .always(function () {
            /* You can poll if the window got closed here, and so a refresh on the main page, or another AJAX call for example */
        });
    });
});

JSFiddle http://jsfiddle.net/CNCgG/の POC は次のとおりです。

これはシンプルで効果的です:)

于 2013-05-03T14:52:34.483 に答える
8

async: false を追加してみてください。それは働いているはずです

$('#myButton').click(function() {
$.ajax({
    type: 'POST',
    async: false,
    url: '/echo/json/',
    data: {'json': JSON.stringify({
        url:'http://google.com'})},
    success: function(data) {
        window.open(data.url,'_blank');
    }
});
});
于 2014-05-15T22:21:20.203 に答える