如何在 Next.js 中使用 Keycloak？

Question

如何在 Next.js 中使用 Keycloak？

我正在尝试使用 Next.js 在 Keycloak 中进行身份验证@react-keycloak/nextjs，但是一旦我通过登录，它就会不断地将我发送回 Keycloak 服务器并返回主页，直到它给我一个错误，因为我的令牌密钥已过期。这是我的_app.js：

import { ApolloProvider } from '@apollo/react-hooks'
import CssBaseline from '@material-ui/core/CssBaseline'
import { ThemeProvider } from '@material-ui/core/styles'
import { Persistors, SSRKeycloakProvider } from '@react-keycloak/nextjs'
import Layout from 'components/layout/Layout'
import { useApollo } from 'lib/apolloClient'
import KeycloakLoading from 'components/KeycloakLoading'
import {
  keycloakCfg,
  keycloakProviderInitConfig,
  onKeycloakLogout,
  onKeycloakTokens,
} from 'lib/keycloak'
import Head from 'next/head'
import PropTypes from 'prop-types'
import React from 'react'
import theme from 'styles/theme'
import 'leaflet/dist/leaflet.css'
import 'react-leaflet-markercluster/dist/styles.min.css'
import 'styles/styles.css'
import 'styles/animations.css'
import '../styles/globals.css'

// export function reportWebVitals(metric) {
//   // These metrics can be sent to any analytics service
//   console.log(metric)
// }

export default function MyApp(props) {
  const { Component, pageProps, cookies } = props

  const apolloClient = useApollo(pageProps.initialApolloState)

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side')
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles)
    }
  }, [])

  return (
    <React.Fragment>
      <Head>
        <title>My page</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <SSRKeycloakProvider
          keycloakConfig={keycloakCfg}
          persistor={Persistors.Cookies(cookies)}
          initConfig={keycloakProviderInitConfig}
          onTokens={onKeycloakTokens}
          onAuthLogout={onKeycloakLogout}
          LoadingComponent={
            <React.Fragment>
              <KeycloakLoading />
            </React.Fragment>
          }
        >
          <ApolloProvider client={apolloClient}>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </ApolloProvider>
        </SSRKeycloakProvider>
      </ThemeProvider>
    </React.Fragment>
  )
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
  cookies: PropTypes.any,
}

Run Code Online (Sandbox Code Playgroud)

这是我的 Keycloak 配置

export const keycloakCfg = {
  realm: APP_CONSTANTS.KEYCLOAK_REALM,
  url: `${APP_CONSTANTS.KEYCLOAK_HOST}/auth`,
  clientId: APP_CONSTANTS.KEYCLOAK_CLIENT_ID,
}
export const keycloakProviderInitConfig = {
  onLoad: 'login-required',
}

Run Code Online (Sandbox Code Playgroud)

如果有人可以指出哪里出了问题，或者告诉我下一步使用 Keycloak 的另一种方法。

Answer 1

小智 8

React-keycloak/nextjs 已被弃用，取而代之的是 React-keycloak/ssr。我按照此处的示例进行操作： https: //www.npmjs.com/package/@react-keycloak/ssr，并且能够毫无问题地进行完全身份验证。

我不确定是什么导致了循环问题，但看起来您没有使用所需的 cookie 解析器或通过 getInitialProps 将它们传递到 props 中，因此这可能是一个不错的起点。

Answer 2

V. *_*omi 7

另一种选择是： Next-Auth实现了一个keycloak 提供程序，这将使您的生活更轻松地保护前端和后端。只需在 _app.js 中指定 keycloak 选项/配置即可完成设置。

import {signOut, getSession, useSession } from 'next-auth/react';

export default function Home() {
  let session = useSession();
  console.log(session);
  return (
    <div >
      <button onClick={() => {
        console.log(session);
        signOut();
        console.log(session);
      }}> Sign Out </button>
      <h1>H1 test</h1>
    </div>
  )
}

export const getServerSideProps = async (ctx) => {

  const backendSession = await getSession(ctx)

  console.log(backendSession);
  return {
    props: {

    }
  }
}

Run Code Online (Sandbox Code Playgroud)

我在 Keycloak 中遇到了许多问题，其中包括 NextAuth、令牌轮换、离线时令牌过期等问题，NextAuth 中存在大量问题。这对我个人来说是一场噩梦。 (2认同)

归档时间：	5 年前
查看次数：	21632 次
最近记录：	2 年，2 月前