Azure B2C——注册时捕获特定内部域名邮箱（无需用户输入域名）的默认UI轻量化定制可行性咨询

Great question—this is totally feasible without building a full custom UI from scratch! Azure B2C lets you make lightweight tweaks to the default registration page using custom CSS and a bit of injected JavaScript, which is perfect for your use case. Here’s a step-by-step breakdown of how to pull this off:

1. Style the Email Input to Show the Fixed Domain #

First, you’ll want to visually modify the email field so users only type the local part (before the @), with your internal domain displayed right next to it. Use custom CSS to shrink the input box and add a static suffix element:

/* Style the fixed domain suffix */
.email-domain-suffix {
  display: inline-block;
  margin-left: -1px;
  padding: 0.5rem 0.75rem;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-left: none;
  border-radius: 0 0.375rem 0.375rem 0;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Adjust the email input to leave space for the suffix */
#email {
  border-radius: 0.375rem 0 0 0.375rem;
}

You can add this CSS through the Azure B2C portal: Head to your user flow → Page layouts → Select the registration page → Enable "Custom CSS" and paste this code (or link to a hosted CSS file if you prefer).

2. Inject JavaScript to Auto-Append the Domain #

Next, you need to make sure the full email (local part + your domain) is sent to Azure B2C when the user submits the form. Add this small script to handle that:

document.addEventListener('DOMContentLoaded', function() {
  const emailInput = document.getElementById('email');
  const fixedDomain = '@your-internal-domain.com'; // Replace with your actual domain

  // Add the visual suffix if it doesn't exist
  if (!document.querySelector('.email-domain-suffix')) {
    const suffixSpan = document.createElement('span');
    suffixSpan.className = 'email-domain-suffix';
    suffixSpan.textContent = fixedDomain;
    emailInput.parentElement.appendChild(suffixSpan);
  }

  // Append the domain when the form is submitted
  const registrationForm = emailInput.closest('form');
  registrationForm.addEventListener('submit', function(e) {
    // Only append if the user didn't already add a domain
    if (emailInput.value && !emailInput.value.includes('@')) {
      emailInput.value += fixedDomain;
    }
  });
});

To inject this script: Go back to the same Page Layout settings for the registration page → Enable "JavaScript" and paste this code. Just make sure "Enable JavaScript" is turned on for your user flow (under User flow properties).

3. Add Clear User Instructions #

Don’t forget to tell users they only need to enter the part before the @! You can add a helper text by modifying the localization settings:

• Go to your user flow → Localization → Select the registration page
• Find the "Email address" attribute, or add a custom string for a helper message (like "Enter your username (no need to add @your-internal-domain.com)")

4. Optional: Add Input Validation #

To prevent users from entering their own domain, add a regex validation rule to the email attribute:

• Go to User attributes → Select the email attribute → Under "Validation", set a regex like ^[a-zA-Z0-9._%+-]+$
• This ensures users can only enter valid local-part characters, no @ or domain included

Key Things to Keep in Mind #

• This works with most modern Azure B2C user flows (avoid legacy policies if possible)
• Test across browsers to make sure the visual tweak and script work consistently
• The full email will still be stored in Azure B2C’s user profile, exactly like if the user typed it out
• If you ever need more advanced changes later, you can easily switch to a full custom UI page, but this lightweight approach should meet your current needs perfectly

内容的提问来源于stack exchange，提问作者Andrew Wiebe