護照與智威湯遜與Google/Facebook戰略 - 我如何將智威湯遜與Google/Facebook戰略相結合？

這個問題是任何人誰是熟悉護照與智威湯遜與Google/Facebook戰略 - 我如何將智威湯遜與Google/Facebook戰略相結合？

Node.js的
快遞
護照
JWT認證與護照（JSON網絡令牌）
Facebook的OAuth2.0的或谷歌的OAuth2 .0

我一直在做一些在線課程，並瞭解如何做以下兩件事：

認證使用Passport本地策略+ JWT令牌使用Passport谷歌/ Facebook的戰略+曲奇/會話
認證。

我試圖結合這兩個課程的內容基本上。我想使用Google策略+智威湯遜認證。我想使用JWT而不是cookies，因爲我的應用程序將成爲網絡/移動/平板電腦應用程序，而且我需要訪問來自不同域的api。

有我與這個有兩個問題： 揭開序幕谷歌/ Facebook的OAuth的管道，你需要調用「/ auth /中的Facebook」或「/ auth /中谷歌」。 Oauth流程基本上都是一樣的，所以當我從現在開始說'/ auth/google'時，我指的是兩者之一。現在我遇到的問題是：在客戶端上，我是否使用href按鈕鏈接或axios/ajax調用來調用「/ auth/google」路由？如果我使用href或axios/ajax方法，我仍然遇到兩種解決方案的問題。

在href方法問題： 當我分配一個<a>標籤與A HREF到/ auth /中谷歌的認證工作完全正常。用戶通過Google Auth流程進行推送，他們登錄並調用'/ auth/google/callback'路由。我現在的問題是如何正確地將JWT令牌從'/ auth/google/callback'發送回客戶端？

經過大量的谷歌搜索後，我看到人們已經簡單地通過重定向查詢參數中的oauth回調將JWT傳遞迴客戶端。例如：

res.redirect(301, `/dashboard?token=${tokenForUser(req.user)}`);

我與此有關的問題是，現在的身份驗證能力保存在我的瀏覽器歷史記錄！我可以註銷（銷燬保存在localStorage中的令牌），然後只需查看我的瀏覽器URL歷史記錄，返回包含查詢參數中的令牌的url，然後我將自動再次登錄，而無需通過Google策略！這是一個巨大的安全缺陷，顯然是解決這個問題的不正確方法。

的愛可信/ Ajax方法問題： 現在擺在我這個問題說明問題，我肯定知道，如果我得到這個工作，它會解決我與以前的href問題讓所有的問題。如果我設法從axios.get（）調用中調用'/ google/auth'並在響應正文中接收JWT，我將不會將該標記作爲url參數發送，並且不會保存在瀏覽器歷史記錄中！完美的權利？也仍有一些問題，這種方法:(

當試圖調用axios.get('/auth/google')我得到以下錯誤：

我怎麼一直試圖解決的問題：

我將cors安裝到了我的npm服務器上，並在我的index.js文件中添加了app.use(cors());。
我拿了一個刺，並在「授權的J中添加了」http://localhost:3000「 Google開發者控制檯中的「avaScript起源」。

這些解決方案都沒有解決這個問題，所以現在我真的覺得停滯不前。我想使用axios/ajax的方法，但我不知道如何克服這個錯誤。

對不起，這麼長的留言，但我真的覺得我必須給你所有的信息，以便你能夠幫助我。

再次感謝，期待收到您的來信！

來源

2017-09-24 Vaderico

我以這種方式解決了這個：

在前端（可移動應用程序）我做了登錄請求谷歌（或Facebook）和用戶之後，選擇他的賬戶，並記錄在我回來包含谷歌身份驗證令牌和基本用戶信息的響應。
然後，我將該Google認證令牌發送至後端，我的API向Google API發送了更多請求以確認該令牌。（See step 5）
成功請求後，您將獲得基本的用戶信息和電子郵件。在這一點上，你可以假設用戶通過谷歌登錄是好的，因爲谷歌檢查返回它沒關係。
然後您只需註冊或使用該電子郵件登錄用戶並創建該JWT令牌。
將令牌返回給客戶端，並將其用於將來的請求。

我希望它有幫助。我多次實現了這一點，它顯示出一個很好的解決方案。

來源

2017-09-24 08:27:46 vblazenka

我找到的解決方案是在彈出式窗口（window.open）中執行OAuth流程，它使用預定義的回調在成功驗證後將令牌傳遞到前端。

下面是相關的代碼示例，從本教程採取： https://www.sitepoint.com/spa-social-login-google-facebook/

這裏是預先定義的回調和初始開啓方式，從您的前端稱爲：

window.authenticateCallback = function(token) { 
    accessToken = token; 
}; 

window.open('/api/authentication/' + provider + '/start');

這裏是您的OAuth回撥URL在成功驗證（這是彈出窗口中的最後一步/頁面）時應返回的內容：

<!-- src/public/authenticated.html --> 
<!DOCTYPE html> 
<html> 
    <head> 
    <title>Authenticated</title> 
    </head> 
    <body> 
    Authenticated successfully. 

    <script type="text/javascript"> 
     window.opener.authenticateCallback('{{token}}'); 
     window.close(); 
    </script> 
    </body> 
</html>

您的令牌現在可用於您的前端的預定義回調函數，您可以輕鬆地將其保存在localStorage中。

我想盡管如此，您可以在同一窗口中執行OAuth流程（無彈出窗口），並返回一個HTML頁面（類似於上面），它只保存標記並立即將用戶重定向到儀表板。

但是，如果您的前端域與您的api/auth服務器不同，那麼您可能需要使用一次性使用時間敏感的令牌（由您的api/auth服務器重定向到您的前端通過你的api/auth服務器），你的前端可以用來調用和接收（使用axios）你的實際令牌。這樣你就不會有瀏覽器歷史安全問題。

來源

2017-12-23 02:16:05 nickjag

護照與智威湯遜與Google/Facebook戰略 - 我如何將智威湯遜與Google/Facebook戰略相結合？

回答

相關問題