really need your help with log-in-with-facebook feature I'm trying to implement on my website.
Basically, I'm trying to achieve the following:
if user has acknowledged the app before and clicks FB Log in button on my website, they get logged into the website (with website's user account associated with the Facebook user ID)
if user has not acknowledged the app before, on FB log in (and subscription to app) they get redirected to website's registration page. Here the form is pre-filled with user data coming through Facebook and registration process becomes easier and faster.
I'm using the code below.
<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>
LogIn button lays further down in a website:
<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>
The problem here is that FB.Event.subscribe('auth.login') triggers not only on FB log in button click, but also if user has logged to Facebook and only after comes to my website. This causing a redirection to registration page or current page reload even if user hasn't clicked the login button!
'/user_actions/prep_facebook_registration' holds a script, which is checking if the member has to be redirected to registration page or should be loggedin with local account. It returns the URL to redirect.
What am I doing wrong? How can I avoid FB.Event.subscribe('auth.login') being triggered outside the login button click?