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

Question

我正在尝试根据客户端凭据（如客户端 ID、客户端密码、租户 ID 和范围）获取访问令牌。

当我通过 PostMan 测试它时它工作正常，但是当我尝试通过我的 angular 应用程序获取时，如下所示，它抛出 CORS 错误。

直接尝试以及使用@azure/identity package 也尝试过：

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，它支持使用 PKCE 和跨源资源共享 (CORS) 的授权代码流：

URI：具有授权代码流的 MSAL.js 2.0。 更新重定向 URI：使用 Azure 门户中的应用程序清单编辑器将重定向 URI 的类型设置为 spa。 spa 重定向类型向后兼容隐式流。 当前使用隐式流程获取令牌的应用程序可以毫无问题地转移到 spa 重定向 URI 类型，并继续使用隐式流程。

如果您在未为重定向 URI 设置 CORS 的情况下尝试使用授权代码流，您将在控制台中看到此错误：按照重定向中的步骤操作

添加了重定向 URI：

http://localhost:4200

但仍然抛出 CORS 问题。

所以在这里我想知道通过客户端凭据从 SPA 生成访问代码是否正确。

在 azure 上，我看不到任何示例或文档可以帮助我在我的 API 上实施访问代码库身份验证。

如果这不是正确的方法，任何人都可以指导我吗？

注意：由于AD系统中没有用户，因此它的用户身份验证较少。

Answer 1

您不能在前端应用程序中使用 ClientSecretCredential。 您的客户端密码是一个密码，会泄露给访问您应用程序的任何人。

您需要使用@azure/msal-angular或@azure/msal-browser来获取令牌。 这些将要求用户登录，然后您可以代表他们调用 API。