Azure AD B2C：注册表单编程调用服务自动填充数据可行性咨询

Absolutely, this is totally doable with Azure AD B2C! I’ve implemented this exact scenario for a few clients, so let me walk you through the two main approaches you can use to pull data from a REST API and auto-fill those registration fields:

1. Server-Side Auto-Population (Integrated with B2C Flow) #

This method uses Azure AD B2C’s custom policies to call your REST API directly within the registration flow—so when the user lands on the form, the fields are already pre-filled with data from your service. Here’s the step-by-step:

• Step 1: Define a REST API Technical Profile
  In your custom policy XML, add a technical profile that points to your API. You’ll set up the endpoint, authentication (like an API key), and map input/output claims. Example snippet:

  <TechnicalProfile Id="REST-GetUserPreFillData">
    <DisplayName>Fetch Pre-Fill Data from Our API</DisplayName>
    <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.RestfulProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
    <Metadata>
      <Item Key="ServiceUrl">https://yourapi.com/api/user/pre-fill</Item>
      <Item Key="AuthenticationType">ApiKey</Item>
      <Item Key="SendClaimsIn">Body</Item>
    </Metadata>
    <CryptographicKeys>
      <Key Id="ApiKey" StorageReferenceId="B2C_1A_RestApiKey" />
    </CryptographicKeys>
    <InputClaims>
      <!-- Pass user context (like a pre-provided email) to the API -->
      <InputClaim ClaimTypeReferenceId="email" PartnerClaimType="userEmail" />
    </InputClaims>
    <OutputClaims>
      <!-- Map API response fields to B2C's user attributes -->
      <OutputClaim ClaimTypeReferenceId="givenName" PartnerClaimType="firstName" />
      <OutputClaim ClaimTypeReferenceId="surname" PartnerClaimType="lastName" />
      <OutputClaim ClaimTypeReferenceId="city" PartnerClaimType="userCity" />
    </OutputClaims>
    <UseTechnicalProfileForSessionManagement ReferenceId="SM-Noop" />
  </TechnicalProfile>
  

• Step 2: Add the API Call to Your Registration Journey
  Update the user journey in your policy to call this API before showing the registration form. That way, the data is fetched and ready when the form loads:

  <UserJourney Id="SignUp">
    <OrchestrationSteps>
      <!-- ... Existing setup steps (like initial page load) ... -->
      <OrchestrationStep Order="2" Type="ClaimsExchange">
        <ClaimsExchanges>
          <ClaimsExchange Id="RetrievePreFillData" TechnicalProfileReferenceId="REST-GetUserPreFillData" />
        </ClaimsExchanges>
      </OrchestrationStep>
      <!-- Now display the registration form with pre-filled fields -->
      <OrchestrationStep Order="3" Type="ClaimsExchange">
        <ClaimsExchanges>
          <ClaimsExchange Id="LocalAccountSignUp" TechnicalProfileReferenceId="LocalAccountSignUpWithLogonEmail" />
        </ClaimsExchanges>
      </OrchestrationStep>
      <!-- ... Remaining flow steps (like validation, account creation) ... -->
    </OrchestrationSteps>
  </UserJourney>
  

• Step 3: Ensure Fields Accept Pre-Filled Data
  Double-check your claim definitions to make sure the fields aren’t set to read-only (unless you want users to not edit them). Example:

  <ClaimType Id="givenName">
    <DisplayName>First Name</DisplayName>
    <DataType>string</DataType>
    <UserInputType>TextBox</UserInputType>
  </ClaimType>
  

2. Client-Side Auto-Population (Frontend JavaScript) #

If you want to fetch data before the user even starts interacting with the B2C page (like using a URL parameter to pull user data), you can inject custom JavaScript into the B2C UI:

• Step 1: Enable JavaScript in Your Policy
  First, turn on script support in your custom policy’s content definition:

  <ContentDefinition Id="api.signup">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:selfasserted:1.1.0</DataUri>
    <Metadata>
      <Item Key="DisplayName">Signup Page</Item>
      <Item Key="AllowInsecureScriptExecution">true</Item>
    </Metadata>
  </ContentDefinition>
  

• Step 2: Inject Your Custom Script
  Host a JS file that calls your API, then populates the form fields once the page loads. Example:

  document.addEventListener('DOMContentLoaded', async function() {
    // Grab user context (e.g., email from a URL query parameter)
    const urlParams = new URLSearchParams(window.location.search);
    const userEmail = urlParams.get('email');
  
    // Fetch pre-fill data from your API
    const response = await fetch(`https://yourapi.com/api/user/pre-fill?email=${userEmail}`, {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer YOUR_API_AUTH_TOKEN'
      }
    });
    const preFillData = await response.json();
  
    // Populate the form fields
    document.querySelector('#givenName').value = preFillData.firstName;
    document.querySelector('#surname').value = preFillData.lastName;
    document.querySelector('#city').value = preFillData.userCity;
  });
  

  Link this script in your B2C UI customization settings or directly in the content definition.

Quick Pro Tips #

• Error Handling: For server-side API calls, add error handling in the technical profile to show a friendly message if the API fails (don’t break the user flow!).
• User Control: Always let users edit pre-filled fields unless you have a strict compliance reason—users hate locked fields they can’t adjust.
• Security: Use HTTPS for all API calls, and secure your API with proper auth (API keys, OAuth2) to prevent unauthorized access.

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