Personalizing the User Interface of Azure AD B2C using dynamic HTML

After customizing my own html and CSS for Azure AD B2C sign-up and sign-in policy using the steps outlined in this resource, I have successfully created custom Sign-Up and Sign-In pages. However, my next goal is to make the sign-up page dynamic by passing values in the query string or another method, which will determine the elements to add or remove from the html.

In the future, I aim to store these values in a database and query them before rendering the html. Is this feasible? Any advice on how to achieve this would be greatly appreciated.

htmlcssazureazure-ad-b2c

Answer №1

By default, B2C deactivates JavaScript due to the policies being enforced on login.microsoft.com.

B2C offers support for Vanity domains, but requesting it is necessary. This feature creates an illusion that the policies are being executed on your domain, resulting in a URL like:

myvanitydomain?p=signinpolicy

The process of implementing this feature can be arduous and is not readily available to the public at large.

Making this change allows you to utilize JavaScript since Microsoft prefers not to have it run on their own domains.

Thus far, no automated method has been discovered to enable JavaScript upon page loading as Microsoft removes all script tags.

Answer №2

Adding dynamic behavior to custom Azure AD B2C UIs is currently a challenging task that lacks easy solutions.

Currently, the most effective method for achieving this is by utilizing JavaScript, even though it is not officially supported in Azure AD B2C at this time.

If you wish to show your support and stay informed on advancements in this area, consider voting for the feature on the Azure AD B2C feedback forum: Add support for JavaScript inside the custom UI branding page

One potential workaround could involve creating separate policies for different UI permutations or variations. By assigning a single query string parameter (the policy), you can determine which UI to display.

Answer №3

In the case that you are creating custom policies and wish to modify the HTML template that is utilized by Identity Experience Framework (IEF) based on a query string parameter, you have the ability to specify this query string parameter in your relying party policy as shown below:

<RelyingParty>
  <UserJourneyBehaviors>
    ...
    <ContentDefinitionParameters>
      <Parameter Name="campaign_id">{OAUTH-KV:campaign_id}</Parameter>
    </ContentDefinitionParameters>
  </UserJourneyBehaviors>
  <TechnicalProfile>
    ...
  </TechnicalProfile>
</RelyingParty>

Once the query string parameter is included in the authentication request:

IEF will then load the HTML template with the specified query string parameter:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for my extension to prevent a rickroll from starting before the video even begins?

I'm working on creating a Chrome extension that prevents rick rolls. Here's an overview of my manifest.json file: { "name": "AntiRick", "version": "1.0", "description": "Introduci ...

javascripthtmlgoogle-chrome-extension

How can I implement a progress bar that mimics an exchange platform behind data-table components? [Using Vue and Vuetify]

I am working on a cryptocurrency exchange book simulator and I am trying to implement a progress bar that will be displayed behind the values in a table. https://i.stack.imgur.com/9gVsY.png This is the template for my data-table: < ...

javascripthtmlcssvue.jsvuetify.js

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

import PageNav from '@/components/PageNav.vue'; import PageFooter from '@/components/PageFooter.vue'; export default { name: 'Groups', components: { PageNav, PageFooter, }, data() { return { groups: ...

javascripthtmlvue.js

Challenges with HTML and JavaScript

Struggling to get this code to work properly with Node.js. const express = require('express') const app = express() app.use(express.static('public')) //includes content of public folder app.get('/', function (req, res){ ...

javascripthtmlnode.js

Verify the level of opacity in the image

I'm working on a website that allows users to upload PNG images and save them. However, before they can save the image, I need to check if it contains transparency. Is there a way to determine if an image is not 24-bit using JavaScript? <img id= ...

javascriptjqueryhtmltransparency

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

htmlcssjsp

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Currently, I am tackling a feature that necessitates me to specify the CSS width in pixels for each td element of a table upon clicking a button. My approach involves using getBoundingClientRect to compute the td width and retrieving the value in pixels (e ...

javascripthtmlcsshtml-table

When the hover effect is triggered, the background animation smoothly resets back to its initial position once the

I have a picture with a clear background that I want to add a CSS3 background animation to when the mouse hovers over it. Here is the CSS code I am currently using: @keyframes in { from {background-color: #fff;} to {background-color: #900;} } @-webkit-k ...

htmlcssbackground-colorcss-animations

When updating the innerHTML attribute with a new value, what type of performance enhancements are implemented?

Looking to optimize updating the content of a DOM element called #mywriting, which contains a large HTML subtree with multiple paragraph elements. The goal is to update only small portions of the content regularly, while leaving the majority unchanged. Co ...

javascripthtmlperformance

Count the number of checkboxes in a div

In my current project, I am working on incorporating three div elements with multiple checkboxes in each one. Successfully, I have managed to implement a counter that tracks the number of checkboxes selected within individual divs. However, I now aspire to ...

javascripthtmlangularcounter

Guidelines for implementing drag and drop functionality for my specific scenario

Looking to create a restricted area for dragging elements within my app. Specifically, I want the element to only be draggable within a certain defined space. Here is what I currently have: http://jsfiddle.net/L73T5/10/ html <div id='background ...

javascriptjqueryhtmlcss

Rotate a shape to form a Rhombus at the center

I used the transform CSS property to create a rhombus, but I noticed that the center point of the shape is off-center to the right rather than in the middle. Can anyone help me figure out how to fix this issue? You can view my code here. .rhombus{ width ...

htmlcssrotationtransformcenter

The click event will not be triggered if the element is removed by my blur event

My dropdown list is dynamic, with clickable items that trigger actions when clicked. Upon focus, the list displays suggested items When blurred, the list clears its contents The issue arises when blur/focusout events are triggered, causing my element to ...

javascripthtmldom-events

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

javascriptcssajaxparallel-processing

Moving from CSS to SCSS: Incorporating CSS files from npm packages - A Step-by-Step Guide

I am new to SASS and currently in the process of converting my existing project's CSS files to SCSS. I know that simply changing the extension to .scss will work for my custom files, but I'm not sure how to handle the dependency style files. I ty ...

cssnpmsass

CSS for Centering Text and ImageAchieving the perfect alignment

I have a footer positioned at the bottom of my webpage containing some text along with a few PNG images. I am attempting to center everything within the footer. I tried using margin: 0 auto, but it didn't work due to the footer not being a block elem ...

htmlcsscentering

Issues with Node JS app's handling of php mailer code

I've made a basic website using the Node JS framework and included a php mailer for handling the contact form. Unfortunately, I'm facing issues getting it to function properly. Could it be possible that there is an underlying problem with Node JS ...

javascriptphphtmlnode.jsphpmailer

Simple Way to Modify Color of Active Page Link - HTML, CSS, and JavaScript

I found a helpful example on how to change link colors for the current page here. Here is the script I added: <script> // current page highlight $(document).ready(function() { $("[href]").each(function() { if (this.href == window.l ...

javascriptjqueryhtmlcsshyperlink

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

I've encountered an issue while using bootstrap 3 with jquery UI to implement search and select fields for the user. The CSS code seems to be working fine on larger screens, but it's completely non-functional on smaller screens. I tried applying ...

jqueryhtmlcsstwitter-bootstrap

Encountering issues with integrating an external plugin with AngularJS code

For my app, I am attempting to incorporate intercom for monitoring user activity. It functions correctly when placed inside a script tag in index.html. However, I encounter an error when trying to use it in a .ts file as shown below: app/components/rocket/ ...

javascriptjquerycssangularintercom