web-dev-qa-db-ja.com

FacebookログインAPI HTTPSの問題

私が取り組んでいるWebサイトにはFacebookログインオプションがありますが、最近、ユーザーからは機能していないという報告がありました。拡張機能などを無効にしましたが、コンソールでこのエラーが発生しました：

Blocked a frame with Origin "https://www.facebook.com" from accessing a frame 
with Origin "http://static.ak.facebook.com".  The frame requesting access has 
a protocol of "https", the frame being accessed has a protocol of "http". 
Protocols must match.

同じプロトコルで動作するようにするAPIにフィードできるオプションはありますか？参考までに、プライマリWebサイトはHTTP（Sなし）で実行されます。

突然動作しなくなったように見えるため、これは特に奇妙です（ただし、私が新しく、このシステムを学んでいるため、これは常に問題であった可能性があります）。

私のページの一番下にこのコードがあります：

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : ..., // App ID
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true,  // parse XFBML
            channel: '//...mychannel.../channel'
        });

        FB.Event.subscribe('auth.authResponseChange', function(fbResponse) {
            // function that logs in user
        });
    };

    // Load the SDK Asynchronously
    (function(d){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));
</script>
facebook-javascript-sdkfacebook-login
31
SapphireSun

Javascript sdk asyncをロードしていない場合、このエラーが頻繁に表示される可能性があります。

参照： https://developers.facebook.com/docs/javascript/quickstart

さらに、iframeコードを介してFacebookプラグインを使用している場合は、src urlプロトコルが一致していることを確認してください。

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
6
Shawn E Carter

開発環境でも同じ問題がありました。解決するための手順（誰がそれをしたかわかりません）：

  1. アプリケーションからログアウトします。
  2. ブラウザからすべてのCookieを削除します。
  3. 目的のユーザー（開発者ページではなく、ユーザーアプリの権限ページ）としてFBにログインします。
  4. FB権限ページからアプリ権限を削除します。
  5. FBからログアウトします。
  6. アプリをリロードして、ログインしてみてください。

私はそれに何時間も費やさなければ、そのようなブードゥー教の答えで答えることはできなかったでしょう。

3
Yuval Dimnik

私はこの問題を抱えてきました...
私の解決策：
facebookコールを静的ページに移動...

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=IDDDD";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

ajaxコールバックを設定します。

try{setTimeout(FB.XFBML.parse);}catch(e){}

幸せ:)

jqueryの例：

$(document).ajaxComplete(function(){
            try{
                setTimeout(FB.XFBML.parse);
            }catch(ex){}
        });
1
ricardo