How to get current user profile picture with Keycloak?

Question

I am trying to get user profile picture and other information those who logged-in using Identity provider like Google or Facebook in my AngularJs application using Keycloak authentication.

Answer 1

I am not sure if or how this is supported by Facebook, but for Google you can simply add a mapper to your IdP configuration like this:

This maps the picture attribute from the Google profile to a Keycloak user attribute named picture. The user attribute then contains a URL to the profile picture.

To make it accessible by Angular, add a client protocol mapper of type User Attribute to your client like this:

You can either add the picture claim to your token or to the userinfo endpoint. Angular can then extract the attribute from the token or query the userinfo endpoint.