I am trying to put a Google+ login button on my site. The button works perfectly. I have a Sign Out button also. I hide the sign in button when the user logs in.My code is here:
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="******************"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schema.org/AddAction"
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email">
</span>
</span>
<button id="revokeButton" onclick="gapi.auth.signOut()">Sign Out</button>
<script>
function signinCallback(authResult) {
if (authResult['status']['signed_in']) {
document.getElementById('signinButton').setAttribute('style', 'display: none');
console.log("User successfully logged in!!");
} else {
console.log('Sign-in state: ' + authResult['error']);
}
}
</script>
<script>
function disconnectUser(access_token) {
var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' +
access_token;
// Perform an asynchronous GET request.
$.ajax({
type: 'GET',
url: revokeUrl,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function(nullResponse) {
document.getElementById('signinButton').setAttribute('style', 'display: display');
// The response is always undefined.
console.log("Success in logging out!");
},
error: function(e) {
// Handle the error
console.log(e);
// You could point users to manually disconnect if unsuccessful
// https://plus.google.com/apps
}
});
}
</script>
The problem is when I use gapi.auth.signOut() to sign out... it logs me out, but logs in the same user again to Google+ on refresh. How do I allow other people to login to my site. How do I completely logout people from Google. I am new to Javascript...an example would help.
The answer as I figured out is simple. The first time the user logs in, he is not logged into my site . So obviously the user has to log in. The next time the page refreshes...Google+ checks if the user is already logged into any of Google services such as gmail etc.. and keeps the user logged in if the answer is true. To check whether this works...log out of any of your Google service(gmail etc) and try logging in with Google+. It will ask for credentials. So once the user logs in to Google+, he/she need not keep signing in every time.
This answer is more of a joke but why don't you try the hacky method of loging out the user from his google account by adding hidden iframe to the body with src of https://accounts.google.com/Logout?
It will refuse to display because of the X-Frame-Options set to DENY but will actually log you out.
One-liner with jquery:
$('<iframe style="display: none" src="https://accounts.google.com/Logout"></iframe>').appendTo(document.body);
Related
$.ajax({
type: "POST",
url: "core/login.php",
data: userInfo,
contentType : "application/x-www-form-urlencoded; charset=UTF-8",
success: function(msg){
if ($.trim(msg) == "success")
{
$('#status').load('home.php #status'); //refresh status: now shows as logged in
}
else
{
$('#error').html(msg); //this statement will execute whatever "$error" in login.php is, as html
$('#error').fadeIn(500).show();
}
}
});
Basically, I have a login form for a website. login.php processes userInfo (containing username and password), then returns either "success" or "error". If success, show user as logged in without refreshing the page (just refresh a div). If it fails, WITHOUT refreshing the page, show the error what the problem/failure was.
In Chrome and Safari, everything works fine. But in IE8 and Firefox, when there is a login error, the user is redirected to a new page showing the error (but I want the user to STAY on the same page hence I'm using Ajax). When there is success, instead of refreshing the status div and showing the status now as logged in, the message "success" is shown, again on a new page.
How can I fix this problem so that in all browsers, there is NO refresh during the entire login process? Thank you very much!
use e.preventDefault() to prevent the default action to be triggered.
EXAMPLE:
$("form").submit(function(e){
e.preventDefault();
$.ajax({
//ajax code here
});
});
Here is more info about e.preventDefault
http://api.jquery.com/event.preventdefault/
EDIT:
Check out this answer on stackoverflow..
event.preventDefault() function not working in IE
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.
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>