Google 仅在移动设备上登录无法点击并冻结

Question

我已经实现了 Google 登录功能，它在任何桌面上都能正常工作。它过去在移动设备上也能正常工作，但最近它出现了两种奇怪的行为：

如果我尝试点击 Chrome 上的按钮 Android，我必须至少点击它 5 次，直到它响应。我使用了远程调试，但没有错误。更奇怪的是，如果我通过远程调试单击按钮，它会立即响应。我网站上没有其他元素显示此行为。
当现有用户单击按钮登录时，它会打开一个新选项卡 accounts.google.com，该选项卡保持白色。在后台，原始选项卡实际上正在登录，但是用户看不到这一点，因为 "white" 选项卡是活动的。

控制台完全没有显示任何错误，在桌面上一切正常。我一无所知...知道我应该从哪里开始寻找吗？

我的按钮代码：

<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>

登录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']);
    }
  }

Answer 1

您似乎在使用旧版本的 Google 登录。你可能想要 try starting from here.

我hosted the demo here。

包含/客户端配置

<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>

按钮目标代码

<body>
  <!-- ... --> 
  <div id="gConnect">
    <div id="signin-button"></div>
  </div>
  <!-- ... --> 
</body>

初始化/渲染按钮的代码

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());
                });
            });
    });
  });
}

离线访问

要离线访问，您需要拨打auth2.grantOfflineAccess。请注意，这将始终向用户显示一个同意屏幕，因此在您的后端服务器上没有刷新令牌的情况下，它应该用于替代 auth2.signIn()。

Answer 2

以下代码适用于所有平台，没有问题。我还没有做按钮的样式，但这个过程有效。

页眉：

<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>

按钮：

<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"
  });
}

Google 仅在移动设备上登录无法点击并冻结

Google Signin unclickable and freezes in login on mobile only

javascript

android

google-plus

google-oauth

google-signin