Keycloak JavaScript API获取当前登录用户

Question

我们计划使用keycloak来保护一堆Web应用程序，其中一些是用Java编写的，有些是用JavaScript（带有React）的。

通过keycloak登录用户之后，每个Web应用程序都需要检索已登录的用户以及该用户具有的领域/客户端角色。

• 对于Java应用程序，我们尝试了keycloak Java API (request -> KeycloakSecurityContext -> getIdToken -> getPreferredUsername/getOtherClaims)。他们似乎工作正常

• 对于JavaScript应用程序，我们尝试了以下代码，但无法成功使Keycloak初始化（请注意，在用户已经通过keycloak进行身份验证之后，此代码位于Web应用程序代码中，该应用程序仅尝试检索以哪些角色登录的用户）：

  var kc = Keycloak({
      url: 'https://135.112.123.194:8666/auth',
      realm: 'oneRealm',
      clientId: 'main'
  }); 
  
  //this does not work as it can't find the keycloak.json file under WEB-INF
  //var kc = Keycloak('./keycloak.json'); 
  
  kc.init().success(function () {
      console.log("kc.idToken.preferred_username: " + kc.idToken.preferred_username);
      alert(JSON.stringify(kc.tokenParsed)); 
      var authenticatedUser = kc.idTokenParsed.name; 
      console.log(authenticatedUser);  
  }).error(function () {
      window.location.reload();
  });
  

我认为Web应用程序需要检索当前的用户信息是相当普遍的。谁知道上面的代码为什么不起作用？

谢谢。

Answer 1

    <script src="http://localhost:8080/auth/js/keycloak.js" type="text/javascript"></script>
<script type="text/javascript">
const keycloak = Keycloak({
    "realm": "yourRealm",
    "auth-server-url": "http://localhost:8080/auth",
    "ssl-required": "external",
    "resource": "yourRealm/keep it default",
    "public-client": true,
    "confidential-port": 0,
    "url": 'http://localhost:8080/auth',
    "clientId": 'yourClientId',
    "enable-cors": true
});
const loadData = () => {
    console.log(keycloak.subject);
    if (keycloak.idToken) {
        document.location.href = "?user="+keycloak.idTokenParsed.preferred_username;
        console.log('IDToken');
        console.log(keycloak.idTokenParsed.preferred_username);
        console.log(keycloak.idTokenParsed.email);
        console.log(keycloak.idTokenParsed.name);
        console.log(keycloak.idTokenParsed.given_name);
        console.log(keycloak.idTokenParsed.family_name);
    } else {
        keycloak.loadUserProfile(function() {
            console.log('Account Service');
            console.log(keycloak.profile.username);
            console.log(keycloak.profile.email);
            console.log(keycloak.profile.firstName + ' ' + keycloak.profile.lastName);
            console.log(keycloak.profile.firstName);
            console.log(keycloak.profile.lastName);
        }, function() {
            console.log('Failed to retrieve user details. Please enable claims or account role');
        });
    }
};
const loadFailure =  () => {
     console.log('Failed to load data.  Check console log');
};
const reloadData = () => {
    keycloak.updateToken(10)
            .success(loadData)
            .error(() => {
                console.log('Failed to load data.  User is logged out.');
            });
}
keycloak.init({ onLoad: 'login-required' }).success(reloadData);
</script>

简单的 javascript 客户端身份验证没有框架。对于仍在寻找...

Answer 2

您的代码要求 Keycloak 客户端库进行初始化，但它不会执行用户登录或检查用户是否已登录。

详情请参阅手册：http : //www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter

你可能想要做什么：

• 将 check-sso 添加到 init 以检查用户是否已登录并检索凭据keycloak.init({ onLoad: 'check-sso' ... })。您甚至可以使用 login-required。

• 确保为前端注册一个单独的客户端。Java 后端客户端属于机密类型（或仅承载），而 JavaScript 客户端属于公共类型。

你在这里找到一个非常小的例子：https : //github.com/ahus1/keycloak-dropwizard-integration/blob/master/keycloak-dropwizard-bearer/src/main/resources/assets/ajax/app.js

或者，您可以注册一个回调，onAuthSuccess以便在检索到用户信息后收到通知。

一旦您在前端使用 Keycloak，您很快就会想在后端调用 REST 资源时查看不记名令牌。