Azure 通过 javascript 获取访问令牌答案

【问题标题】：Azure get access token via javascriptAzure 通过 javascript 获取访问令牌
【发布时间】：2021-03-21 15:15:26
【问题描述】：

我正在尝试从 Azure 获取访问令牌。我正在关注this 教程，但问题是那个人正在使用邮递员。它在邮递员中也适用于我，但它在 javascript 中失败，我不明白为什么。

  function getAccessToken() {
    fetch(`${loginUrl}${tenantId}/oauth2/token`, {
      method: "POST",
      body: JSON.stringify({
        grant_type: "client_credentials",
        client_id: clientId,
        client_secret: clientSecret,
        resource: resource,
      })
    })
      .then((response) => {
        console.log(JSON.stringify(response));
      })
      .catch((err) => {
        console.log(JSON.stringify(err));
      });
  }

凭据很好，即 clientId、secret、tenantid 等。我也在 PowerShell 中进行了尝试，并且成功了：

Invoke-RestMethod `
    -Uri "$loginUrl$tenantId/oauth2/token" `
    -Method Post `
    -Body @{"grant_type"="client_credentials"; "resource" = $resource; "client_id" = $clientId; "client_secret" = $clientSecret }

但是在 js 上我得到以下错误：

CORS 策略已阻止从源“null”获取“https://login.microsoftonline.com/myTenantId/oauth2/token”的访问权限：不存在“Access-Control-Allow-Origin”标头请求的资源。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我目前在 HTML 文件中运行此脚本以进行测试。

【问题讨论】：

在 HTML 文件中，当我们直接从不同的域调用 rest API 时，我们会得到 cors 问题。更多详情请参考developer.mozilla.org/en-US/docs/Web/HTTP/CORS。另外，如果你想在 HTML 文件中获取 Azue AD 令牌，你可以使用 msaljs 实现隐式流程来获取令牌：docs.microsoft.com/en-us/azure/active-directory/develop/…

标签： javascript azure oauth-2.0 azure-rest-api

【解决方案1】：

如果我们在 HTML 页面中直接从与您网站不同的域调用 rest api，我们将得到 CORS 问题。这是出于安全原因。更多详情请参考here。

所以如果你想在 HTML 页面中获取 Azure AD 令牌，我建议你使用包 msaljs 来实现隐式流程来获取令牌。该软件包已修复 cors 问题。具体操作方法请参考here。

此外，如果您仍想使用客户端凭据流在 HTML 页面中获取令牌。你有两个选择。一种选择是使用代理服务器。代理充当客户端和服务器之间的中介。后续详情请参考blog。

【讨论】：