Vue3+Oidc-client-js对接Docker部署的Keycloak获取用户信息失败求助

核心缺失步骤：处理登录回调 #

你当前只触发了登录跳转，但没有在回调页面处理授权码（code）交换token的逻辑。oidc-client-js需要在redirect_uri对应的页面调用signinRedirectCallback()，完成code到token的交换并存储用户会话，之后getUser()才能获取到有效用户信息。

具体修复步骤 #

1. 修正客户端配置（关键） #

• 在Keycloak后台将alfresco-client的访问类型设为Public：SPA应用属于公开客户端，不能暴露client_secret，直接移除配置里的client_secret字段。
• 确保Keycloak中配置的Valid Redirect URIs与代码里的redirect_uri完全一致（比如http://localhost:8081/*，支持根路径及子路径回调）。

2. 完善登录与回调逻辑 #

在Vue3入口组件（如App.vue）中，分场景处理回调和用户信息获取：

• 若URL包含code和state参数，说明是登录回调，先执行signinRedirectCallback()完成认证。
• 否则尝试获取已登录用户信息。

修正后的代码示例：

import { UserManager } from 'oidc-client';
import { onMounted } from 'vue';

// 全局复用UserManager实例，避免重复创建
const oidcConfig = {
  authority: 'http://localhost:8080/realms/AlfrescoDBP',
  client_id: 'alfresco-client',
  redirect_uri: 'http://localhost:8081',
  response_type: 'code',
  scope: 'openid profile email', // 可增加profile/email获取更多用户字段
  post_logout_redirect_uri: 'http://localhost:8081' // 可选：配置登出后跳转地址
};

const userManager = new UserManager(oidcConfig);

// 登录触发方法
export function loginWithOID() {
  userManager.signinRedirect().catch(err => console.error('登录跳转失败:', err));
}

// 在组件挂载时处理回调与用户信息
onMounted(async () => {
  const urlParams = new URLSearchParams(window.location.search);
  // 判断是否为登录回调场景
  if (urlParams.has('code') && urlParams.has('state')) {
    try {
      // 完成code交换token的流程
      const user = await userManager.signinRedirectCallback();
      console.log('登录成功，用户信息:', user);
      // 清除URL中的认证参数，避免重复回调
      window.history.replaceState({}, document.title, window.location.pathname);
      // 可将用户信息存入Vuex/Pinia或localStorage
    } catch (err) {
      console.error('回调处理失败:', err);
    }
  } else {
    // 尝试获取已登录用户
    const user = await userManager.getUser();
    if (user) {
      console.log('已登录用户:', user);
    } else {
      console.log('未登录，需触发登录流程');
      // 可选：自动触发登录，或提示用户点击登录按钮
      // loginWithOID();
    }
  }
});

3. 常见问题排查 #

• 检查Keycloak Realm是否启用OpenID Connect协议。
• 确认Docker部署的Keycloak端口映射正常（8080端口可外部访问）。
• 若浏览器控制台出现CORS错误，在Keycloak客户端配置的Web Origins中添加http://localhost:8081。
• 确保scope至少包含openid，这是OIDC认证的必要条件。

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