使用 Vue JS 和 .Net Core Web API 之類的堆棧 - 我在哪里實施身份驗證（Azure AD）？

Question

我對“在哪里”（如果不是兩者都在哪一層）感到困惑，我將在我的應用程序中使用 Azure AD 實現身份驗證。

所以我有一個 Vue JS 前端，並且我已經閱讀了有關如何利用 ADAL JS 來幫助客戶端進行身份驗證的信息。

但是，我還需要保護對我的 web API 的調用，這顯然不是 ADAL JS 完成的。

問題

如何限制對我的 web api 的調用僅限於使用 Azure AD 進行身份驗證的用戶（他們需要通過 vue js 應用程序登錄）？ 然后，類似地，允許 web api 使用 Azure AD 進行身份驗證，以便從 blob 存儲中檢索內容？

進一步的背景（如有必要）

一個示例流程是用戶登錄（在 vue js 應用程序中），將文件發布到我的 web api，這會將其放入 blob 存儲（天藍色）。 然后，經過身份驗證的用戶可以稍后請求此文件（需要在 azure 中將其限制為僅對經過身份驗證的用戶），然后將其返回給經過身份驗證的客戶端。

編輯

這是我想太多了嗎？ 它是 web API 在 Azure 中使用 AD 進行身份驗證的簡單案例，接收令牌並將該令牌轉發給客戶端以傳遞嗎？

Answer 1

您的 Vue 應用程序需要使用 MSAL.js 或 ADAL.js 處理身份驗證。 然后，它可以使用 OAuth 隱式流獲取后端 API 的訪問令牌。

您的后端 API 使用他們獲得的 JSON Web 令牌對調用者進行身份驗證。

您可以通過定義范圍和應用程序權限來控制哪些應用程序可以調用您的 API，然后將它們分配給您希望擁有這些訪問權限的應用程序。 您的 API 然后需要檢查他們擁有這些權限的令牌:)

權限和同意： https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent

前端登錄： https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in

前端獲取令牌： https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-acquire-token