时间戳

首页 > 解决方案 > 如何在 nextjs 中使用 keycloak？

reactjs - 如何在 nextjs 中使用 keycloak？

问题描述

我正在尝试使用@react-keycloak/nextjs 在 nextjs 中的 keycloak 中进行身份验证，但是一旦我通过登录，它就会不断将我发送回 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,
}

这些是我的 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',
}

如果有人能指出什么是错的，或者在接下来告诉我另一种使用 keycloak 的方法。提前感谢

标签： reactjsnext.jskeycloak

解决方案

不推荐使用 React-keycloak/nextjs，取而代之的是 react-keycloak/ssr。我在这里遵循了示例：https ://www.npmjs.com/package/@react-keycloak/ssr并且能够毫无问题地进行完全身份验证。

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

推荐阅读