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

Question

我正在用Angular开发Outlook任务窗格加载项，当用户单击加载项按钮时，我想使用客户端凭据流来调用受保护的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仅在应用程序中使用。如果必须使用客户端凭据流，则需要在应用程序的后端获取访问令牌并将其返回给前端。