如何在 nextjs 中使用 keycloak？
Posted
技术标签:
【中文标题】如何在 nextjs 中使用 keycloak？【英文标题】：How use keycloak in nextjs? 【发布时间】：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, s-s-rKeycloakProvider 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 />
<s-s-rKeycloakProvider
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>
</s-s-rKeycloakProvider>
</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 的方法。 提前感谢
【问题讨论】：
【参考方案1】：React-keycloak/nextjs 已弃用，取而代之的是 react-keycloak/s-s-r。我按照此处的示例进行操作：https://www.npmjs.com/package/@react-keycloak/s-s-r 并且能够毫无问题地进行完全身份验证。
我不确定是什么导致了您的循环问题，但您似乎没有使用所需的 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:
【讨论】：
以上是关于如何在 nextjs 中使用 keycloak？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Spring Boot 应用程序中测试 Keycloak 身份验证？