Mixing
Google Sign-In Intermittently works
I've got a page that's using Google Sign-In. It's working fine most of the time; however once in a while instead of receiving a "240 pixel wide dark themed button" as defined in the code, I receive a small white button that just says "Sign In". When the page only loads the little white button, the sign in doesn't work properly. The code isn't dynamic so I don't know why sometimes it renders the white button instead of the blue button.
This is what I'm expecting:
Sometimes it comes up as just this:
My Bootstrap 4 + JS code is as follows:
<div class="container">
<div class="row justify-content-center col-sm-10 col-md-8 col-lg-6 mx-auto">
<div id="sign_in_button" class="g-signin2 my-5"></div>
<div class="w-100 clearfix"></div>
<div id="sign_out_canvas" class="d-none my-5">
<button name="sign_out_button" id="sign_out_button" type="button" class="btn btn-light btn-sm">
<i class="fas fa-sign-out-alt mx-1"></i>
Sign out
</button>
<a href="javascript:void();" onclick="signOut();"></a>
</div>
</div>
</div>
</cfoutput>
<script>
function renderButton() {
gapi.signin2.render('sign_in_button', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function onSuccess(googleUser) {
console.log('Google User logged in successfully.');
$('div#sign_out_canvas').toggleClass('d-none');
var profile = googleUser.getBasicProfile();
$.ajax({
url: '/model/security.cfc',
method: 'POST',
data: {
method: 'signIn',
'id': profile.getId(),
'full_name': profile.getName(),
'given_name': profile.getGivenName(),
'family_name': profile.getFamilyName(),
'image_url': profile.getImageUrl(),
'email': profile.getEmail()
}
}).done(function(Data) {
window.location.replace("/?Action=Home.Home");
});
}
function onFailure(error) {
console.log(error);
}
</script>
google-signin googlesigninapi googlesigninaccount
asked Nov 21 '18 at 22:20
David ByersDavid Byers
1162218
add a comment |
I've got a page that's using Google Sign-In. It's working fine most of the time; however once in a while instead of receiving a "240 pixel wide dark themed button" as defined in the code, I receive a small white button that just says "Sign In". When the page only loads the little white button, the sign in doesn't work properly. The code isn't dynamic so I don't know why sometimes it renders the white button instead of the blue button.
This is what I'm expecting:
Sometimes it comes up as just this:
My Bootstrap 4 + JS code is as follows:
<div class="container">
<div class="row justify-content-center col-sm-10 col-md-8 col-lg-6 mx-auto">
<div id="sign_in_button" class="g-signin2 my-5"></div>
<div class="w-100 clearfix"></div>
<div id="sign_out_canvas" class="d-none my-5">
<button name="sign_out_button" id="sign_out_button" type="button" class="btn btn-light btn-sm">
<i class="fas fa-sign-out-alt mx-1"></i>
Sign out
</button>
<a href="javascript:void();" onclick="signOut();"></a>
</div>
</div>
</div>
</cfoutput>
<script>
function renderButton() {
gapi.signin2.render('sign_in_button', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function onSuccess(googleUser) {
console.log('Google User logged in successfully.');
$('div#sign_out_canvas').toggleClass('d-none');
var profile = googleUser.getBasicProfile();
$.ajax({
url: '/model/security.cfc',
method: 'POST',
data: {
method: 'signIn',
'id': profile.getId(),
'full_name': profile.getName(),
'given_name': profile.getGivenName(),
'family_name': profile.getFamilyName(),
'image_url': profile.getImageUrl(),
'email': profile.getEmail()
}
}).done(function(Data) {
window.location.replace("/?Action=Home.Home");
});
}
function onFailure(error) {
console.log(error);
}
</script>
google-signin googlesigninapi googlesigninaccount
asked Nov 21 '18 at 22:20
David ByersDavid Byers
1162218
add a comment |
I've got a page that's using Google Sign-In. It's working fine most of the time; however once in a while instead of receiving a "240 pixel wide dark themed button" as defined in the code, I receive a small white button that just says "Sign In". When the page only loads the little white button, the sign in doesn't work properly. The code isn't dynamic so I don't know why sometimes it renders the white button instead of the blue button.
This is what I'm expecting:
Sometimes it comes up as just this:
My Bootstrap 4 + JS code is as follows:
<div class="container">
<div class="row justify-content-center col-sm-10 col-md-8 col-lg-6 mx-auto">
<div id="sign_in_button" class="g-signin2 my-5"></div>
<div class="w-100 clearfix"></div>
<div id="sign_out_canvas" class="d-none my-5">
<button name="sign_out_button" id="sign_out_button" type="button" class="btn btn-light btn-sm">
<i class="fas fa-sign-out-alt mx-1"></i>
Sign out
</button>
<a href="javascript:void();" onclick="signOut();"></a>
</div>
</div>
</div>
</cfoutput>
<script>
function renderButton() {
gapi.signin2.render('sign_in_button', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function onSuccess(googleUser) {
console.log('Google User logged in successfully.');
$('div#sign_out_canvas').toggleClass('d-none');
var profile = googleUser.getBasicProfile();
$.ajax({
url: '/model/security.cfc',
method: 'POST',
data: {
method: 'signIn',
'id': profile.getId(),
'full_name': profile.getName(),
'given_name': profile.getGivenName(),
'family_name': profile.getFamilyName(),
'image_url': profile.getImageUrl(),
'email': profile.getEmail()
}
}).done(function(Data) {
window.location.replace("/?Action=Home.Home");
});
}
function onFailure(error) {
console.log(error);
}
</script>
google-signin googlesigninapi googlesigninaccount
asked Nov 21 '18 at 22:20
David ByersDavid Byers
1162218
I've got a page that's using Google Sign-In. It's working fine most of the time; however once in a while instead of receiving a "240 pixel wide dark themed button" as defined in the code, I receive a small white button that just says "Sign In". When the page only loads the little white button, the sign in doesn't work properly. The code isn't dynamic so I don't know why sometimes it renders the white button instead of the blue button.
This is what I'm expecting:
Sometimes it comes up as just this:
My Bootstrap 4 + JS code is as follows:
<div class="container">
<div class="row justify-content-center col-sm-10 col-md-8 col-lg-6 mx-auto">
<div id="sign_in_button" class="g-signin2 my-5"></div>
<div class="w-100 clearfix"></div>
<div id="sign_out_canvas" class="d-none my-5">
<button name="sign_out_button" id="sign_out_button" type="button" class="btn btn-light btn-sm">
<i class="fas fa-sign-out-alt mx-1"></i>
Sign out
</button>
<a href="javascript:void();" onclick="signOut();"></a>
</div>
</div>
</div>
</cfoutput>
<script>
function renderButton() {
gapi.signin2.render('sign_in_button', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function onSuccess(googleUser) {
console.log('Google User logged in successfully.');
$('div#sign_out_canvas').toggleClass('d-none');
var profile = googleUser.getBasicProfile();
$.ajax({
url: '/model/security.cfc',
method: 'POST',
data: {
method: 'signIn',
'id': profile.getId(),
'full_name': profile.getName(),
'given_name': profile.getGivenName(),
'family_name': profile.getFamilyName(),
'image_url': profile.getImageUrl(),
'email': profile.getEmail()
}
}).done(function(Data) {
window.location.replace("/?Action=Home.Home");
});
}
function onFailure(error) {
console.log(error);
}
</script>
google-signin googlesigninapi googlesigninaccount
google-signin googlesigninapi googlesigninaccount
asked Nov 21 '18 at 22:20
David ByersDavid Byers
1162218
asked Nov 21 '18 at 22:20
David ByersDavid Byers
1162218
asked Nov 21 '18 at 22:20
David ByersDavid Byers
1162218
asked Nov 21 '18 at 22:20
David ByersDavid Byers
1162218
asked Nov 21 '18 at 22:20
David ByersDavid Byers
1162218
1162218
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
What triggers renderButton()?
It appears it is not triggering every so often, which is why the default (non themed dark blue button) appears.
Because it doesn't trigger, your white button is what stays, and so what you need to work out is why doesn't that trigger? Is it a connectivity problem? Is there an error that strikes in some of your other code so that your script never triggers further down?
check your console when the error occurs and you will likely find out what is failing to trigger, and thus why renderButton doesn't.
answered Dec 3 '18 at 11:08
David GDavid G
5,16941839
That's part of the problem... there are no errors in the console. I don't believe that it's failing to trigger, but I will try forcing renderButton() to fire again and see if that helps.
– David Byers
Dec 4 '18 at 23:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421242%2fgoogle-sign-in-intermittently-works%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
What triggers renderButton()?
It appears it is not triggering every so often, which is why the default (non themed dark blue button) appears.
Because it doesn't trigger, your white button is what stays, and so what you need to work out is why doesn't that trigger? Is it a connectivity problem? Is there an error that strikes in some of your other code so that your script never triggers further down?
check your console when the error occurs and you will likely find out what is failing to trigger, and thus why renderButton doesn't.
answered Dec 3 '18 at 11:08
David GDavid G
5,16941839
That's part of the problem... there are no errors in the console. I don't believe that it's failing to trigger, but I will try forcing renderButton() to fire again and see if that helps.
– David Byers
Dec 4 '18 at 23:01
add a comment |
What triggers renderButton()?
It appears it is not triggering every so often, which is why the default (non themed dark blue button) appears.
Because it doesn't trigger, your white button is what stays, and so what you need to work out is why doesn't that trigger? Is it a connectivity problem? Is there an error that strikes in some of your other code so that your script never triggers further down?
check your console when the error occurs and you will likely find out what is failing to trigger, and thus why renderButton doesn't.
answered Dec 3 '18 at 11:08
David GDavid G
5,16941839
That's part of the problem... there are no errors in the console. I don't believe that it's failing to trigger, but I will try forcing renderButton() to fire again and see if that helps.
– David Byers
Dec 4 '18 at 23:01
add a comment |
What triggers renderButton()?
It appears it is not triggering every so often, which is why the default (non themed dark blue button) appears.
Because it doesn't trigger, your white button is what stays, and so what you need to work out is why doesn't that trigger? Is it a connectivity problem? Is there an error that strikes in some of your other code so that your script never triggers further down?
check your console when the error occurs and you will likely find out what is failing to trigger, and thus why renderButton doesn't.
answered Dec 3 '18 at 11:08
David GDavid G
5,16941839
What triggers renderButton()?
It appears it is not triggering every so often, which is why the default (non themed dark blue button) appears.
Because it doesn't trigger, your white button is what stays, and so what you need to work out is why doesn't that trigger? Is it a connectivity problem? Is there an error that strikes in some of your other code so that your script never triggers further down?
check your console when the error occurs and you will likely find out what is failing to trigger, and thus why renderButton doesn't.
answered Dec 3 '18 at 11:08
David GDavid G
5,16941839
answered Dec 3 '18 at 11:08
David GDavid G
5,16941839
answered Dec 3 '18 at 11:08
David GDavid G
5,16941839
answered Dec 3 '18 at 11:08
David GDavid G
5,16941839
5,16941839
That's part of the problem... there are no errors in the console. I don't believe that it's failing to trigger, but I will try forcing renderButton() to fire again and see if that helps.
– David Byers
Dec 4 '18 at 23:01
add a comment |
That's part of the problem... there are no errors in the console. I don't believe that it's failing to trigger, but I will try forcing renderButton() to fire again and see if that helps.
– David Byers
Dec 4 '18 at 23:01
That's part of the problem... there are no errors in the console. I don't believe that it's failing to trigger, but I will try forcing renderButton() to fire again and see if that helps.
– David Byers
Dec 4 '18 at 23:01
That's part of the problem... there are no errors in the console. I don't believe that it's failing to trigger, but I will try forcing renderButton() to fire again and see if that helps.
– David Byers
Dec 4 '18 at 23:01
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421242%2fgoogle-sign-in-intermittently-works%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
