web-dev-qa-db-fra.com

API JavaScript Keycloak pour obtenir l'utilisateur actuellement connecté

Nous prévoyons d'utiliser keycloak pour sécuriser un tas d'applications Web, certaines écrites en Java, d'autres en JavaScript (avec React).

Une fois que l'utilisateur est connecté par keycloak, chacune de ces applications Web doit récupérer l'utilisateur connecté et les rôles de domaine/client dont dispose l'utilisateur.

  • Pour les applications Java, nous avons essayé le keycloak Java API (request -> KeycloakSecurityContext -> getIdToken -> getPreferredUsername/getOtherClaims). Ils semblent bien fonctionner

  • Pour les applications JavaScript, nous avons essayé le code suivant, mais nous n'avons pas réussi à faire démarrer Keycloak (notez que cela se trouve dans le code de l'application Web après que l'utilisateur est déjà authentifié par keycloak, l'application essaie uniquement de récupérer qui s'est connecté avec quels rôles):

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

Je suppose qu'il serait assez courant que les applications Web aient besoin de récupérer les informations utilisateur actuelles. Quelqu'un sait pourquoi le code ci-dessus n'a pas fonctionné?

Merci.

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

authentification client javascript simple pas de frameworks. pour les gens qui cherchent encore ...

6
Keshav Sharma

Votre code demande à la bibliothèque cliente Keycloak de s'initialiser, mais il n'effectue pas de connexion de l'utilisateur ni de vérification si l'utilisateur est déjà connecté.

Veuillez consulter le manuel pour plus de détails: http://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter

Ce que vous voulez probablement faire:

  • Ajoutez check-sso à l'init pour vérifier si l'utilisateur est connecté et pour récupérer les informations d'identification keycloak.init({ onLoad: 'check-sso' ... }). Vous pouvez même utiliser une connexion requise.

  • Assurez-vous que vous enregistrez un client distinct pour le frontal. Alors que le client Java backend client est de type confidentiel (ou porteur uniquement), le client JavaScript est de type public.

Vous trouverez un exemple très minimal ici: https://github.com/ahus1/keycloak-dropwizard-integration/blob/master/keycloak-dropwizard-bearer/src/main/resources/assets/ajax/app. js

Vous pouvez également enregistrer un rappel pour que onAuthSuccess soit notifié une fois que les informations utilisateur ont été récupérées.

Une fois que vous utilisez Keycloak dans le front-end, vous voudrez bientôt regarder dans les jetons de porteur lors de l'appel des ressources REST dans le backend.

4
ahus1

Vous avez peut-être résolu le problème à ce stade. J'espère que cette réponse aidera le reste des personnes en difficulté.

lorsque vous utilisez JavaScript Adopter Le javascript ci-dessous doit être ajouté dans la page 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#_javascript_adapter Lien de référence.

Remarque: Lisez les commentaires pour 2 méthodes d'ajout d'informations d'identification json.

0
Deepa MG