I am using js sdk to login using <fb:login-button></fb:login-button> button
When I click "login" button on my page, the pop up box appears and disappears quickly.
I found this other thread on here
Facebook login window appears and disappears very quickly
Which explains that it happens because the user is already logged into facebook. My question is, how do I go around this issue?
if they are already logged in to facebook, how do I make sure the pop up doesn't just appear and disappear?
You could check the user's login status with FB.getLoginStatus.
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
If the user is not logged in you could display a (custom) login button.
I want to complement FWrnr's answer with actual code, because this is indeed very helpful.
The solution is the FB.getLoginStatus function as he says:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = //redirect to page with logged user (you have the response token in response)
} else {
//Show the login popup
FB.login(function(response) {
if (response.authResponse) {
window.location = //redirect to location after correct login
}
}, { scope: '<scopes>', state: '<state>' });
}
});
This way, if the user is "connected" (logged in and app authorised), you won't call the FB.login method, so the login window won't flash. In any other case, it will show the login window, which is the expected result.
Related
If you want to know the users geolocation in a web browser you have to use the html 5 api. When calling the function:
navigator.geolocation.getCurrentPosition(success)
a dialog pops up, asking the user if he want to share the location or not. My question is, is it possible to know when the user clicked confirmed. I want to display a loading spinner on a html page after the user has clicked the confirm button. (To get the location can take some time on a mobile, and i don't want the spinner to show before he has pressed the confirm button, as he can get confused )
Have you tried this code? You can add Callback functions, and within them handle user responses.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback {maximumAge:600000});
function successCallback(position) {
// Handle Confirm button hit
}
function errorCallback(error) {
// Other
}
navigator.geolocation.watchPosition(function(position) {
//Succes Code
},
function (error) {
if (error.code == error.PERMISSION_DENIED)
//Code when permission is not granted
});
I am not sure, that mobile will respond well to this, but it works on PC.
No you can't. when your geolocation code executes, the request goes to browser and then browser asks to user for confirmation. If user accepts, then the request goes forward else it will drop. so you will not get any confirmation whether user clicked on accept button or not. but you will get whether user denied or not by using error PERMISSION_DENIED
I am trying to create one chrome extension with content script interaction. I am facing one problem in the browser action scenario. I have tried to search the solution in the google but vain.
Here is the scenario.
I want two different action when click on the chrome extension icon (browser action). If i have some key stored in local storage, i need to send a message to content script else i need to show popup.
Say for an example, if suppose i am trying to validate whether user is logged in gmail or not. At first time if user didn't logged in i need to show popup with message "please log in" when click on the extension icon. If user already logged in then i will store it in local storage, so if user click again in the icon instead of showing popup need to contact content script.
Please suggest.
EDIT : UPDATING MY CODE HERE
in background.js. (problem is it is not going into the else part. always its showing popup eventhough it has local storage value)
if(localStorage.accessToken=="" || localStorage.accessToken==undefined){
chrome.browserAction.setPopup({
popup : "popup.html"
})
}else{
chrome.browserAction.onClicked.addListener(function(e){
chrome.tabs.query({active: true, currentWindow: true},function(tabs)
{
chrome.tabs.sendMessage(tabs[0].id,{accesskey:localStorage.accessToken},function(response) {});
});
})
console.log('already logged in')
}
The browserAction.onClicked event does not fire when it already has a popup.
It's not entirely clear what you need help with here so I'm guessing based on the wording of your question that you need help with either logic or localStorage.
I don't know a ton about events on the chrome extension icon, but assuming that you can get that event your code ought to look something like the following:
// this code goes inside your icon click handler
if (localStorage.loggedIn === 'loggedIn') {
// do whatever action you want to happen if the user is logged in
} else {
if (/* check to see if logged in goes here*/) {
// user is logged in so store value so you don't have to check again
localStorage.loggedIn = 'loggedIn';
} else {
localStorage.clear('loggedIn');
alert("Please login to gmail first")
}
}
Of course, this code does what you asked, but it doesn't handle the case where the user clicks on the button, was logged in, then logs out at some future point and clicks the button again. The localStorage value wouldn't have been reset in that case, unless you do it elsewhere.
Not quite sure how to explain this the best way, but i'll give it a go!
I have a php site that uses Fancybox. At the moment, if anyone clicks Login, an overlay appears with the login form. If someone clicks to post a new listing and they're not logged in, I'd like the fancybox overlay to appear again, allowing a user to login.
At the moment, I have a couple lines of php code that check if a session is active - if not, it redirects to a login page, I want this to activate a fancybox popup with the login form... if possible?
I'm not sure how best to achieve this? Any help would be awesome! :)
I'm not sure what programing language you are writing in besides jQuery, but a high-level solution might be to drop a cookie when the user logs in. Then, when they click to post a new listing, check for that cookie. If it's there, let them post. If not show the login window. Here's some pseudo code using the jQuery.Cookie plugin:
$(function(){
$('.login-button').click(function(){
//send login info via ajax
$(this).hide("slow",function(){
// drop a cookie
$.cookie( 'login', '1', { expires: 1, path: '/' } );
});
});
// When the post button is clicked, check for the cookie
// If there's no cookie, show the login box
$('.post-button').click(function(){
if( $.cookie('Login') === null ) {
$("#login-box").fancybox();
} else {
// do nothing
}
});
});
There can be multiple ways of doing so.
First of all, how are you identifying that someone is logged in? Suppose if I can do so with an if condition:
if(user==null) {
//no login
}
I can trigger the click of anchor link for LOGIN and thus, open the fancybox again.
if(user==null) {
$("a#login").trigger('click');
}
Hope it gives you some help.
The below code works perfectly.. On clicking the fb:login-button, it posts the message on facebook wall of the person who has logged in.
But, i want this to happen immediately after the page loads and not after clicking the button. If the user is logged In already, the message should be posted on wall. How can i do this ?
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=XXXXXXXXXXXXXXX&xfbml=1"></script>
<fb:login-button show-faces="false" width="200" max-rows="1" perms="publish_stream" onlogin="postonwall()">Click to Publish Below Content</fb:login-button>
<script>
function postonwall()
{
FB.api('/me/feed', 'post',
{
message: 'A good reference for APIs',
link: window.location.href,
name:'API Reference',
picture:'http://www.demo.lookmywebpage.com/publish-on-facebook-wall/Google-Twitter-Facebook.jpg',
description:'Demo Facebook Post'
}, function(response) {
if (!response || response.error) {
alert('Oops! User Denied Access');
} else {
alert('Success: Content Published');
}
});
}
</script>
But, i want this to happen immediately after the page loads and not after clicking the button.
So you want to annoy your users …?
If the user is logged In already, the message should be posted on wall. How can i do this ?
Use FB.getLoginStatus, and if the user is already connected, then make the post.
I have my fb login button created as so
<fb:login-button perms="email" size="small" onlogin="check_login_session()">Sign Up Using Facebook</fb:login-button>
I have also defined the check_login_session function already as I'm using it on a .click link elsewhere on the page(which does work). However, my problem is when I'm already logged in to FB and I click the button, the FB popup appears, then dissapears and it does nothing. The onlogin is not called nor is any error displayed.
If I was to logout however, and then click the button, it would give me the fb login prompt, and after filled out and submitted would behave as it is supposed to. It's only when I'm already logged in and I click the FB login button that the issue occurs. Any Ideas?
Edit: I found that it does call it if I say put alert("Test") in the onlogin but any function I define on the page and try to call it returns saying it's not defined.
I think you want to be notified about a logged in user either after a login happened or of a user comes to teh page and is already logged in. In this case you have to subscribe to the auth event and handle it:
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
//yourcode
} else if (response.status === 'not_authorized') {
//your code
} else {
//yourcode
}
});
The new facebook login flow says to only display the facebook login button if the user is not currently logged into facebook. If you display it anyway, nothing will happen when they click on it because it will detect that the user is already logged into facebook and so will exit the login process and the post login hook won't be called. The facebook documentation says to first detect whether the user is already logged into facebook, and if they are logged in, grab the facebook uid and simply execute the function you would have called as part of the post login hook. The facebook login button is simply that--a button to log into facebook and not a button to log into your site.
The event says onlogin, so it will only execute when you login through Facebook Connect.
If you are already logged in on Facebook Connect, then the function won't execute because you're already logged in...?
Most likely the function you're trying to call isn't accessible on that page even though you think it should be. Make sure you removed the () after the function's name. The fact that "alert" does work but your function doesn't kind of proves that. Make sure your function can be accessed by the script by making it global and ensuring your script is loaded.
The function has to be defined on the window. The solution is:
// somewhere before the button is rendered
window.loginCallback = () => {
// callback logic
}
<div
className="fb-login-button"
data-max-rows="1"
data-size="large"
data-button-type="continue_with"
data-onlogin="loginCallback();"
></div>