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

Posted

技术标签:

【中文标题】Google Signin 无法点击，并且仅在移动设备上登录时冻结【英文标题】：Google Signin unclickable and freezes in login on mobile only 【发布时间】：2015-10-09 17:16:37 【问题描述】：

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

    如果我尝试点击 android 版 Chrome 上的按钮，我必须点击它至少 5 次，直到它响应。我使用了远程调试，但没有错误。更奇怪的是，如果我通过远程调试单击按钮，它会立即响应。我网站上没有其他元素显示此行为。

    当现有用户单击该按钮登录时，它会打开一个新标签页到 accounts.google.com，该标签页保持白色。在后台，原始选项卡实际上正在登录，但是用户看不到这一点，因为“白色”选项卡是活动的。

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

我的按钮代码：

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

【问题讨论】：

【参考方案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()。

【讨论】：

感谢您的回答。不幸的是，您上面的代码不起作用，但您说得对，更新到较新版本可以解决问题。我通过迁移到较新版本并切换到自定义按钮解决了这个问题。将在几秒钟内发布工作代码。 我认为导致您的代码无法工作的原因是我也需要离线访问，但它没有提供。 离线访问不同，离线访问需要调用 auth2.grantOfflineAccess 是的，现在想通了。但是您说得对，迁移到较新的版本可以解决问题。谢谢！【参考方案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 Signin 无法点击，并且仅在移动设备上登录时冻结的主要内容，如果未能解决你的问题，请参考以下文章

“重复条目：com/google/android/gms/auth/api/signin/internal/zzf.class”无法构建 apk

Android Google SignIn 无法在调试模式下工作：GoogleSignInResult 为 false

如何确定用户是不是关闭了 google auth2.signIn() 窗口？

Google+ 登录按钮 - 无法进行经过身份验证的呼叫

Google+ 登录按钮 [class='g-signin']

@react-native-google-signin/google-signin/src/GoogleSignin.js 抛出异常 null is not an object（评估'RNGoogle