Problème HTTPS de l'API de connexion Facebook

Question

Le site que je suis en train de travailler sur a un Facebook login option, mais récemment, un utilisateur a signalé qu'il n'était pas de travail pour eux. J'ai désactivé mes extensions, etc, j'ai eu cette erreur dans ma console:

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.

Est-il une option que je peux pour l'alimentation de l'API qui permettra de le faire fonctionner sur les mêmes protocoles? Pour info, le site web principal s'exécute sur HTTP (pas de S).

C'est surtout bizarre, parce qu'il semble comme il a cessé de travailler tout d'un coup (mais il est possible que cela a toujours été un problème car je suis nouveau et je suis l'apprentissage de ce système).

J'ai ce code au pied de ma page:

<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>

Answer 1

Si vous ne chargez pas l'async javascript sdk, vous pouvez souvent voir cette erreur.

voir: https://developers.facebook.com/docs/javascript/quickstart

en outre, si vous utilisez des plugins Facebook via le code iframe, assurez-vous que le protocole url src correspond.

 <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>
 

Answer 2

J'ai eu le même problème sur mon environnement de développement. Les étapes pour résoudre (pas sûr que l'on a fait):

1. Vous déconnecter de l'application.
2. Supprimer tous les cookies du navigateur.
3. Se connecter à FB en tant que l'utilisateur (pas pour le développeur page mais à l'app de l'utilisateur de la page autorisations).
4. Supprimer l'application de la permission de le FB de la page autorisations.
5. Journal de FB.
6. Recharger l'application et essayez de vous connecter.

Je n'aurais pas répondu dans un vaudou réponse, sauf si j'avais passé quelques heures dessus, et serait la valeur de toute sorte de sorcellerie, pour me mettre hors de lui.

Answer 3

j'ai été avec ce problème ...
ma solution:
déplacer votre appel facebook vers la page statique ...

 (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'));
 

définir un rappel ajax:

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

content :)

exemple jquery:

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

Answer 4

Pour ce que ça vaut, j'ai réussi à résoudre ce problème en convertissant en HTTPS (ce que j'aurais dû faire de toute façon).