如何在 Next.js 中使用 Keycloak？

Question

我正在嘗試使用@react-keycloak/nextjs在 Next.js 中的 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 的方法。

Answer 1

不推薦使用 React-keycloak/nextjs，取而代之的是 react-keycloak/ssr。 我按照這里的示例進行操作： https://www.npmjs.com/package/@react-keycloak/ssr並且能夠毫無問題地進行完全身份驗證。

我不確定是什么導致了您的循環問題，但看起來您沒有使用所需的 cookie 解析器或通過 getInitialProps 將它們傳遞到道具中，因此這可能是一個不錯的起點。

Answer 2

另一種選擇是： 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: {

    }
  }
}

如何在 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