在Angular中的SPA应用程序上基于Microsoft Azure AD身份验证上的客户端凭据获取访问令牌时出现CORS错误

7eumitmz  于 2023-01-21  发布在  Angular
关注(0)|答案(1)|浏览(117)

我正在尝试基于客户端凭据(如客户端ID、客户端密码、租户ID和范围)获取访问令牌。
当我通过Postman测试它的时候,它工作得很好,但是当我试图通过我的Angular 应用程序获取时,它会抛出CORS错误。
直接尝试,也尝试使用@azure/identity包:

let clientSecretCredential = new ClientSecretCredential(
  '*********',
  '*********',
  '*********'
)
clientSecretCredential.getToken('api://*******/.default',{}).then((accessToken: AccessToken) => {
  console.log("Access Token:",accessToken);
}).catch((reason: any) => {
  console.log("Error while generating Access Token:",reason);
});

我尝试了以下方法来解决CORS问题。

Azure建议:

单页应用程序(SPA)的重定向URI使用身份验证代码流的SPA的重定向URI需要特殊配置。
添加一个重定向URI,该URI支持使用PKCE和跨源资源共享(CORS)的身份验证代码流:
URI:具有身份验证代码流的MSAL.js 2.0。更新重定向URI:使用Azure门户中的应用程序清单编辑器将重定向URI的类型设置为spa。spa重定向类型与隐式流向后兼容。当前使用隐式流获取令牌的应用可以毫无问题地移到spa重定向URI类型,并继续使用隐式流。
如果您尝试使用授权代码流而不为重定向URI设置CORS,则会在控制台中看到此错误:按照重定向中的步骤操作

已添加重定向URI:

http://localhost:4200

但仍会引发CORS问题。
因此,在这里我想知道通过客户端凭据从SPA生成访问代码是否正确。
在azure alos上,我看不到任何帮助我在API上实现基于访问代码的身份验证的示例或文档。
如果这条路不对,有人能给我指路吗?
注:由于AD系统中没有用户,因此其用户身份验证较少。

nfg76nw0

nfg76nw01#

你不能在前端应用程序中使用ClientSecretCredential。你的客户端密钥是密码,将泄露给访问你的应用程序的任何人。
您需要使用@azure/msal-angular或@azure/msal-browser来获取令牌。这将需要用户登录,然后您可以代表他们调用API。

相关问题