使用@azure/msal-browser集成Keycloak 20.0.5至React时遇授权错误

我使用@azure/msal-browser在React项目中集成Keycloak实现认证功能，该集成在Keycloak 20以下版本可正常运行，但升级到20.0.5版本后出现以下错误：

[org.keycloak.events] (executor-thread-23) type=CODE_TO_TOKEN_ERROR, realmId=d738fd4d-b10a-4a9f-808a-a13a12f43995, clientId=test, userId=null, ipAddress=102.15.0.3, error=invalid_client_credentials, grant_type=authorization_code

当前msal配置如下：

import * as msal from "@azure/msal-browser";

const BASE_URL = "https://localhost:8443/";
const REALM = "Demo";
const CLIENT_ID = "test"

export const MsalInstance = new msal.PublicClientApplication({
    auth: {
        protocolMode: msal.ProtocolMode.OIDC,
        authorityMetadata: JSON.stringify({
            authorization_endpoint: `${BASE_URL}realms/${REALM}/protocol/openid-connect/auth`,
            token_endpoint: `${BASE_URL}realms/${REALM}/protocol/openid-connect/token`,
            issuer: `${BASE_URL}realms/${REALM}`,
            userinfo_endpoint: `${BASE_URL}realms/${REALM}/protocol/openid-connect/userinfo`,
        }),
        authority: `${BASE_URL}realms/${REALM}`,
        clientId: CLIENT_ID,
        knownAuthorities: [`${BASE_URL}realms/${REALM}`],
    },
});

我猜测授权失败是因为userId=null，可能用户信息未被正确解析？尝试过给客户端添加OpenID作用域但问题仍未解决，且用户凭据已正确传递（系统同时集成了Active Directory用于用户认证），请问正确的配置和传递方式是什么？

• 调整Keycloak客户端认证模式
  Keycloak 20+版本默认对公共客户端（Public Client）启用了客户端认证要求，但公共客户端本身没有密钥。需登录Keycloak控制台，进入目标客户端的Settings标签页：

  • 将Client Authentication设置为Off
  • 确认Access Type为public

• 简化msal配置，移除冗余元数据
  msal可自动从Keycloak的OIDC well-known端点获取元数据，手动配置authorityMetadata可能导致冲突。修改后的配置如下：

import * as msal from "@azure/msal-browser";

const BASE_URL = "https://localhost:8443/";
const REALM = "Demo";
const CLIENT_ID = "test"

export const MsalInstance = new msal.PublicClientApplication({
    auth: {
        protocolMode: msal.ProtocolMode.OIDC,
        authority: `${BASE_URL}realms/${REALM}`,
        clientId: CLIENT_ID,
        knownAuthorities: [`${BASE_URL}realms/${REALM}`],
    },
});

• 确保登录请求包含必要作用域
  发起登录请求时必须携带OIDC基础作用域，示例代码：

const loginRequest = {
    scopes: ["openid", "profile", "email"]
};

MsalInstance.loginRedirect(loginRequest);

• 澄清userId=null的逻辑
  userId=null并非直接报错原因，核心错误是invalid_client_credentials，说明Keycloak在令牌交换阶段判定客户端凭据无效。解决客户端认证模式问题后，userId会正常返回，用户信息也能正确解析。

内容的提问来源于stack exchange，提问作者mithamovic