how to get Facebook profile picture using Azure AD B2C - facebook

Question

I am using MSAL.js and could successfully sign-in/sign-up users in Azure AD B2C using Facebook as identity provider. The problem is that after sign-in I cannot retrieve user's profile picture.
Azure AD B2C returns an object identifier which has no tie to user's Facebook id.

Answer 1

Using custom policies, you can retrieve the picture field for the Facebook user and then issue a picture claim in the ID token, as follows.
1: Complete the Azure Active Directory B2C: Get started with custom policies steps with one of the social account policies such as the SocialAndLocalAccounts one.
2: Declare a "picture" claim in the extensions file:
<ClaimType Id="picture">
<DisplayName>Picture</DisplayName>
<DataType>string</DataType>
</ClaimType>
3: Add both the "picture" field to the "ClaimsEndpoint" metadata item and the "picture" output claim to the "Facebook-OAUTH" technical profile in the extensions policy:
<ClaimsProvider>
<DisplayName>Facebook</DisplayName>
<TechnicalProfiles>
<TechnicalProfile Id="Facebook-OAUTH">
<Metadata>
<Item Key="client_id">facebook_clientid</Item>
<Item Key="scope">email public_profile</Item>
<Item Key="ClaimsEndpoint">https://graph.facebook.com/me?fields=id,first_name,last_name,name,email,picture</Item>
</Metadata>
<OutputClaims>
<OutputClaim ClaimTypeReferenceId="picture" PartnerClaimType="picture" />
</OutputClaims>
</TechnicalProfile>
</TechnicalProfiles>
</ClaimsProvider>
4: Issue the "picture" claim in the sign-up or sign-in relying party policy:
<RelyingParty>
<DefaultUserJourney ReferenceId="SignUpOrSignIn" />
<TechnicalProfile Id="PolicyProfile">
<DisplayName>PolicyProfile</DisplayName>
<Protocol Name="OpenIdConnect" />
<OutputClaims>
<OutputClaim ClaimTypeReferenceId="displayName" />
<OutputClaim ClaimTypeReferenceId="givenName" />
<OutputClaim ClaimTypeReferenceId="surname" />
<OutputClaim ClaimTypeReferenceId="email" />
<OutputClaim ClaimTypeReferenceId="picture" />
<OutputClaim ClaimTypeReferenceId="objectId" PartnerClaimType="sub"/>
<OutputClaim ClaimTypeReferenceId="identityProvider" />
</OutputClaims>
<SubjectNamingInfo ClaimType="sub" />
</TechnicalProfile>
</RelyingParty>