Angular Azure AD B2C：客户在兑换机密授权时必须发送客户机密

我尝试使用授权代码和Azure AD B2C（客户端的oidc客户端）为Angular应用程序设置身份验证，但Angular出现以下错误：

在查看B2C审核日志后，我发现以下错误消息：

客户在兑换机密赠款时必须发送客户机密

以下是我的客户端配置：

const settings = {
  stsAuthority: 'https://supportodqqcdev.b2clogin.com/supportodqqcDev.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_SignUpSignInOdqPlatine',
  clientId: '8447df5b-35a0-40a7-944f-5dcce87a2193',
  clientRoot: 'https://localhost:4200',
  scope: 'openid https://supportodqqcDev.onmicrosoft.com/platineclientdev/read',
};
this.userManager = new UserManager({
  authority: settings.stsAuthority,
  client_id: settings.clientId,
  redirect_uri: `${settings.clientRoot}/signin-callback`,
  scope: settings.scope,
  response_type: 'code',
  post_logout_redirect_uri: `${settings.clientRoot}/signout-callback`,
  automaticSilentRenew: true,
  silent_redirect_uri: `${settings.clientRoot}/assets/signin-silent-callback.html`,
});

如果我将上述配置切换为使用本地IdentityServer实例，则一切正常

---

有人能告诉我应该在哪里或如何调查吗？

您的图像显示了CORS错误

我不确定oidc客户端是否与B2C一起使用OOTB。更多的是针对identityserver

---

请看一下。

我怀疑您的代码没有问题，但是

我最后听说，Azure AD不允许对令牌端点进行跨源调用，因此不支持SPA在2019年应该使用的授权代码流（PKCE）

除非我弄错了，否则这将意味着您在与Azure AD集成时需要使用（未推荐的）隐式流。SPA的问题已经存在好几年了

出于兴趣，几年前我在Azure SPA workrounds上写了几篇文章-我怀疑其中一些仍然相关：

---

我遇到了与您完全相同的问题，只是能够解决它

AD正在向您请求客户端_密码，因为尚未为PKCE配置该密码。要告诉AD您想将PKCE用于特定的重定向url，您需要将其类型从

'Web'

设置为

'Spa'

。这可以在清单中完成

在清单中搜索属性

replyUrlsWithType

，并查找您的

../sign回调

url。将其类型更改为

'Spa'

，您应该会很好

例如：

配置的url现在将从授权页面中消失，但没关系->它仍然存在于清单中。微软团队正在研究这种新型的手机

还要确保将应用程序标记为公共客户端

---

有关更多信息，请参见我的回答：

谢谢我知道MSAL。当我在

https://supportodqqcdev.b2clogin.com/supportodqqcDev.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_SignUpSignInOdqPlatine

，

code

包含在支持的响应类型中。授权代码流不需要支持？理论上应该支持，但有区别。您可能会发现msal.js无法与identityserver一起使用OOTB。另外，我认为MSAL.js使用隐式流而不是授权代码授予。@MaximeGélinas，您不应该为SPA应用程序使用验证代码流，现成的B2C支持SPA应用程序的验证代码流，但我们不应该使用，因为安全风险很高（风险在于，您需要在客户端脚本中公开客户端id和密码，任何人都可以从web上轻松读取）。@Ramakrishna Authz代码流是SPA的新方式。自2019年夏季以来，隐式流已被弃用。请参阅：。只是为了澄清-授权代码流（PKCE）建议用于SPA，Maxime的代码看起来完全正确。但是Azure AD错误地阻止了对令牌端点的请求。我的目标是通过后端API将请求双跳到令牌端点来解决此问题。我会在有时间时更新我的示例以完成此操作。谁将为您兑换代码？我猜您正在使用SPA和trying集成身份验证代码流。如果您使用SPA，则必须使用隐式流。B2C显示客户端\u secret is must，因为它需要它来兑换代码。将响应\u type值替换为“token”，并查看它在做什么B2C当前支持本机应用程序的PKCE流，但不支持Web。本机应用程序可以通过usi兑换身份验证代码ng PKCE流，但不是web应用程序。

"replyUrlsWithType": [
    {
        "url": "http://localhost:8080/signin-callback",
        "type": "Spa"
    },
]