时间戳

首页 > 解决方案 > 将 Azure AD 与 AngularJS 集成并调用 CORS web api

angularjs - 将 Azure AD 与 AngularJS 集成并调用 CORS web api

问题描述

浏览文章https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v1-angularjs-spa后，我们创建了一个名为 ToDoSpa 的 Web 应用程序和注册在Azure Active Directory 并且能够进行身份验证，但问题在于使用包含端点的 Web api 作为

AADSTS65001：用户或管理员未同意使用名为“ToDoSpa”的 ID 为“2528e8f3”的应用程序。为此用户和资源发送交互式授权请求。跟踪 ID：df70a02e-6a53-4899-8319-0ba440540500 相关 ID：699515a6-dccb-421e-92ae-e9b5a700ad1b 时间戳：|interaction_required”。

客户端 ID：ToDoSpa->2528e8f3 ToGoApi->815933a4

在 ToDoSpa 中，我们将应用程序 ToDoSpa 的范围定义为“User.Read 和 Directory.Read.All”，并使用 Expose API 中的 web api(815933a4) 的客户端 ID 授权客户端应用程序。在 App 权限中，我们已包含 ToDoSpa 并已同意该应用程序。

应用程序.js

var endpoints = {
"https://graph.microsoft.com": "https://graph.microsoft.com",
"https://localhost:44392/api/weather": "https://firstupconsultants.onmicrosoft.com/ToGoApi"<!--localhost:App Id Uri of Server-->
};
adalProvider.init({
instance: 'https://login.microsoftonline.com/',
tenant: '<tenant-id>',
clientId: '<client-id of server>',
endpoints: endpoints,
extraQueryParameter: 'prompt=admin_consent'
}, $httpProvider);
}]);

 //Get
weather1.getWeather = function () {
return $http.get("https://localhost:44392/api/weather").then(succeessCallback, failedCallback);

function succeessCallback(weather) {
    //$scope.weather = weather.data;    
    weather1.items = weather.data;
}

function failedCallback(error) {
    console.log("An error has occurred:", error);
}
}

网络配置

<add key="ida:Tenant" value="<tenant-id>"/>
<add key="ida:Audience" value="https://firstupconsultants.onmicrosoft.com/ToGoApi"/>
<!--localhost:App Id Uri of Server-->

标签： angularjsazureactive-directoryadal.js

解决方案

通常，当您构建使用应用程序权限的应用程序时，该应用程序需要管理员批准应用程序权限的页面或视图。此页面可以是应用程序登录流程的一部分、应用程序设置的一部分，也可以是专用的“连接”流程。

当你准备好向组织的管理员请求权限时，你可以将用户重定向到 Microsoft 标识平台管理员同意终结点。

这是相同的示例 URL：

GET https://login.microsoftonline.com/{tenant}/adminconsent?
client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&state=12345
&redirect_uri=http://localhost/myapp/permissions

当您想让其他租户上的用户可以使用该应用程序时，该应用程序需要先给予同意。为此，您可以使用 prompt 参数发出 HTTP 请求以轻松授予管理员同意。

您可以在下面的文档中详细了解这一点：

https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-client-creds-grant-flow#request-the-permissions-from-a-directory-admin

附加参考：

https://blog.mastykarz.nl/implementing-admin-consent-multitenant-office-365-applications-implicit-oauth-flow/

希望能帮助到你。

推荐阅读