我尝试在Next.js中使用@react-keycloak/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在接下来。

2条答案

按热度按时间

ercv8c1e1#

React-keycloak/nextjs被弃用，取而代之的是react-keycloak/ssr。我遵循了这里的示例：https://www.npmjs.com/package/@react-keycloak/ssr，并且能够完全认证而没有问题。
我不确定是什么导致了你的循环问题，但看起来你没有使用所需的cookie解析器或通过getInitialProps将它们传递到props中，所以这可能是一个很好的开始。

赞(0）回复(0）举报 12个月前

fzwojiic2#

另一种办法是：Next-Auth实现了一个keycloak provider，它可以让你更轻松地保护前端和后端。只需在_app.js中指定keycloak选项/keycloak s，就可以设置好了。

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: {

    }
  }
}

字符串

如何在Next.js中使用Keycloak？

2条答案

相关问题

热门标签

最新问答