Vue3中keycloak-js初始化失败求助（版本24.0.2）

Vue3应用使用keycloak-js（版本24.0.2）对接同版本Keycloak服务端，代码如下：

import Keycloak from 'keycloak-js'

let initOptions = {
  url: 'https://address'
  realm: 'myrealm',
  clientId: 'myapp'
}

let keycloak = new Keycloak(initOptions);

try {
  const authenticated = await keycloak.init({ onLoad: 'login-required', checkLoginIframe: false });
  console.log(`User is ${authenticated ? 'authenticated' : 'not authenticated'}`);
} catch (error) {
  console.error('Failed to initialize adapter:', error);
}

控制台报错：Failed to initialize adapter: undefined，浏览器弹出提示：

"Cookies with the SameSite=None; Secure and not Partitioned attributes that operate in cross-site contexts are third-party cookies. In future Chrome versions, reading third-party cookies will be blocked. This behavior protects user data from cross-site tracking."

受影响资源为Keycloak的Cookie和令牌，令牌返回401状态码，但Keycloak服务端显示会话已创建。尝试设置checkLoginIframe: false未解决问题，询问keycloak.init()无法工作的原因及修复方案。

问题核心是现代浏览器对跨站点第三方Cookie的限制：当Vue应用与Keycloak服务分属不同域名时，Keycloak生成的会话Cookie属于第三方Cookie。当前Chrome等浏览器已开始限制未携带Partitioned属性的SameSite=None; Secure第三方Cookie的读取，导致keycloak-js无法获取认证会话的Cookie，初始化失败后返回401。

• 给Keycloak Cookie添加分区属性
  登录Keycloak管理后台，进入目标Realm的「Realm Settings」→「Cookies」，勾选「Cookie Partitioned」选项，保存后重启Keycloak服务。此设置会让Keycloak生成的Cookie带上Partitioned属性，满足浏览器对跨站点第三方Cookie的读取要求。

• 修正代码语法错误
  原initOptions中url行末尾缺少逗号，这会导致JavaScript语法错误，直接影响初始化流程，修正后代码如下：

  let initOptions = {
    url: 'https://address',
    realm: 'myrealm',
    clientId: 'myapp'
  }
  

• 校验客户端配置
  确认Keycloak客户端的「Access Type」设置为public（前端应用专属类型）；在客户端「Settings」→「Advanced Settings」中，确保「Valid Redirect URIs」「Web Origins」已正确配置为Vue应用的域名（例如https://your-vue-app.com/*）。

• 启用PKCE认证流程（可选）
  对于前端公共客户端，推荐启用PKCE增强安全性：在Keycloak客户端设置的「Advanced Settings」中开启「PKCE Enabled」。初始化时可显式指定PKCE方法（24版本默认已为public客户端启用）：

  await keycloak.init({ 
    onLoad: 'login-required', 
    checkLoginIframe: false,
    pkceMethod: 'S256'
  });
  

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