Creating B2C custom html pages with reference to css, jquery,imgaes,fonts etc as per environment

Question

question

AnuGarg-2389 asked May 9, '22 AnuGarg-2389 commented May 10, '22

Creating B2C custom html pages with reference to css, jquery,imgaes,fonts etc as per environment

Hi Team,

We are customizing B2C Login UI and using Azure BLOB storage to upload static contents.

We have BLOB storage as per different environments like Dev, Test , Production etc.
Using custom policies, we are able to refer to HTML page as per environment e.g. For Dev - https://dev.blob.core.windows.net/root/pages/login.html, For test - https://test.blob.core.windows.net/root/pages/login.html
Azure pipeline will be used to upload all the contents like HTML pages, CSS / JQuery/ fonts/ Images etc. on BLOB
But the problem is , the html page can have reference to only absolute path of css/jquery/fonts/images .
Our requirement is that - each environment HTML page should refer to CSS/jquery etc. files as per the environment
e.g For dev environment , login.html file should have CSS reference as <link href="https://dev.blob.core.windows.net/root/CSS/unified.css" rel="stylesheet" type="text/css" /> And for test environment, CSS reference as <link href="https://test.blob.core.windows.net/root/CSS/unified.css" rel="stylesheet" type="text/css" /> and so on...

One solution I found is to use Powershell script to update the reference path inside HTML page before uploading on BLOB.

Can anyone suggest me some other appropriate solution for this problem?

Thanks in advance,
Anu

azure-ad-b2c

· 2

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JamesHamil-MSFT · May 09 at 04:26 PM

Hi @AnuGarg-2389 , so I understand correctly, the html files in your BLOB storage can only reference the absolute paths of your CSS files? Why can't you have multiple CSS files and reference those paths as long as you don't change where they're stored?

0 ·

AnuGarg-2389 JamesHamil-MSFT · May 10 at 09:14 AM

Hi @JamesHamil-MSFT ,

Thanks for replying.

We have different BLOB storage for each environment (Dev, Test & Production).
B2C policy use corrosponding HTML files; which means that B2C policies in DEV tenant use DEV BLOB and in Test tenant use Test BLOB

As each HTML file should have reference to its own CSS files which means that i need to create separate HTML files for each environment so that it can have absolute reference to CSS files.
But I want to have common html files which should be uploaded in BLOB storage for each environment separately.

Regards

0 ·

Answer 1 · 2022-05-10T12:11:37.037Z

DisplayName-3010 answered May 10, '22 AnuGarg-2389 commented May 10, '22

Hi @AnuGarg-2389 ,

When had the same problem and developed a build which allows you to use a environment files and reference properties from it. During a built it creates the files with the correct information filled. Are you using differnt Azure B2C's per environment as well. You can also contain information about the identityexperience framework clientid and other information in this way.
So far I do not know of any way you can do it with a standart tool for B2C, but you can do it with for example gradle.

· 1

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AnuGarg-2389 · May 10 at 12:51 PM

Hi @DisplayName-3010 ,

Thanks for your the solution.
I have below solution in mind i.e.
1. Create HTML files with place holders for blob storage URL
2. Environment files having BLOB storage URL as per environment
3. Build script (powershell script) to replace those placeholders with actual values and generate HTML files that can be uploaded to BLBO storage.

Are you talking about the same approach?

Regards.

0 ·

question