如何在 Next.js 中使用 Keycloak？

Question

I'm trying to authenticate in Keycloak in Next.js using @react-keycloak/nextjs but once I pass the login it keeps sending me back to the Keycloak server and returning to the main page until it gives me an error because my token key is expired.我正在尝试使用@react-keycloak/nextjs在 Next.js 中的 Keycloak 中进行身份验证，但是一旦我通过登录，它就会不断将我发送回 Keycloak 服务器并返回主页，直到它给我一个错误，因为我的令牌密钥已过期. This is my _app.js :这是我的_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,
}

And this is my Keycloak configuration这是我的 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',
}

If anyone could point out what is wrong or alternatively tell me another way to use Keycloak in next.如果有人能指出什么是错的，或者在接下来告诉我另一种使用 Keycloak 的方法。

Answer 1

React-keycloak/nextjs is deprecated in favor of react-keycloak/ssr.不推荐使用 React-keycloak/nextjs，取而代之的是 react-keycloak/ssr。 I followed the examples here: https://www.npmjs.com/package/@react-keycloak/ssr and was able to fully authenticate without issue.我按照这里的示例进行操作： https://www.npmjs.com/package/@react-keycloak/ssr并且能够毫无问题地进行完全身份验证。

I'm not sure what is causing your looping issues but it doesn't look like you are using the required cookie parser or passing them into the props via getInitialProps so that may be a good place to start.我不确定是什么导致了您的循环问题，但看起来您没有使用所需的 cookie 解析器或通过 getInitialProps 将它们传递到道具中，因此这可能是一个不错的起点。

Answer 2

An alternative would be: Next-Auth has implemented a keycloak provider which would make your life much easier protecting both Frontend and Backend.另一种选择是： Next-Auth已经实现了一个keycloak 提供程序，这将使您的生活更容易保护前端和后端。 Just specify keycloak options/configs in _app.js and you all set.只需在 _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: {

    }
  }
}

如何在 Next.js 中使用 Keycloak？

问题描述

2 个解决方案

解决方案1
6 已采纳 2021-01-18 14:35:14

解决方案2
4 2021-11-01 10:46:42

如何在 Next.js 中使用 Keycloak？

问题描述

2 个解决方案

解决方案1 6 已采纳 2021-01-18 14:35:14

解决方案2 4 2021-11-01 10:46:42

解决方案1
6 已采纳 2021-01-18 14:35:14

解决方案2
4 2021-11-01 10:46:42