在重定向到新的 SPA 頁面時在標頭中傳遞身份驗證令牌

Question

假設這些：

       A -----------------------> B
(Sender website)          (Angular website)

我們實現了一個普通的 Angular SPA (B) ，它的 index.html 和其他資源簡單地托管在 IIS 中，並且有一個簡單的重寫規則來處理 Angular 中的路由。 Angular 中的用戶需要登錄，他們會獲得一個 JWT 令牌，並將其存儲在瀏覽器存儲中。

有一個網站(A)想要將用戶重定向到 Angular 網站，但我們也想將 JWT 令牌從 A 傳遞到 B，因為令牌是相同的，我們希望阻止用戶再次登錄。

網站 A 可以在重定向到 B 時在post 請求標頭中發送令牌。問題是 JS (Angular) 無法直接獲取標頭參數，因為它們正在發送到 IIS。

問題：

在 IIS 中有沒有辦法，我們可以從請求中獲取令牌並在檢索 index.html 時將其設置為 html 屬性？ 因此，JS 可以檢查它的 html 元素並找到令牌。
上述技術正確嗎？ 如果沒有，你能給出你的建議嗎？

Answer 1

我對此的思考過程是使用查詢參數或路由參數將用戶重定向到角度頁面。 它同樣安全/不安全，因為任何人都可以看到標頭值（如果您擔心將 JWT 暴露給最終用戶。

我會讓您的登錄頁面接受 JWT（或您被重定向到的任何頁面）

所以，假設你做https://myangularsite.com/login?jwt=JWTTOKEN

然后，在您的登錄頁面中，您可以從 url 中獲取該 JWT 令牌

const jwt = ActivatedRoute.snapshot.queryParamMap.get('jwt');

現在，您可以將該值放入localStorage ：

localStorage.setItem('jwt', jwt);

然后，在 Angular 中，只需創建一個HttpInterceptor從 localStorage 中獲取 JWT 令牌並將其應用於每個請求的標頭：

const jwt = localStorage.getItem('jwt');
const request = req.clone({ withCredentials: true, headers: jwt });

您可以將其視為與您注冊某些服務時相同的事情，他們會通過電子郵件向您發送一個鏈接以確認您的電子郵件。 您單擊的那個鏈接會將您帶回他們的網站，並帶有電子郵件確認令牌。 當您使用該令牌訪問該站點時，它會通過該令牌知道您是誰。

例如：http://facebook.com/confirm?token= emailconfirmtoken

Answer 2

上面的答案是不正確的，“因為任何人都可以看到標頭值，所以它同樣安全/不安全”。 標頭值在傳輸中使用 TLS 加密； 而 URL 查詢參數在請求的整個路由中都是可讀的。 如果安全性是最重要的問題，則不要將任何可能被視為敏感的內容作為查詢參數。

Answer 3

我們不能僅通過 IIS 來實現這一目標，最后我們編寫了一個簡單的 Node.js 應用程序作為后端，當您調用它時，它會加載 Angular 文件。

站點 A 通過 Post 請求將令牌發送到標頭中的站點 B（托管 Node.js 后端）。 然后節點應用程序在 cookie 中返回令牌。因此，當 Angular 應用程序加載時，它會從 cookie 中讀取令牌。

最后，我們將 Node 應用程序放入 IIS。

希望它可以幫助其他人。