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://xxxx.azurewebsites.net”访问“https://login.microsoftonline.com/xxxx/oauth2/v2.0/token”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。.

有没有办法解决这个错误？在这里也尝试使用 MSAL，但我找不到有关 JS 客户端凭据流的任何文档。它仅适用于 .NET

Answer 1

1.千万不要把client secret放在前端，这样很不安全！

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