谷歌登錄不可登錄並凍結在手機上登錄

我已經實現了谷歌登錄功能，並且它可以在任何桌面上正常工作。它曾經工作的移動也很有效，但因爲最近它正顯示出兩種類型的怪異的行爲：如果我試着點擊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']); 
    } 
    }

來源

2015-07-20 Vincent

以下代碼適用於所有平臺，沒有問題。我沒有做按鈕的樣式，但這個過程起作用。

頭頁：

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

來源

2015-07-24 11:42:09 Vincent

看起來你正在使用谷歌登入的舊版本。你可能想要try starting from here。

I 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（）。

來源

2015-07-21 19:54:28 class

謝謝您的回答。不幸的是，上面的代碼無法正常工作，但是您更新到新版本可以解決問題。我通過遷移到新版本並切換到自定義按鈕來解決問題。將在一秒內發佈工作代碼。 – Vincent

我認爲導致你的代碼不工作，是我需要離線訪問，以及它沒有給。 – Vincent

離線訪問是不同的，要做離線，你現在需要調用auth2.grantOfflineAccess – class

谷歌登錄不可登錄並凍結在手機上登錄

回答

相關問題