Keycloak JavaScript API для входа текущего пользователя

Question

Мы планируем использовать keycloak для защиты множества веб-приложений, некоторые из которых написаны на Java, некоторые на JavaScript (с React).

После того, как пользователь вошел в систему с помощью keycloak, каждое из этих веб-приложений должно извлечь пользователя, который вошел в систему, и роли области / клиента, которые у него есть.

• Для приложений Java мы попробовали API Java Keycloak (request -> KeycloakSecurityContext -> getIdToken -> getPreferredUsername/getOtherClaims), Кажется, они работают нормально

• Для приложений JavaScript мы попробовали следующий код, но не смогли заставить Keycloak успешно инициализироваться (обратите внимание, что это происходит в коде веб-приложения после того, как пользователь уже аутентифицирован с помощью Keycloak, приложение только пытается узнать, кто вошел в систему с какими ролями):

  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();
  });
  

Я предполагаю, что было бы довольно распространенным, что веб-приложения должны получать информацию о текущем пользователе. Кто-нибудь знает, почему вышеприведенный код не работает?

Благодарю.

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>

simple javascript client authentication no frameworks. for people who are still looking...

Answer 2

Ваш код запрашивает клиентскую библиотеку Keycloak для инициализации, но он не выполняет вход в систему пользователя или проверку, если пользователь уже вошел в систему.

Пожалуйста, смотрите руководство для деталей: http://www.keycloak.org/docs/latest/securing_apps/index.html

Что вы, вероятно, хотите сделать:

• Добавьте check-sso в init, чтобы проверить, вошел ли пользователь в систему и получить учетные данные. keycloak.init({ onLoad: 'check-sso' ... }), Вы даже можете использовать логин.

• Убедитесь, что вы зарегистрировали отдельный клиент для внешнего интерфейса. В то время как бэкэнд-клиент Java имеет конфиденциальный тип (или только для канала-носителя), клиент JavaScript имеет тип public.

Вы найдете очень минимальный пример здесь: https://github.com/ahus1/keycloak-dropwizard-integration/blob/master/keycloak-dropwizard-bearer/src/main/resources/assets/ajax/app.js

В качестве альтернативы вы можете зарегистрировать обратный звонок для onAuthSuccess получать уведомления после получения информации о пользователе.

Как только вы используете Keycloak во внешнем интерфейсе, вы скоро захотите искать токены на предъявителя при вызове REST-ресурсов во внутреннем интерфейсе.

Answer 3

Вы, возможно, решили проблему к этому времени. Я надеюсь, что этот ответ поможет остальным людям, попавшим в беду.

Когда вы используете JavaScript Adopter Ниже JavaScript должен быть добавлен в html-странице.

    <script src="http://localhost:8080/auth/js/keycloak.js"></script>
            <script>
            /* If the keycloak.json file is in a different location you can specify it: 

Try adding file to application first, if you fail try the another method mentioned below. Both works perfectly.

            var keycloak = Keycloak('http://localhost:8080/myapp/keycloak.json'); */    

/* Else you can declare constructor manually  */
                var keycloak = Keycloak({
                    url: 'http://localhost:8080/auth',
                    realm: 'Internal_Projects',
                    clientId: 'payments'
                });


                keycloak.init({ onLoad: 'login-required' }).then(function(authenticated) {
                    alert(authenticated ? 'authenticated' : 'not authenticated');
                }).catch(function() {
                    alert('failed to initialize');
                });    

                function logout() {
                    //
                    keycloak.logout('http://auth-server/auth/realms/Internal_Projects/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri')
                    //alert("Logged Out");
                }
             </script>

https://www.keycloak.org/docs/latest/securing_apps/index.html Справочная ссылка.

Примечание. Прочитайте комментарии о двух способах добавления учетных данных json.