API 安全性与 AngularJs SPA 相结合

Question

我现在正在进入对我来说未知的领域......

我想做的是使用 Azure 保护我的 API。我希望我的应用程序能够与它“交谈”。

因此，我已经使用 Azure AD 身份验证为我们提供的内容来保护我的应用程序...我遵循了以下方法：

指南： 使用 Azure AD 保护 AngularJS 单页应用程序

视频： 用于 Microsoft Azure Active Directory 身份验证的 AngularJS 模块

我不知道如何让它与我的 API 一起使用，也不知道如何在 Angularjs SPA Azure AD 身份验证方面正确保护它。

所以我并不是在追求完整的指南或我真正想学习的东西。 问题是我什至不知道从哪里开始拉动胎面。

任何人都知道任何好的指示，或者有一个关于我应该看什么的步骤列表，也可能是按什么顺序或类似的东西。

任何事情都会非常感激！

提前致谢

----------------------编辑/跟进---------------------- --

好吧，我已经设法保护我的 API 并将客户端和 API 连接到旧门户中的同一个 Azure AD。

API 和客户端现在都启用了 ssl，因此它们使用 https 协议。

当我尝试通过邮递员从 API 获取联系人列表时，我收到“消息”：“此请求的授权已被拒绝。”

感觉它做了它应该做的事情。

但是，当我通过 angularjs SPA 客户端尝试 GET 函数时，我得到状态代码 500。

    $scope.fillTable = function () {
        $http.get('https://localhost:44338/api/Contacts').success(function (data) {
            var peopleList = data;
            $scope.contactList = peopleList;
        })
    }

由于某种原因，我的授权密钥甚至不在标头中，因为如文档中所述，由于 adal.js，它应该在标头中。

因此，当我登录时，如果我只在 get 函数中输入“api/Contacts”，我就会得到我的身份验证密钥。没有地址的其余部分。

但当我运行 get 函数时却不是这样。

API 和客户端是否必须位于同一解决方案中才能正常工作？因为我已经修复了 CORS，并在清单中将 oauth2AllowImplicitFLow 设置为 true，并且还在 azure ad 中委托了多余的部分。

我结合上述指南遵循了这些指南：

使用 Azure AD 中的承载令牌保护 Web API

将 Azure AD 集成到 AngularJS 单页应用程序中

在 ASP.NET Web API 2 中启用跨源请求

Answer 1

一般来说，Azure AD 是微软基于云的目录和身份管理服务。通常，尝试请求受 Azure AD 保护的资源（API 等）的用户需要遵循 OAuth 2.0 身份验证大流程，以从 Azure AD 获取访问令牌。并在 HTTP 请求的

Authorization

标头中针对资源设置令牌。

要了解Azure App Service中身份验证和授权的工作原理，您可以参考 https://learn.microsoft.com/en-us/azure/app-service/app-service-authentication-overview?toc=% 2fazure%2fapp-service-web%2ftoc.json

您的场景使用 Azure AD 和 OAuth 2.0 隐式授权来保护其 Web API 后端。您可以参考https://learn.microsoft.com/en-us/azure/active-directory/active-directory-authentication-scenarios?toc=%2fazure%2factive-directory%2fdevelop%2ftoc.json#single- page-application-spa 用于整个工作流程。 adal for js SDK 实现了帮助您使用 Azure AD 在单页应用程序中处理身份验证的功能。

了解了这些 Azure AD 主题的基本知识后，我想您将对 Azure AD 如何保护您的后端 Web API 以及您的客户端应用程序如何向您的安全 Web API 进行授权有进一步的了解。

如有任何疑问，请随时告诉我。