web-dev-qa-db-ja.com

ユーザーがすでにFacebookにログインしている場合、FBログインコールバック関数が応答しない

私はjsを使用してfbconnectを使用しています。これは私のコードです:

<script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'xxxxxxxxxxxxxxxx',
        status     : true, 
        cookie     : true,
        xfbml      : true,
        oauth      : true
      });

      FB.Event.subscribe('auth.login', function(response) {
        obj=response.authResponse;
        token=obj.accessToken;
        setCookie("access_token_fb", token, '2');

        window.location.reload();
      },true);
    };
    (function(d){
       var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all.js";
       d.getElementsByTagName('head')[0].appendChild(js);
     }(document));
  </script>

私が使用しているログイン用:

 <div class="fb-login-button" scope="email,user_checkins"  >Login with Facebook</div>

サブスクライブ関数の「auth.login」には、ユーザーがfbボタンをクリックし、まだFBにログインしていない場合にのみ呼び出される応答ハンドラーがあり、fbウィンドウに自分の電子メールアドレスとパスワードを入力します。ユーザーがすでにFacebookにログインしている場合は、fbダイアログを開いたり閉じたりします。その後、応答処理者に制御を渡しません。 force = "true"を使用すると、ステータスの変化を検出してコールバック関数を呼び出すことができるとどこかで読みました。しかし、どこに力を加えるのかわかりません。私はそれがログインdivにあるべきだと思います。それは本当ですか、それとも他のアプローチがありますか?

お時間をいただきありがとうございます。

16
Hafiz

方法1:

DMCSが問題の正しい解決策を提供したと私は信じていますが、ここに別のアプローチ方法があります。カスタムログインリンクでFB.loginメソッドを使用します。

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId: 'YOUR-APP-ID',
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true
    });
};

function facebookLogin() {
    FB.login(function(response) {
        if (response.authResponse) {
            console.log('Authenticated!');
            // location.reload(); //or do whatever you want
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    },
    {
        scope: 'email,user_checkins'
    });
}

(function(d) {
    var js,
    id = 'facebook-jssdk';
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>

ボディマークアップ:

<div id='fb-root></div><!-- required for SDK initialization -->
<a id='fb-login' href='#' onclick='facebookLogin()'>Login with Facebook</a>

ボタンをクリックすると、FB.login内でコールバック関数が実行されます。

方法2:

または、FBログインボタンプラグインを使用して、auth.statusChangeにサブスクライブし、それに応じてユーザーのステータスを確認することもできます。

FB.Event.subscribe('auth.statusChange', function(response) {
  // check for status in the response
});

Fbログインボタンプラグインを使用していて、ユーザーがすでにログインしてアプリに接続している場合、ログインボタンは表示されないことに注意してください(ドキュメントを読んでください ここ

12
Jai Pandya

Facebookに手間のかかる作業を任せることをお勧めします。いくつかの変更に注意してください:1。channelUrlが指定され、2。FB.getLoginStatusの使用3.Cookieの設定の削除。 4.リッスンするイベントの変更(別のウィンドウでログアウトした場合、または他の場所でアプリの認証を解除した場合など)

    <script>
        window.fbAsyncInit = function() {
        FB.init({
            appId      : 'xxxxxxxxxxxxxxxx',
            status     : true, 
            cookie     : true,
            xfbml      : true,
            oauth      : true,
            channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html' // Channel File
        });

        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {

                var uid = response.authResponse.userID;
                var accessToken = response.authResponse.accessToken;

                // Do something with the access token


            } else {
                // Subscribe to the event 'auth.authResponseChange' and wait for the user to autenticate
                FB.Event.subscribe('auth.authResponseChange', function(response) {
                    // nothing more needed than to reload the page
                    window.location.reload();
                },true);      

                // now dynamically show the login plugin
                $('#mydiv').show();      
            }
        });


        };
        (function(d){
            var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            d.getElementsByTagName('head')[0].appendChild(js);
        }(document));
  </script>
6
DMCS

_status:true_を使用してFB SDKを初期化すると、ユーザーからログインステータスが取得され、保存されます。その時点から、FB.getLoginStatus()を呼び出すと、FBから最新のデータをフェッチすることにアクセスしませんが、代わりにFB.init()の時点で設定されたローカルに格納された変数を参照します。 20分ごとに1回だけ更新されると考えてください( https://github.com/facebook/facebook-js-sdk/commit/5b15174c7c9b9ea669499804d4a4c7d80771b036 を参照)-ただし、これを行うことで強制的に更新できます。

_FB.getLoginStatus(function() {...}, /*FORCE*/ true);
_

これにより、_auth.login_イベントが発生するか、そのイベント用に定義したハンドラーを_FB.getLoginStatus_に渡すことができます。

セットをさらに進めて、次のようにこの関数をポーリングすることもできます。

_setTimeout(function() {
    FB.getLoginStatus(function() {...}, /*FORCE*/ true);
}, 10000); // poll every 10 seconds
_
2
nav

「status:true」から「status:false」に変更すれば、あなたが望むことを実行できると思います。問題はステータスです。trueを指定すると、初期化時にステータスチェックが行われるため、ユーザーがボタンをクリックしても変更はありません。

ここで最後から2番目のコメントで答えを見つけました: http://www.bubblefoundry.com/blog/2011/03/the-facebook-login-button-and-logging-into-your-webapp/

1
Guy Goldstein

これは機能します:

FB.getLoginStatus(function(response) {
//only works when page loads, use FB.Event.subscribe for status change      
    statusChangeCallback(response);
    FB.Event.subscribe('auth.statusChange', function(response){
        //yay! do whatever here, there was a status change
    },true);  

});
0

交換する必要があります

FB.Event.subscribe('auth.authResponseChange', function(response){     

FB.Event.subscribe('auth.statusChange', function(response){ 

ステータス変更時のauth.authStatusChangeイベントトリガーとして、すでにログインしているか、資格情報を指定してログインしているか。

ありがとう

0
Hafiz