web-dev-qa-db-ja.com

Facebook Graph APIを使用したポップアップ認証の簡単な例

JavaScriptのポップアップを使用してFacebookにユーザーを認証させようとしています。今、私は持っています：

<input type="button" value="Connect with Facebook" onclick="window.open('https://graph.facebook.com/oauth/authorize?client_id=XXXXXXXXXXX&redirect_uri=http://example.com/step2&display=popup')"  />

ただし、ユーザーがFacebook経由でログインすると、ポップアップにはFacebook.comホームページが表示されるだけです。ポップアップでユーザーを認証し、グラフAPIからユーザーデータの取得を開始できるようになります。

これを行うためのより良い/簡単な方法はありますか？簡単な例に感謝します。

ありがとうございました。

javascripthtmlfacebook
22
ensnare

facebookのoauth2には2つの手順が含まれます。authorizeを呼び出してコードを取得し、access_tokenを呼び出してトークンを取得します。ポップログインに対処する1つの方法：

あなたがやったようにログインURLを新しいウィンドウで開くウィンドウはすぐにwindow.closeになります。

メインページで、window.openコードの後に​​、JavaScriptコードを追加して、ポップアップが閉じているかどうかを検出し、Cookieをキャプチャします。

var signinWin;
$('#FacebookBtn').click(function () {
        var pos = screenCenterPos(800, 500);
        signinWin = window.open("[URL]", "SignIn", "width=780,height=410,toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0,left=" + pos.x + ",top=" + pos.y);
        setTimeout(CheckLoginStatus, 2000);
        signinWin.focus();
        return false;
    });

function CheckLoginStatus() {
    if (signinWin.closed) {
        $('#UserInfo').text($.cookie("some_cookie");
    }
    else setTimeout(CheckLoginStatus, 1000);
}
27
JiJ

なぜ単純に...

function authorizeAppInPopup() {
    FB.login(function(response) {
        if (response.authResponse) {
            // User authorized app
        } else {
            // User cancelled login or did not fully authorize
        }
    }, {scope: 'publish_stream'});
}

??? ：]

https://developers.facebook.com/docs/reference/javascript/FB.login/

9
borisdiakur

この記事をご覧ください： ポップアップ認証をカスタマイズするためにPHPおよびjavascript を使用してFacebookポップアップ認証ウィンドウを作成.

4
Mahmud Ahsan

Avnerが言うように、子ウィンドウからのコールバック機能と、ウィンドウが閉じられるのを監視するタイマーの両方を実行することをお勧めします。そのようにして、特定のアクションなしで子ウィンドウを閉じた場合、親ウィンドウで適切なアクションを実行できます。

**On Child**
// Set oAuthToken from server side when it comes back from authenticating 
// and you have the token on the server side.
var oAuthToken = "";
oAuthToken = "--STRING INSERTED BY SERVER SIDE CODE--";
window.opener.pbFromPopup(oAuthToken);

**On Parent :** 
       function CheckLoginStatus() {
            if (authWindow.closed) {
                // Handle error if authentication window is closed 
                // without any action on Allow or Deny
                alert("window closed");                
                //location.href = "errorPage.aspx?error=authwinclosed;
            }
            else setTimeout(CheckLoginStatus, 1000);
        }
        function pbFromPopup(token) {
            // Function called from child window, 
            // token is passed back from child
            authWindow.close();
            // Put token in a hidden form field and submit the form to pass 
            // it back to the server
            $("#authToken").val(token);
            $("#form1").submit();
        }
3
LocalPCGuy