Description
Description
I would like to use the LinkedIn social login to get access to a user’s profile picture.
But the profile information endpoint used by KeyCloak does not return useable information about the profile picture.
Discussion
No response
Motivation
I would like to use the LinkedIn social login to get access to a user’s profile picture to enhance the user experience of my app by displaying the profile picture in the frontend alongside the username.
Details
Currently, KeyCloak makes a request to "https://api.linkedin.com/v2/me" to retrieve user information from LinkedIn (see https://github.com/keycloak/keycloak/blob/8470a30446cf1a8280353fb96f8e2152d5d186ac/services/src/main/java/org/keycloak/social/linkedin/LinkedInIdentityProvider.java).
But this endpoint does not return a profile picture URL. Therefore, one cannot create a mapper to get access to the profile picture URL.
I would, therefore, like to recommend changing that endpoint to "https://api.linkedin.com/v2/me?projection=(id,firstName,lastName,profilePicture(displayImage~:playableStreams))". (As seen in the LinkedIn Docs https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/sign-in-with-linkedin in the section “Retrieving Member Profile Picture”)
An authorized request to this endpoint returns all the information of the current endpoint and detailed information about the profile picture. Because of the complex response format of the "profilePicture" field it might also make sense to implement some sort of custom mapping logic to extract a useable URL.
Sample API Response (Anonymized):
{
"firstName": {
"localized": {
"en_US": "{{FIRST_NAME}}"
},
"preferredLocale": {
"country": "US",
"language": "en"
}
},
"lastName": {
"localized": {
"en_US": "{{LAST_NAME}}"
},
"preferredLocale": {
"country": "US",
"language": "en"
}
},
"profilePicture": {
"displayImage": "urn:li:digitalmediaAsset:{{URN_ID}}",
"displayImage~": {
"paging": {
"count": 10,
"start": 0,
"links": []
},
"elements": [
{
"artifact": "urn:li:digitalmediaMediaArtifact:(urn:li:digitalmediaAsset:{{URN_ID}},urn:li:digitalmediaMediaArtifactClass:profile-displayphoto-shrink_100_100)",
"authorizationMethod": "PUBLIC",
"data": {
"com.linkedin.digitalmedia.mediaartifact.StillImage": {
"mediaType": "image/jpeg",
"rawCodecSpec": {
"name": "jpeg",
"type": "image"
},
"displaySize": {
"width": 100.0,
"uom": "PX",
"height": 100.0
},
"storageSize": {
"width": 100,
"height": 100
},
"storageAspectRatio": {
"widthAspect": 1.0,
"heightAspect": 1.0,
"formatted": "1.00:1.00"
},
"displayAspectRatio": {
"widthAspect": 1.0,
"heightAspect": 1.0,
"formatted": "1.00:1.00"
}
}
},
"identifiers": [
{
"identifier": "{{PROFILE_PIC_URL_100x100}}",
"index": 0,
"mediaType": "image/jpeg",
"file": "urn:li:digitalmediaFile:(urn:li:digitalmediaAsset:{{URN_ID}},urn:li:digitalmediaArtifactClass:profile-displayphoto-shrink_100_100,0)",
"identifierType": "EXTERNAL_URL",
"identifierExpiresInSeconds": 1664409600
}
]
},
{
"artifact": "urn:li:digitalmediaMediaArtifact:(urn:li:digitalmediaAsset:{{URN_ID}},urn:li:digitalmediaMediaArtifactClass:profile-displayphoto-shrink_200_200)",
"authorizationMethod": "PUBLIC",
"data": {
"com.linkedin.digitalmedia.mediaartifact.StillImage": {
"mediaType": "image/jpeg",
"rawCodecSpec": {
"name": "jpeg",
"type": "image"
},
"displaySize": {
"width": 200.0,
"uom": "PX",
"height": 200.0
},
"storageSize": {
"width": 200,
"height": 200
},
"storageAspectRatio": {
"widthAspect": 1.0,
"heightAspect": 1.0,
"formatted": "1.00:1.00"
},
"displayAspectRatio": {
"widthAspect": 1.0,
"heightAspect": 1.0,
"formatted": "1.00:1.00"
}
}
},
"identifiers": [
{
"identifier": "{{PROFILE_PIC_URL_200x200}}",
"index": 0,
"mediaType": "image/jpeg",
"file": "urn:li:digitalmediaFile:(urn:li:digitalmediaAsset:{{URN_ID}},urn:li:digitalmediaArtifactClass:profile-displayphoto-shrink_200_200,0)",
"identifierType": "EXTERNAL_URL",
"identifierExpiresInSeconds": 1664409600
}
]
},
{
"artifact": "urn:li:digitalmediaMediaArtifact:(urn:li:digitalmediaAsset:{{URN_ID}},urn:li:digitalmediaMediaArtifactClass:profile-displayphoto-shrink_400_400)",
"authorizationMethod": "PUBLIC",
"data": {
"com.linkedin.digitalmedia.mediaartifact.StillImage": {
"mediaType": "image/jpeg",
"rawCodecSpec": {
"name": "jpeg",
"type": "image"
},
"displaySize": {
"width": 400.0,
"uom": "PX",
"height": 400.0
},
"storageSize": {
"width": 400,
"height": 400
},
"storageAspectRatio": {
"widthAspect": 1.0,
"heightAspect": 1.0,
"formatted": "1.00:1.00"
},
"displayAspectRatio": {
"widthAspect": 1.0,
"heightAspect": 1.0,
"formatted": "1.00:1.00"
}
}
},
"identifiers": [
{
"identifier": "{{PROFILE_PIC_URL_400x400}}",
"index": 0,
"mediaType": "image/jpeg",
"file": "urn:li:digitalmediaFile:(urn:li:digitalmediaAsset:{{URN_ID}},urn:li:digitalmediaArtifactClass:profile-displayphoto-shrink_400_400,0)",
"identifierType": "EXTERNAL_URL",
"identifierExpiresInSeconds": 1664409600
}
]
},
{
"artifact": "urn:li:digitalmediaMediaArtifact:(urn:li:digitalmediaAsset:{{URN_ID}},urn:li:digitalmediaMediaArtifactClass:profile-displayphoto-shrink_800_800)",
"authorizationMethod": "PUBLIC",
"data": {
"com.linkedin.digitalmedia.mediaartifact.StillImage": {
"mediaType": "image/jpeg",
"rawCodecSpec": {
"name": "jpeg",
"type": "image"
},
"displaySize": {
"width": 800.0,
"uom": "PX",
"height": 800.0
},
"storageSize": {
"width": 800,
"height": 800
},
"storageAspectRatio": {
"widthAspect": 1.0,
"heightAspect": 1.0,
"formatted": "1.00:1.00"
},
"displayAspectRatio": {
"widthAspect": 1.0,
"heightAspect": 1.0,
"formatted": "1.00:1.00"
}
}
},
"identifiers": [
{
"identifier": "{{PROFILE_PIC_URL_800x800}}",
"index": 0,
"mediaType": "image/jpeg",
"file": "urn:li:digitalmediaFile:(urn:li:digitalmediaAsset:{{URN_ID}},urn:li:digitalmediaArtifactClass:profile-displayphoto-shrink_800_800,0)",
"identifierType": "EXTERNAL_URL",
"identifierExpiresInSeconds": 1664409600
}
]
}
]
}
},
"id": "{{{LINKEDIN_ID}}}"
}