Question

我正在Angular 2项目中实现Keycloak身份验证服务。我使用服务登录，注销等。

验证用户并注销似乎有效。我现在正试图保护一些路线。我现在有一个工作的AuthGuard。要检查用户是否已登录（在AuthGuard中），我在服务中有一个isAuthenticated（）方法。这是服务：

import { Injectable } from '@angular/core';

declare let Keycloak: any;

@Injectable()
export class KeycloakService {
  private keycloak = new Keycloak('app/keycloak/keycloak.json');

  constructor() {
    this.keycloak.init({onload: 'check-sso'});
    console.log(this.keycloak);
  }

  public login() {
    this.keycloak.login();
  }

  public logout() {
    this.keycloak.logout();
  }

  public isAuthenticated() {
    return this.keycloak.authenticated;
  }
}

流程：用户登录，用户尝试访问受保护的路由，AuthGuard会检查用户是否通过isAuthenticated（）登录。

注意：我不想为完整的Angular应用验证用户。仅限某些路线。

问题

用户登录后，用户将被重定向到Angular应用程序。在此之后，isAuthenticated（）方法仍返回false。原因如下：

我将Keycloak对象记录到控制台。我找到了一些我不理解的东西。

登录重定向后的Keycloak对象

登录重定向（但扩展）后的相同Keycloak对象

首先，authenticated属性为false。扩展认证属性后是真的。

问题

我尝试以正确的方式维护我的Keycloak对象的方式是什么？

咨询来源

和其他人

Answer 1

基于社区提供keycloak's github中的Angular2示例，您可以发现与keycloak js适配器交互时的一些差异。主要是对经过身份验证的（以及可能的userName）的实际检查是在从init返回的promise中完成的。

  static init(): Promise<any> {
    let keycloakAuth: any = new Keycloak('keycloak.json');
    KeycloakService.auth.loggedIn = false;

      return new Promise((resolve, reject) => {
        keycloakAuth.init({ onLoad: 'login-required' })
          .success(() => {
            KeycloakService.auth.loggedIn = true;
            KeycloakService.auth.authz = keycloakAuth;
            KeycloakService.auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/demo/protocol/openid-connect/logout?redirect_uri=/angular2-product/index.html";
            resolve();
          })
          .error(() => {
            reject();
          });
      });
}

官方keycloak js adapter's documentation也使用了经过身份验证的支票承诺

<head>
    <script src="keycloak.js"></script>
    <script>
        var keycloak = Keycloak();
        keycloak.init().success(function(authenticated) {
            alert(authenticated ? 'authenticated' : 'not authenticated');
        }).error(function() {
            alert('failed to initialize');
        });
    </script>
</head>

Answer 2

如果使用 check-sso 作为init函数的参数，则如果用户未登录，浏览器将被路由回应用程序，并且将保持未经身份验证的状态。您应该使用需要登录来解决此问题。
如果您不想为完整的App验证用户身份，则应分离创建适配器的逻辑，以在拥有多个受保护组件的情况下简化工作。例如，您可以创建一个HOC。

PS：在下面的示例中，我正在使用Reactjs，希望您可以找到一种类似的方法来实现此目的：

export default (WrappedComponent) => {
  return (props) => {
  const [isAutenticated, setIsAutenticated] = useState(false);
  const [keycloak, setKeycloak] = useState();

  const loadConfig = useCallback(() => {
    const keycloak = Keycloak("/keycloak.json"); //The configuration of the adapter in JSON format
    keycloak.init({ onLoad: "login-required" }).then((authenticated) => {
      setKeycloak(keycloak);
      setIsAutenticated(authenticated);
      });
  }, [Keycloak]);

  useEffect(() => {
    loadConfig();
  }, [loadConfig]);

  if (keycloak) {
    if (isAutenticated) {
      return <WrappedComponent {...props} keycloak={keycloak} />;
    } else return <AuthError message="Unable to authenticate" />;
  }
  return <Loader />;
  };
};

您可以找到有用的资源here

Keycloak Angular 2 - 检查已验证状态Keycloak对象

2 个答案: