How to get current user name with Keycloak?

Question

I am trying to modify this example Angular2 application to display the currently logged in user. First I tried getting it directly from KeycloakService.tokenParsed.preferred_username but it doesn't seem to exist out of the box with the example code. My guess is that I have to add a function to the KeycloakService to go fetch the user name separately but I am not sure that it is the simplest approach and how to go about this?

Solution: Based on @uchihaitachi's suggestion, here's the working method that I've added to my KeycloakService:

getPreferredUserName(): Promise<string> {
    return new Promise<string>((resolve, reject) => {
        if (KeycloakService.auth.authz.token) {
            KeycloakService.auth.authz.loadUserInfo().success((data) => {
                resolve(<string>data.preferred_username);
            }).error(() => {
                reject('Failed to get preferred user name');
            });
        }
    });
}

Answer 1

I am afraid I have not worked on the Typescript before , but I use the loadUserInfo() method . Suppose you want to load get the value in a scope varaable name userName :

then this should work fine I suppose:

This code works

KeycloakService.auth.authz.loadUserInfo().success(function(data){
  $scope.userName =  data.name ;
}) 

Answer 2

The accepted answer no longer works in Keycloak (we are using 3.x)

KeycloakService.auth.authz.loadUserProfile().success(function(data){
     $scope.username =  data.name ;
})