reactjs 密钥罩-js:适配器手动设置令牌

eyh26e7m  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(172)

来这里寻求一些非常需要的帮助。我们有一个非常独特的使用keycloak进行身份验证的场景。我们的要求如下:

  • “Parital”身份验证流,其中后端创建一个keycloak用户,并将该用户的access_token/refresh_token返回给我们的react前端(使用keycloak-js
  • 标准的keycloak身份验证流程,用户通过keycloak登录页面进行身份验证,并愉快地返回到我们的应用程序(这工作正常,正如预期的那样!)

正如你所想象的,第一点就是我们的麻烦所在,每当我试图手动为keycloak示例设置令牌并刷新令牌时,调用都因为400 bad request而无法进行keycloak,这是由于请求负载未定义,尽管示例属性(keycloak.accessTokenkeycloak.refreshToken已填充):

grant_type: refresh_token
refresh_token: undefined
client_id: frontend

对于实现可视化,我使用了@dasniko Niko Köbler Implementation作为起点,但我只是为令牌添加了一个setter:

import kc from 'keycloak';

const doLogin = kc.login;

const initKeycloak = (onAuthenticatedCallback: () => void) => {
  kc.init({
    onLoad: 'check-sso',
    pkceMethod: 'S256',
    enableLogging: true,
  }).then((authenticated: boolean) => {
    if (!authenticated) {
      console.log('user is not authenticated..!');
    }
    onAuthenticatedCallback();
  });
};

const setTokens = (access: string, refresh: string): void => {
  kc.token = access;
  kc.refreshToken = refresh;
};

const doLogout = kc.logout;

const getToken = () => kc.token;

const isLoggedIn = () => !!kc.token;

const updateToken = (successCallback: () => void) =>
  kc.updateToken(5)
    .then(successCallback)
    .catch(doLogin);

我还以类似的方式设置了令牌刷新实现:

axios.interceptors.request.use((config: any) => {
  if (AuthService.isLoggedIn()) {
    const cb = () => {
      config.headers.Authorization = `Bearer ${AuthService.getToken()}`;
      return Promise.resolve(config);
    };
    return AuthService.updateToken(cb);
  }
  return config;
});

有没有人成功地尝试了上面的方法?手动设置keycloak令牌,而不是让用户先通过keycloak登录?

ygya80vv

ygya80vv1#

您不需要手动设置令牌。
您是否可能在不同的域中安装了应用程序和keycloak示例?潜在问题可能与CORS策略设置或阻止keycloak Cookie的第三方Cookie/反跟踪软件相关。
测试时,你可以试着禁用你的反广告/追踪软件,或者使用不同的浏览器,如果可以的话,比如firefox可能可以,而chrome有更严格的默认设置。
要解决实际问题,请确保

  • 使用正确的PKCE流实现(而不是隐式流)。
  • 已正确设置CORS设置(客户端〉您的客户端〉Web origin)
  • 尝试为keycloak和客户端应用程序使用相同的域
  • 此外,您还可能为keycloak示例设置了端口,该端口随后将成为URI的一部分,这可能会违反策略(例如,当显式指定端口80或443时)。您可能需要删除端口配置或在应用中设置端口。

更多信息,请访问:

相关问题