Azure B2C多网站自定义UI策略配置及UI片段调整咨询

Great questions! Let's break these down one by one:

1. Do I need separate sign-up policies for different sites with unique CSS/element visibility? #

Nope, you don’t have to create duplicate sign-up policies for this! You can reuse a single policy and dynamically adjust the UI based on the requesting site. Here’s how to pull it off:

• Leverage the client_id parameter: Every application registered in Azure B2C has a unique client_id. In your custom UI HTML, you can read this value from the URL (it’s passed automatically when the policy is triggered) and use it to load site-specific CSS or toggle elements.
  For example, add a bit of JavaScript to your custom UI page:

  const urlParams = new URLSearchParams(window.location.search);
  const clientId = urlParams.get('client_id');
  
  // Load site-specific CSS
  if (clientId === 'YOUR_SITE_A_CLIENT_ID') {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = '/css/siteA-styles.css';
    document.head.appendChild(link);
    // Hide/show elements specific to Site A
    document.getElementById('siteB-only-element').style.display = 'none';
  } else if (clientId === 'YOUR_SITE_B_CLIENT_ID') {
    // Load Site B's CSS and adjust elements
  }
  

• Use custom query parameters: If you want more control beyond client_id, you can add a custom parameter (like ui_theme=retail or brand=siteX) to the authentication request URL. Your custom UI can read this parameter and apply the corresponding styles/element changes.
• CSS class targeting: Another approach is to add a dynamic class to the <body> tag based on the site identifier, then write CSS rules that target that class. For example:

  document.body.classList.add(`theme-${clientId}`);
  

  Then in your CSS:

  .theme-YOUR_SITE_A_CLIENT_ID .signup-form {
    background-color: #f0f0f0;
  }
  .theme-YOUR_SITE_B_CLIENT_ID .signup-form {
    background-color: #eef5ff;
  }
  

This keeps your policy management clean and avoids redundant policy configurations.

2. Is CSS the only way to adjust the position of Azure B2C's embedded UI fragments? #

CSS is the most straightforward and recommended method, but it’s not the only option. Here are alternative approaches:

• JavaScript DOM manipulation: Azure B2C’s embedded UI elements (like password fields, verification code inputs, or action buttons) have consistent class names and IDs. You can use JavaScript to select these elements and move them to different parts of the DOM. For example:

  // Move the verification code section above the password field
  const verificationSection = document.querySelector('.verification-code-container');
  const passwordField = document.querySelector('.password-input-container');
  passwordField.parentNode.insertBefore(verificationSection, passwordField);
  

  Just keep in mind that you’ll want to wrap this logic in a function that runs after the B2C UI has fully loaded (using DOMContentLoaded or a mutation observer to detect when elements are added to the page).
• Custom layout templates: If you’re using Azure B2C’s custom page layouts (available in some policy types), you can structure your HTML template to define where embedded UI fragments should render. For example, you can place placeholders like {OIDC:Login} in specific parts of your HTML, and B2C will inject the corresponding UI elements there. This gives you more control over the overall layout without relying solely on CSS positioning.

That said, CSS is still the most maintainable option for most positioning needs—using flexbox, grid, or absolute positioning to rearrange elements is usually simpler than DOM manipulation. Combine CSS with JavaScript only when you need to make more drastic structural changes.

内容的提问来源于stack exchange，提问作者Germán Svriz