web-dev-qa-db-fra.com

Problème HTTPS de l'API de connexion Facebook

Le site Web sur lequel je travaille a une option de connexion Facebook, mais récemment, un utilisateur a signalé que cela ne fonctionnait pas pour lui. 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.

Existe-t-il une option que je peux fournir à l'API pour qu'elle fonctionne sur les mêmes protocoles? Pour info, le site Web principal fonctionne sur HTTP (pas de S).

C'est particulièrement étrange car il semble qu'il ait cessé de fonctionner tout d'un coup (mais il est possible que cela ait toujours été un problème car je suis nouveau et j'apprends ce système).

J'ai ce code en bas 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>
facebook-javascript-sdkfacebook-login
31
SapphireSun

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>
6
Shawn E Carter

J'ai eu le même problème sur mon environnement de développement. Étapes à résoudre (je ne sais pas lequel l'a fait):

  1. Déconnectez-vous de l'application.
  2. Supprimez tous les cookies du navigateur.
  3. Connectez-vous à FB en tant qu'utilisateur prévu (pas à la page développeur mais à la page des autorisations de l'application utilisateur).
  4. Supprimez l'autorisation d'application de la page des autorisations FB.
  5. Déconnectez-vous de FB.
  6. Rechargez l'application et essayez de vous connecter.

Je n'aurais pas répondu dans une réponse aussi vaudou à moins d'y avoir passé quelques heures, et j'apprécierais toute sorte de sorcellerie pour m'en sortir.

3
Yuval Dimnik

j'ai été avec ce problème ...
ma solution:
déplacez 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){}

heureux :)

exemple jquery:

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