How can i implement azure b2c profile including profile picture fetching and upload profile picture to Azure B2c using Angular 6 and asp.net core?

Question

1. I have created the profile edit policy and how can i add profile picture field in user claim?
2. By using the user claim image box how can i fetch the profile image from azure b2c
3. how can i change the profile image using azure b2c

by using Angular 6 and Asp.net core

Answer 1

No angular will be needed here.
You might choose to store the image URL or if small enough the data URL (image bytes in base64 format).

To display the image you need to:

1. Create a directory extension that will hold the persisted data.
2. Define a claim type that will store the image URL or base 64 data (E.G: imageClaimType)
3. Add it as an OutputClaim in your AAD-UserReadUsingObjectId technical profile and map it to the directory extension.
4. Add it as a PersistedClaim in your AAD-UserWriteProfileUsingObjectId technical profile and map it to the directory extension.
5. Include similar markup and code into your profile edit template:

To edit it you need to:

1. Add a jQuery plugin and/or javascript code to submit the selected image to your API, as defined in next step:
2. Create/Extend your API so that it handles the file upload, optionally stores it (you will store the URL) and/or (just) serves the image (you will store the image data).
3. Add javascript code that assign the new image URL or data to the imageClaimType element value (and thus into the policy claim of the same name).