how to get Facebook profile picture using Azure AD B2C

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>