使用Google oAuth 2.0時刷新新用戶登錄頁面

我試圖製作一個網站使用Google Sign For Websites.主要是爲了瞭解它是如何工作的。使用Google oAuth 2.0時刷新新用戶登錄頁面

我已經按照該教程Google提供的步驟進行了操作。用戶可以成功登錄到我的網站，它可以將用戶ID傳遞到後端，然後使用php腳本驗證ID服務器端。

然後PHP會在網站上爲用戶創建一個會話。我無法弄清楚的是，當用戶點擊Google登錄按鈕並且登錄成功時，我將如何刷新頁面。刷新頁面將允許主頁重新加載新的php會話數據。

<div class="g-signin2 signin-button" data-onsuccess="onSignIn" data-theme="dark"></div> 

function onSignIn(googleUser){ 

     // The ID token you need to pass to your backend: 
     var id_token = googleUser.getAuthResponse().id_token; 

     var xhr = new XMLHttpRequest(); 
     xhr.open('POST', 'https://mywebsite.com/tokensignin.php'); 
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
     xhr.onload = function() { 
      console.log('Signed in as: ' + xhr.responseText); 
     }; 
     xhr.send('idtoken=' + id_token); 
     };

我使用簡單location.reload()代碼的onload =函數（）部的內側試過。這會導致頁面在每次加載時都會無限次地刷新，但是由於Google每次都驗證用戶是否通過此變量登錄了該變量。

我試過looking through their reference使用GoogleAuth.isSignedIn.listen(listener)來監視任何更改，但它似乎並未完全滿足我的要求，或者我沒有正確使用它，因爲我不完全知道監聽器應該是什麼。

另一種選擇可能是使用它們的GoogleAuth.attachClickHandler(container, options, onsuccess, onfailure)函數，但我不完全確定如何正確配置選項字段/變量。

如果有人能提供一些關於這個世界如何工作的見解，我將不勝感激。

總結如果用戶已經使用Google登錄我的網站，我希望網頁不做任何事情，如果他們點擊登錄按鈕，登錄成功後我想刷新他們所在的頁面。

來源

2017-04-19 Jem

您可以使用回調函數向xhr添加一個偵聽器。

xhr.addEventListener("load", loginComplete);

，然後創建一個函數：

function loginComplete(evt) { 
    console.log("Login Complete"); 
    window.location.reload(); 
}

編輯：

確定。由於聽衆不幫忙。您需要檢查用戶是否已經登錄。爲了保存這些信息，我能想到的一件事就是使用cookie。

因此，您可以存儲您從Google收到的Auth令牌，併爲其設置一個cookie並在每次進行POST之前檢查。

這裏是一個不錯的js的cookie庫：https://github.com/js-cookie/js-cookie

然後爲onload您保存ID：

xhr.onload = function() { 
    Cookie.set('google_token', id_token); 
    window.location.reload(); 
};

而且onSignIn功能將是這樣的：

function onSignIn(googleUser){ 
    var cookie = Cookie.get('google_token'); 
    if(cookie != undefined){ 
     //cookie is set 
     return; 
    } 
    ... 
    //rest of the function 
}

當然，你需要例如，檢查存儲在cookie中的令牌是否仍然有效，有些情況下可以刷新它，而不是讓用戶再次登錄（oAut h API提供這樣的東西）。

使一些安全措施，以確保令牌不被注入等。

來源

2017-04-21 12:14:56

這仍然不能解決問題，因爲它仍然會創建無限循環的頁面刷新。當按鈕被點擊並且登錄完成時它將觸發刷新。但是，一旦刷新完成頁面加載，它就會再次發送請求。由於每次加載頁面時，Google都會處理登錄信息，以查看用戶是否仍然登錄到網站。如果他們登錄到該站點，則登錄成功完成。然後導致登錄被再次「完成」。 – Jem

@New_Wav你可以檢查我的編輯嗎？ –

當我在第二天或第二天有空時，我會試試這個。我認爲這可能會成爲最可靠的方法。我在最後一天左右對API做了一些額外的嘗試。有些功能會查找用戶狀態的變化，例如GoogleAuth.isSignedIn.listen，但這些功能會引起一些已經存在的問題。每次頁面加載時都會檢查狀態更改的偵聽，並再次創建無限循環刷新。檢查新已登錄vs的cookie，與會話配對以驗證數據將成爲一種簡單而安全的方式來執行此操作 – Jem

爲什麼沒有你的後端重定向（或發送信息，因此頁面，以便它可以在成功重定向）？

需要重新加載登錄屏幕？

你也可以看看聽者的文檔，它似乎可以解決你想要的。即。監聽用戶更改並觸發功能或重定向。

https://developers.google.com/identity/sign-in/web/listeners

來源

2017-04-25 08:10:10 Ryan

我的做法是一樣的你和我確實遇到了與不斷清爽同樣的問題。

我嘗試了幾個解決方案，最好的工作之一是如下：

使用GAPI2觸發回調用戶跡象onGoogleSignIn
後端通過會話檢查ID令牌有效性，體徵用戶在我Web應用程序
如果成功的話，我註銷用戶使用GAPI2，防止無限的重裝，因爲onGoogleSignIn永遠不再叫
然後我刷新頁面，replac e爲退出按鈕的登錄按鈕，我的webapp

此解決方法當然是非常無用的，如果你想操作用戶的谷歌帳戶的一些數據，但我發現沒有使用此功能。

將某人從他們的Google帳戶中籤名的代碼。

function signOut() { 
    var auth2 = gapi.auth2.getAuthInstance(); 
    auth2.signOut().then(function() { 
     console.log('User signed out.'); 
    }); 
}

來源

2017-04-25 09:03:54 Somrlik

使用Google oAuth 2.0時刷新新用戶登錄頁面

回答

相關問題