API Secutiry与AngularJs SPA相结合

Question

我现在正在探索对我来说未知的领域......

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

所以我已经使用Azure AD身份验证为我们提供了我的应用程序...我按照以下方法使用了这个方法：

指南： Securing AngularJS Single Page Apps with Azure AD

视频： AngularJS Module for Microsoft Azure Active Directory Authentication

我不知道如何使用我的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应该是，如文档中所述。

因此，当我登录时，我获得了我的身份验证密钥，而且如果我只是在获取功能中使用“api / Contacts”。没有其余的地址。

但不是我应该运行get函数的时候。

api和客户端是否必须在同一解决方案中才能工作？因为我已经修复了CORS并且在清单中将oauth2AllowImplicitFLow设置为true，并且在天蓝广告中也分配了多余的。

我将这些指南与上述指南结合使用：

Protect a Web API using Bearer tokens from Azure AD

Integrating Azure AD into an AngularJS single page app

Enabling Cross-Origin Requests in ASP.NET Web API 2

Answer 1

一般来说，Azure AD是Microsoft的基于云的目录和身份管理服务。通常，尝试请求受Azure AD保护的资源（API等）的用户必须遵循OAuth 2.0身份验证大流程才能从Azure AD获得访问令牌。并在HTTP请求的Authorization标头中设置令牌以对抗资源。

要了解身份验证和授权在Azure App Service中的工作原理，您可以参考https://docs.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://docs.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。

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