Connexion Facebook JS – FB.Event.subscribe ('auth.login') déclenche sans bouton de connexion cliquez

J'ai vraiment besoin de votre aide avec la fonctionnalité de connexion avec Facebook que j'essaie de mettre en œuvre sur mon site.

En gros, j'essaie d'obtenir ce qui suit:

J'utilise le code ci-dessous.

<body> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId: 'xxxxxxxx', status: true, cookie: true, xfbml: true, oauth: true }); FB.Event.subscribe('auth.login', function(response) { if (response.status === 'connected') { var uid = response.authResponse.userID; var accessToken = response.authResponse.accessToken; if ((parseFloat(uid) == parseInt(uid)) && !isNaN(uid)) { $.ajax({ url: '/user_actions/prep_facebook_registration', cache: false, type: 'POST', data: { 'uid': uid, 'token': accessToken }, dataType: 'json', success: function(data) { if (data.success=='true') { if ((typeof(data.redirect) != 'undefined')) { window.location=data.redirect; } } } }); } } }); FB.Event.subscribe('auth.logout', function(response) { FB.getLoginStatus(function(res) { if (!res.authResponse) { window.location='/access/logout'; } }); }); FB.getLoginStatus(function(response) { if (response.status === 'connected') { var uid = response.authResponse.userID; var accessToken = response.authResponse.accessToken; //not doing anything so far } }); }; (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#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> 

Le bouton d'ouverture de session se situe plus bas dans un site Web:

 <div class="fb-login-button" autologoutlink="true" data-show-faces="false" data-width="166" data-max-rows="1" style="position: absolute; top: 5px; right: 0;" scope="email"></div> 

Le problème ici est que FB.Event.subscribe ('auth.login') déclenche non seulement sur le clic de FB, mais aussi si l'utilisateur a enregistré sur Facebook et seulement après est venu sur mon site. Cela entraîne une redirection vers la page d'enregistrement ou la recharge de la page actuelle, même si l'utilisateur n'a pas cliqué sur le bouton de connexion!

'/ User_actions / prep_facebook_registration' contient un script, qui vérifie si le membre doit être redirigé vers la page d'inscription ou doit être enregistré avec un compte local. Il renvoie l'URL à la redirection.

Qu'est-ce que je fais mal? Comment puis-je éviter FB.Event.subscribe ('auth.login') déclenché en dehors du bouton de connexion cliquez?

Actuellement, il y a une meilleure solution.

Il y a 2 choses que vous pourriez faire mieux:

  1. Dans votre méthode FB.init , vous définissez le status: true . Cela indique à la page qu'il devrait vérifier si l'utilisateur est connecté dans Facebook immédiatement après la chargement de la page. Dans votre cas, ce n'est pas seulement que vous n'en avez pas besoin. Il faudra une partie de la bande passante de votre visiteur pour un aller-retour vers Facebook dont vous n'avez pas besoin.
  2. Vous n'avez pas besoin de vous souvenir des variables uid et accessToken, car vous pouvez les obtenir à la demande en utilisant la méthode FB.getLoginStatus .

La solution complète basée sur votre exemple de code serait:

 <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR APP ID', status : false, cookie : true, xfbml : true }); }; (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)); function Facebook_login () { FB.getLoginStatus(function(response) { if (response.status === 'connected') { var uid = response.authResponse.userID; var accessToken = response.authResponse.accessToken; if ((parseFloat(uid) == parseInt(uid)) && !isNaN(uid)) { $.ajax({ url: '/user_actions/prep_facebook_registration', cache: false, type: 'POST', data: { 'uid': uid, 'token': accessToken }, dataType: 'json', success: function(data) { if (data.success=='true') { if ((typeof(data.redirect) != 'undefined')) { if (data.redirect=='current') { location.reload(); } else { window.location=data.redirect; } } } } }); } } } } </script> <div class="fb-login-button" onlogin="Facebook_login()" autologoutlink="true" [parameters]></div> 

=====================

Edit: Ok, je pense qu'il y a un peu de progrès ici 🙂

J'ai étendu le bouton de connexion FB avec l'événement onlogin qui appelle une fonction JS Facebook_login ()

 <div class="fb-login-button" onlogin="Facebook_login()" autologoutlink="true" [parameters]></div> 

J'ai exporté les variables uid et accessToken en dehors de la fonction window.fbAsyncInit afin que je puisse y accéder à partir d'ailleurs:

 var uid; var accessToken; window.fbAsyncInit = function() { FB.init({ your parameters }); }); 

Ensuite, j'ai obtenu FB.Event.subscribe ('auth.login') pour affecter uniquement des valeurs à mes variables uid et accessToken , mais ne pas effectuer de redirection.

 FB.Event.subscribe('auth.login', function(response) { if (response.status === 'connected') { uid = response.authResponse.userID; accessToken = response.authResponse.accessToken; } }); 

Et enfin, ma fonction personnalisée Facebook_login () récupère les valeurs uid et accessToken et fait le reste de l'opération. Cette fois, il ne se produit que lorsque le bouton de connexion est cliqué. Remarque: cette fonction est en dehors de window.fbAsyncInit ()

 function Facebook_login () { if ((parseFloat(uid) == parseInt(uid)) && !isNaN(uid)) { $.ajax({ url: '/user_actions/prep_facebook_registration', cache: false, type: 'POST', data: { 'uid': uid, 'token': accessToken }, dataType: 'json', success: function(data) { if (data.success=='true') { if ((typeof(data.redirect) != 'undefined')) { if (data.redirect=='current') { location.reload(); } else { window.location=data.redirect; } } } } }); } } 

Cela me semble faire un travail. Si quelqu'un a de meilleures solutions, votre contribution serait appréciée 🙂