0

I want to SignIn/SignUp , edit profile through Azure AD B2C using user flows with .Net core application. SignIn/SignUp are working perfectly fine. Now I want to implement Edit Profile functionality which is also quite working fine. I want to add one new field in the edit policy called profile image i.e. to fetch the profile image of the user from b2c which can then be edited / updated using edit policy.

How can this be achieved?

Thanks in advance

I tried to find out on how to map the user profile picture but didn't work out.

Yash
  • 1

1 Answers1

0

I tried to create profile image in edit policy.

  • I created an Edit user flow:

enter image description here

In user attributes tab, added a new attribute ProfileImage,

enter image description here

But it has only data type of String , Boolean and Int

enter image description here

So , we can customize the edit profile policy , by creating a new policy to edit and by creating custom page layout.

enter image description here

Create one custom html page to upload image :refered from javascript - Add a Profile Picture in form in HTML and CSS - Stack Overflow

Example:

Uploadimage.html:
function fasterPreview( uploader ) {
    if ( uploader.files && uploader.files[0] ){
          $('#profileImage').attr('src', 
             window.URL.createObjectURL(uploader.files[0]) );
    }
}



$("#imageUpload").change(function(){
    fasterPreview( this );
});

<style>
#imageUpload
{
    display: none;
}

#profileImage
{
    cursor: pointer;
}

#profile-container {
    width: 150px;
    height: 150px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

#profile-container img {
    width: 150px;
    height: 150px;
}
</style>
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile-container">
   <image id="profileImage" src="http://lorempixel.com/100/100" />
</div>
<input id="imageUpload" type="file" 
       name="profile_photo" placeholder="Photo" required="" capture>   

</html>

Upload it in the storage container with public access or read only blob access.

enter image description here

And enable cors to reach the B2c domain by giving https://<tenantdomain>.b2clogin.com in allowed origins , select allow methods according to requirement.

enter image description here

Copy the blob url and check if its showing the desired page:

enter image description here

Run it in the browser: https://stforb2c.blob.core.windows.net/myimagecontainer/uploadimages.html

enter image description here

  • Then Go to B2C_1_editprofile policy, select profile edit layout name.
  • Turn Use custom page content to ON state.
  • Paste the blob image upload url in the Custom page URI enter image description here

Save it , then you can see it enabled > yes in the cutom layout .

enter image description here

Recheck the url and paste the desired html layout url and save and run the user flow to check the edit profile policy .

https://xxxb2c.b2clogin.com/xxxb2c.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1_edit&client_id=1cf9d6aaxxx4d03-8418-2cxe=defaultNoncex&redirect_uri=https%3A%2F%2Fxxxb2c.b2clogin.com%2Fkavyasarabojub2c.onmicrosoft.com%2Foauth2%2Fauthresp&scope=openid&response_type=id_token&prompt=login

enter image description here

References:

  1. JavaScript and page layout versions - Azure AD B2C | Microsoft Learn
  2. Customize the look and feel of your Azure AD B2C page - DEV Community
kavyaS
  • 8,026
  • 1
  • 7
  • 19
  • Can we also include other inbuild user attributes like given name , etc. along with the image property in edit profile policy? – Yash Mar 03 '23 at 09:28
  • In that case one can try to create two different policy , one is built-in where all user attributes like given name can be edited and the profile pic edit for other – kavyaS Mar 03 '23 at 09:36
  • So I think the conclusion is like we cannot manage all the user attributes along with image in a single edit profile policy ? – Yash Mar 03 '23 at 09:40
  • we can if we can write script for all functionalities that also includes user attributes.see [this](https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-and-page-layout?pivots=b2c-user-flow#javascript-samples). Also check if this [user attribute configuration](https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-user-input?pivots=b2c-user-flow#configure-user-attributes-input-type) can be given along with custom layoutthat can help you.. – kavyaS Mar 03 '23 at 09:55