代码之家 › 专栏 › 技术社区 › xDs

KeyCoap Angular 2-检查KeyCoap对象的身份验证状态

keycloak-services keycloak angular authentication

5

xDs · 技术社区 · 9 年前

我正在Angular 2项目中实现密钥斗篷身份验证服务。我使用服务登录、注销等。

验证用户并注销似乎可行。我现在正试图保护一些路线。我现在有了一个工作的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。原因如下:

我把钥匙斗篷对象记录到控制台。我发现了一些我不理解的东西。

登录重定向后相同的KeyCoap对象(但已扩展)

首先,已验证属性为false。展开后,验证属性为true。

问题

我试图维护KeyCoap对象的方式是否正确?

咨询消息来源

2 回复 | 直到 9 年前

1

5

hakamairi 9 年前

基于社区提供的Angular2示例 keycloak's github 您可以发现与KeyCoap js适配器交互时的一些差异。主要是对已验证(可能还有用户名)的实际检查是在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 对已验证的检查使用promise

<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>

2

1

Badr-Eddine 6 年前

如果你使用 检查sso 作为init函数的参数,如果用户未登录,浏览器将被路由回应用程序,并且将保持未经身份验证。你应该使用 需要登录 而是解决这个问题。
如果您不想为完整的应用程序验证用户,您应该分离创建适配器的逻辑,以便在您有多个安全组件的情况下更容易。例如,您可以创建 HOC .

PS:在下面的示例中,我正在使用Reactjs,我希望您能找到类似的方法在angular中实现这一点:

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