如何在 nextjs 中使用 keycloak？答案

【问题标题】：How use keycloak in nextjs?如何在 nextjs 中使用 keycloak？
【发布时间】：2021-04-20 00:49:43
【问题描述】：

我正在尝试使用@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 的方法。提前感谢

【问题讨论】：

标签： reactjs next.js keycloak

【解决方案1】：

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

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

【讨论】：

已经可以了。你知道如何在这个库中传递作用域吗？

【解决方案2】：

另一种选择是： Next-Auth v4 (beta) 实现了 keycloak provider，这将使您的生活更轻松，同时保护前端和后端。只需在 _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: {

    }
  }
}

【讨论】：