10

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.

Saca
  • 10,355
  • 1
  • 34
  • 47
armache
  • 596
  • 5
  • 22
  • Are you using custom policies? – Chris Padgett Dec 30 '17 at 08:09
  • No, as far as I understand to use custom policies I need to have ad b2c premium account. – armache Dec 30 '17 at 11:36
  • 1
    Hi @armache. Custom policies are configuration files that define behaviour for any Azure AD B2C tenant; they don't require a special tenant. Below, I've posted how you can retrieve the picture field for the Facebook user and then issue a picture claim in the ID token, using custom policies. – Chris Padgett Dec 30 '17 at 22:01

1 Answers1

18

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>
Chris Padgett
  • 14,186
  • 1
  • 15
  • 28
  • the xml mentioned in step 2. i see the similar stuff in Base file not the extension file. Do i need to put it in Base file ? @armache – Raas Masood Mar 31 '18 at 19:45
  • Hi @RaasMasood. You can add the "picture" claim type in either the base or extensions file. – Chris Padgett Apr 01 '18 at 01:10
  • I am new to this concept so help me. I added it so where should i expect the picture to be? I have a Xamarin test app and AcuireToken call gives me the User object. Where should i expect the picture to be ? – Raas Masood Apr 01 '18 at 01:12
  • picture should be a property in Claims section of User Object ? will it contain a URL to the picture ? please help – Raas Masood Apr 02 '18 at 17:53
  • Hi @RaasMasood The `picture` claim is issued by Azure AD B2C in the ID token to your Xamarin app. Which authentication library are you using with your Xamarin app? – Chris Padgett Apr 02 '18 at 22:16
  • 1
    this didn't work for me and it so sad that none of these implementations has this important feature out of the box. – Jaider May 24 '18 at 06:23
  • Does this method support other IDPs like GitHub or Google? – hsluoyz Dec 14 '20 at 23:57
  • @YangLuo were you able to do this for Google? – Mário Meyrelles Jun 08 '21 at 10:51
  • @MárioMeyrelles Had you manage to do it with Google, I need age_range, and gender from Google and Facebook – deen Mar 24 '22 at 08:53