G+ sign-in button callback binding twice

Question

I'm using G+ sign in for my website and I found this problem.

My website has toolbar (its render with Javascript) and G+ login button on it so I attach G+ Javascript API in the toolbar file

[toolbar-notlogin.php]

<script>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js?onload=render';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

function render () 
{
        var config = {
            "callback": "loginCallback",
            "clientid": "xxxxxxxxx.apps.googleusercontent.com",
            "cookiepolicy": "single_host_origin",
            "requestvisibleactions": "http://schemas.google.com/AddActivity",
            "scope": "https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.email"
            };

            $('#googleCustomLoginBtn .buttonText').text('Login with Google');
            gapi.signin.render ("gplusLoginBtn", config);
        }
</script>

When the toolbar (with G+ JS API) loaded it calls callback function render() for render the G+ sign-in button. It work very well so my toolbar changes into state of loging in (show the user's profile) and G+ sign-in button gone (HTML replaced).

When user logout the toolbar change state to not loging in (HTML replaced again) it call render() again and the sign in button work.

But the problem is when I sign in this time the callback function ( loginCallback() ) called twice. It seem like the callback function bind again. (I try to not calling render() in the second time but the sign in button not work. )

Is there any way to fix it? Thank you.

Have you tried checking the order in which all the functions are executed? It's pretty simple to do by just outputting the function name to console at the start of every function. It'll give you (and me) some more insight into what exactly is happing. Also: can you create a jsfiddle.net demo? That way we can actually try to come up with some code that will help you. — Korijn, Jan 20 '14 at 20:52
Have you solved this? If yes, could you please share the solution? — Andrejs Cainikovs, Jan 26 '14 at 20:49
It might be because Google tries an automatic sign in when you're connected to your Google+ and have previously authorized the app. try testing it in incognito with your account logged out. — Dvid Silva, Feb 18 '14 at 23:59
I finally found the cause, Its because when I logged out again the [toolbar-notlogin.php] file placed so the G+ SDK init in second time.Each time they call render() so the function called twice. To resolve this I put the G+ SDK init to static HTML that render just one time. and when my toolbar render [toolbar-notlogin.php] I manually call render() with my JS code. Thank you to you all. :) — muitsfriday, Mar 04 '14 at 08:54
answered here: http://stackoverflow.com/questions/20487092/google-sign-in-with-javascript-callback-issue — Vlas Bashynskyi, Feb 18 '15 at 16:12

score 1 · Answer 1 · answered Feb 21 '14 at 15:39

Somewhat novice here but I remember reading somewhere that there are cases when you may accidentally call call the function more than once because you have it bound to more than one element. Have you tried removing the event handler directly before declaring it?

That way, if there already is an instance of it, it will be removed before adding another one.

Something like this

$('#randomID').unbind('submit').bind('submit');

G+ sign-in button callback binding twice

1 Answers1