将 Azure AD 与 AngularJS 集成并调用 CORS web api答案

【问题标题】：Integrate Azure AD with AngularJS and call CORS web api将 Azure AD 与 AngularJS 集成并调用 CORS web api
【发布时间】：2019-10-29 19:16:02
【问题描述】：

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

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

客户编号： ToDoSpa->2528e8f3 ToGoApi->815933a4

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

app.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);
}
}

web.config

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

【问题讨论】：

标签： angularjs azure active-directory adal.js

【解决方案1】：

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

当您准备好向组织管理员请求权限时，您可以将用户重定向到 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/

希望对你有帮助。

【讨论】：