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>
Related
I'm learning HTML and I'm trying to do some very basic stuffs. I have my main page under index.html, a registration form under registration.html, and a script under script.js.
Index.html has the following button: <BUTTON id="login" onclick="register()">login/registration</BUTTON>
function register()
{
if (!loggedIn)
document.location.href = "registration.html";
else
{
// Page not created yet
//document.location.href = "aacount.html";
console.log("redirecting to account page");
}
In script.js, at the top, I have let loggedIn = false;.
The form's submission button looks like this: <button type="submit" class="submit" onclick="submit()"><b>Submit</b></button>
function submit(){loggedIn = true;}
Now on my main page, I have the login button. I would like it to change to an Account button so I made this:
function checkLog()
{
if (loggedIn == true)
document.getElementById("login").textContent = "Account";
else
document.getElementById("login").textContent = "Login/Registration";
}
I want my form, which has the header form class="registration_form" action="index.html" method="post" id="form" to redirect to the main page once you click submit. Since you're now logged in, I want the login/registration to swap to an account button. I don't have any backend because I haven't learned how yet. I just want to modify index.html once it loads back in by using the checkLog() function. Is there a way to do this using only HTML/JavaScript? I have seen a couple solutions using PHP, but I will only jump into it next week once I have more free time. Until then, can I make it work this way?
Just to be sure, I have tried adding onload="checkLog()" to both the entire body text and the login button to no avail. I've also found out that adding onclick="checkLog()" on the submit button in the form doesn't do anything since it executes before the action of changing web pages occur. I basically want a onclick="" that occurs after the action.
As a lot suggested in the comments, since there is no server-side to your project yet you're trying to check if the user is logged in to your website, your best bet is either cookies or LocalStorage. In this answer I will take the LocalStorage approach.
function register()
{
if (localStorage.getItem("userAuthentication") === null)
storage.setItem("userAuthentication", "userAuthentication");
document.getElementById("login").textContent = "Login/Registration";
else {
// User is logged in
// Since the user must have localStorage set up
console.log("redirecting to account page");
document.getElementById("login").textContent = "Account";
}
}
The getItem attribute returns null if the item does not exist; meaning the item hasn't been set yet. if so, we need to set LocalStorage, and change the login button text to "Login/Registration". Else, the localStorage has to be set, meaning we can can change the login button text to "Account".
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
How can I call a PHP Function when Browser Back button clicked or right click then clicked BACK item then prevent page to redirect to login page when user is still logged-in.
I found this (Pressing back button redirects the logged user to log out?) to prevent page to redirect to other page when user clicked browser back button and user is still logged in, but I didn't know where to put those codes and how to call that function.
Can someone explain this thoroughly to accomplish my problem or provide some DEMO(JSFiddle) for better understanding?
You could use a header redirect on the login page to check if the user is logged in, but this will have to be called before any page data is sent:
if(isset($_SESSION['username'])){
header("Location: home.php");
}
You can try to use this:
jQuery(document).ready(function($) {
if (window.history && window.history.pushState) {
window.history.pushState('forward', null, './#forward');
$(window).on('popstate', function() {
alert('Back button was pressed.'); //here you know that the back button is pressed
});
}
});
You can find the answer Here
What this does, it checks with JS if the back button was pushed and if so, you can perform whatever action you want. If a redirect is what you need, use window.location = "http://www.yoururl.com"; OR window.navigate("http://www.yoururl.com"); //works only with IE
Alternatively, you can place an jquery ajax call there, that sends posted requests back to a certain page, and you can check them like:
if(isset($_POST['ajax_response_from_js_script']) {
//call PHP function
}
Hope it helps!
Keep on coding!
Ares.
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.
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.