OAuth 身份验证 - 使用 JavaScript（CORS 策略）的访问令牌错误

Question

我正在使用 JavaScript 将 Power BI 报表嵌入到另一个应用程序中，我可以使用下面的 JavaScript 代码生成访问令牌 (Barear)，但它不适用于所有浏览器。它显示在错误消息下方。

从源“null”访问 XMLHttpRequest 在“https://login.microsoftonline.com//oauth2/token”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“访问控制允许-请求的资源上存在 Origin' 标头。

我添加了所需的请求标头，但结果仍然相同。

	 var key;  
	 var request = new XMLHttpRequest(); 
    request.open("POST", "https://login.microsoftonline.com/<<tenant_id>>/oauth2/token", true); 
  
	request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	request.setRequestHeader('Access-Control-Allow-Headers', 'x-requested-with');
	request.setRequestHeader('Access-Control-Allow-Origin', '*');
    request.send("grant_type=client_credentials&client_id=<<clientid>>&client_secret=<<clientsecret>>&resource:<<resourceurl>>"); // specify the credentials to receive the token on request
    request.onreadystatechange = function () {
        if (request.readyState == request.DONE) {
            var response = request.responseText;
            var obj = JSON.parse(response); 
            key = obj.access_token; 
            token_ = key; 
        }
    }

有什么想法吗？

谢谢！

Answer 1

您永远不应该将客户端密码放在前端。

我们建议您使用 azure-activedirectory-library-for-js 作为前端轻松集成 AAD。详情可以参考No 'Access-Control-Allow-Origin' header with Microsoft Online Auth。

client_credentialsgrant_type 仅用于应用场景。如果您必须使用客户端凭据流，则需要在应用的后端获取访问令牌并将其返回给前端。