登录反应应用程序时Keycloak无限循环

Question

我在生产中使用keycloak v26，以及库

"keycloak-js": "^26.0.0"

，我遵循了JavaScript适配器的keycloak文档和这家伙的youtube视频，并且我设置了这个简单的React钩子进行身份验证：

import { useEffect, useState } from "react"
import Keycloak from 'keycloak-js';

const useAuth = () => {

  const [isLoading, setIsLoading] = useState(false);
  const [isLoggedIn, setisLoggedIn] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    const client = new Keycloak({
      url: `${import.meta.env.VITE_KEYCLOAK_URL}`,
      realm: import.meta.env.VITE_KEYCLOAK_REALM,
      clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
    });
    
    console.log('client created', client);

    client.init({
      onLoad: 'login-required',
    })
    .then((res) => {
      console.log('res', res);
      setisLoggedIn(true);
    })
    .finally(() => {
      setIsLoading(false);
    });

  }, []);

  return {isLoggedIn, isLoading};
}

export default useAuth

我的问题是我的应用程序进入无限循环，正如您在屏幕截图中看到的那样：

它发送此有效负载：

我严格按照文档进行操作，请有人解释一下为什么它不起作用，我错过了什么？预先感谢！

Answer 1

您需要使用 HTTPS，因为一些重要的 cookie 在身份验证过程中被阻止或拒绝。这是由于几年前添加到浏览器中的 SameSite Cookie 保护方案所致。

我有一篇关于故障排除并了解 cookie 为何被阻止或拒绝的博客文章：调试 cookie 问题。