Google Signin unclickable and hangs on mobile login only
I have implemented Google Signin features and it works great on any desktop. It also worked great on mobile devices, but recently it has been exhibiting two types of strange behavior:
-
If I try to click a button on Chrome for Android, I have to click it at least 5 times until it responds. I have used remote debugging but no errors. Even weirder, if I click on a button using remote debugging, it responds instantly. No other element on my website exhibits this behavior.
-
When an existing user clicks on the login button, it opens a new tab on the accounts.google.com page, which remains white. In the background, the original tab is actually checked in, but the user does not see this because the white tab is active.
The console doesn't show any errors and everything works fine on the desktop. I don't know ... Any idea where I should start looking?
My code for the button:
<div id="signinButton">
<span class="g-signin"
data-scope="https://www.googleapis.com/auth/gmail.readonly"
data-clientid="{{ CLIENT_ID }}"
data-redirecturi="postmessage"
data-accesstype="offline"
data-cookiepolicy="single_host_origin"
data-callback="signInCallback">
</span>
</div>
Signin Javascript:
function signInCallback(authResult) {
if (authResult['code']) {
var state = encodeURIComponent('{{ STATE }}');
var code = encodeURIComponent(authResult['code']);
$.ajax({
type: 'POST',
url: '/signup/gauth',
contentType: 'application/octet-stream; charset=utf-8',
success: function(result) {
if (result == 'Success') {
console.log('Logged in');
}
},
processData: false,
data: 'code='+code+'&state='+state
});
} else if (authResult['error']) {
console.log('Sign-in state: ' + authResult['error']);
}
}
source to share
The following code works on all platforms without issue. I haven't done the styling of the button yet, but the process works.
Page Manager:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = {};
function startApp() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: '{{ CLIENT_ID }}',
// Scopes to request in addition to 'profile' and 'email'
scope: 'https://www.googleapis.com/auth/gmail.readonly'
});
});
};
</script>
<style type="text/css">
#customBtn {
display: inline-block;
background: #4285f4;
color: white;
width: 190px;
border-radius: 5px;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-weight: bold;
}
span.icon {
background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
border-right: #2265d4 1px solid;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
}
</style>
Button
<div id="gSignInWrapper">
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google Sign-in</span>
</div>
</div>
<script>
$('.customGPlusSignIn').click(function() {
// signInCallback defined in step 6.
auth2.grantOfflineAccess({'redirect_uri': 'postmessage'}).then(signInCallback);
});
</script>
JavaScript:
function signInCallback(authResult) {
console.log(authResult)
if (authResult['code']) {
var state = encodeURIComponent('{{ STATE }}');
var code = encodeURIComponent(authResult['code']);
// Send the code to the server
$.ajax({
type: 'POST',
url: '/signup/gauth',
contentType: 'application/octet-stream; charset=utf-8',
success: function(result) {
if (result == 'Success') {
console.log('Logged in');{% endif %}
}
},
processData: false,
data: 'code='+code+'&state='+state
});
} else if (authResult['error']) {
console.log('Sign-in state: ' + authResult['error']);
}
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
window.location = "/user/logout"
});
}
source to share
It looks like you are using an older version of google login. You might want to try starting here .
Includes / client setting
<head>
<script src="https://apis.google.com/js/client:platform.js?onload=startApp" async defer></script>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID"></meta>
</head>
Code for the target button
<body>
<!-- ... -->
<div id="gConnect">
<div id="signin-button"></div>
</div>
<!-- ... -->
</body>
Code to initialize / render the button
function startApp() {
gapi.load('auth2', function() {
gapi.client.load('plus','v1').then(function() {
gapi.signin2.render('signin-button', {
scope: 'https://www.googleapis.com/auth/plus.login',
fetch_basic_profile: false });
gapi.auth2.init({fetch_basic_profile: false,
scope:'https://www.googleapis.com/auth/plus.login'}).then(
function (){
console.log('init');
auth2 = gapi.auth2.getAuthInstance();
auth2.isSignedIn.listen( function() {
console.log(auth2.currentUser.get());
});
auth2.then(function(resp){
console.log(auth2.currentUser.get());
});
});
});
});
}
Offline access
For offline access, you need to call auth2.grantOfflineAccess . Note that this will always show a consent screen to the user, so it should be used as a substitute for auth2.signIn () in circumstances where you do not have a refresh token on your backend.
source to share