Question

我正在开发Angular中的Outlook Taskpane加载项，当用户单击加载项按钮时，我想使用客户端凭据流来调用受保护的Web API。

我尝试使用普通的httpClient并执行如下所示的POST请求

 let body=new HttpParams();
    body=body.set("grant_type","client_credentials");
    body=body.set("client_id","xxxxxxx");
    body=body.set("client_secret","xxxxxx");
    body=body.set("scope","https://xxxxxx/.default");

    const url="https://login.microsoftonline.com/xxxxx/oauth2/v2.0/token";

    this.httpClient.post(url,body)

我收到如下所示的CORS错误

从源“ https://login.microsoftonline.com/xxxx/oauth2/v2.0/token”到“ https://xxxx.azurewebsites.net”的XMLHttpRequest的访问已被CORS策略阻止：所请求的资源上没有“ Access-Control-Allow-Origin”标头。

有什么办法可以解决此错误？试图在这里也使用MSAL，但是我找不到关于JS的客户凭证流的任何文档。它仅适用于.NET

Answer 1

1。永远不要将客户端机密放在前端，这是非常不安全的！

2。我们建议您使用https://github.com/AzureAD/azure-activedirectory-library-for-js。轻松集成AAD的前端。有关详细信息，请参阅No 'Access-Control-Allow-Origin' header with Microsoft Online Auth。

client_credentials grant_type在仅应用程序场景中使用。如果必须使用客户端凭据流，则需要在应用的后端获取访问令牌并将其返回到前端。

Office加载项中的客户端凭据流

1 个答案: