在 Kubernetes 上 Keycloak 登录后获取 NextJS 应用的用户信息

Posted 2023-02-19

【中文标题】在 Kubernetes 上 Keycloak 登录后获取 NextJS 应用的用户信息

【英文标题】：Get user information on NextJS app after Keycloak login on Kubernetes

【发布时间】：2021-09-03 10:24:30

【问题描述】：

在localhost:8080/auth 的另一个标签上成功Keycloak 登录后被重定向到我的NextJS 应用程序后，我一直在尝试获取经过身份验证的用户信息。

入口（入口点）用于检查 Kuberentes 上经过身份验证的用户，然后将其重定向到应用程序。我的意图是使用@react-keycloak/s-s-r 在我的index.tsx 页面上获取用户信息。

到目前为止，我的 app.tsx 中有这个：

const keycloakCfg = 
  url: 'http://localhost:8080/auth',
  realm: 'master',
  clientId: 'account-console',


interface InitialProps 
  cookies: unknown


export default function MyApp(props: AppProps & InitialProps) 
  const  Component, pageProps, cookies  = props;
  const initOptions = 
    checkLoginIframe: false
  


  return (
    <>
    <s-s-rKeycloakProvider
      keycloakConfig=keycloakCfg
      persistor=s-s-rCookies(cookies)
      initOptions=initOptions>
        <Component ...pageProps />
    </s-s-rKeycloakProvider>
    </>
  );


function parseCookies(req?: IncomingMessage) 
  if (!req || !req.headers) 
    return 
  
  return cookie.parse(req.headers.cookie || '')


MyApp.getInitialProps = async (context: AppContext) => 
  // Extract cookies from AppContext
  return 
    cookies: parseCookies(context?.ctx?.req),
  

在我的index.tsx 里面我有：

  const  keycloak  = useKeycloak<KeycloakInstance>();
  const parsedToken: ParsedToken | undefined = keycloak?.tokenParsed;

   console.log(keycloak?.authenticated)
    keycloak?.authenticated || (keycloak && parsedToken)
    ? console.log(parsedToken)
    : console.log('error logging in');

问题是即使在从localhost:8080/auth 登录后 - 仍然会收到错误消息。

目前，在单独的选项卡登录后会发生以下流程：

我去 localhost:3000

页面加载后被重定向到： http://localhost:3000/#error=invalid_request&error_description=Missing+parameter%3A+code_challenge_method&state=8c761520-8aeb-4365-934b-076d8c1d317c

在上面的链接停留 1-2 秒后，它会回到 localhost:3000

【参考方案1】：

您的问题Missing parameter: code_challenge_method 将解决pkceMethod 配置：

  const initOptions = 
    checkLoginIframe: false,
    pkceMethod: 'S256'`
  

【讨论】：

谢谢，现在我收到一个新错误：Access to XMLHttpRequest at 'http://localhost:8080/auth/realms/test/protocol/openid-connect/token' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 我该如何解决这个问题？

对不起，这不是聊天，我会解决你所有的问题。请接受答案并使用***.com/help/minimal-reproducible-example

提出另一个问题