咨询AWS Cognito等身份提供商登录表单添加额外字段的可行性及方法

Great question! All four identity providers you mentioned support adding custom fields like organizationId to login forms (not just registration). Here's a breakdown of how to implement this for each one:

Absolutely, you can add custom fields to your login flow with Cognito. Here's the step-by-step:

• First, create a custom attribute in your user pool: Head to the "Attributes" tab in your Cognito console, add a custom attribute like custom:organizationId.
• Next, choose how you want to handle the login UI:
  • If using Cognito's hosted UI, set up a Pre Authentication Lambda Trigger. This lets you capture the organizationId from the login request (passed as a parameter) and validate it against your backend or user data before authentication proceeds.
  • For a custom login form (using Amplify or Cognito's direct API calls), include the organizationId input field. When calling InitiateAuth or AdminInitiateAuth, pass it in the AuthParameters map like so:

    {
      "USERNAME": "jane.doe@example.com",
      "PASSWORD": "securePass123",
      "custom:organizationId": "org_456"
    }
    

• Don't forget to ensure your user pool settings allow passing custom attributes during auth, and always validate the organizationId to confirm the user belongs to the specified organization.

Keycloak makes adding custom login fields straightforward, whether you're using its built-in flows or building custom logic:

• Start by creating a user attribute if you don't have one already: Go to your realm > Users > Attributes and add organizationId.
• Next, customize your login flow: Navigate to Authentication > Flows, select your active login flow (like "Browser"), and add a new execution. Choose "User Attribute" or "Custom Form" to include the organizationId field. Configure it to map to the user attribute you created.
• For more control, build a custom authenticator using Keycloak's SPI (Service Provider Interface). This lets you write custom code to capture the organizationId and validate it against your organization database before login is allowed.
• Keycloak will automatically render the field in the login form if you added it to the flow, or you can tweak the theme to style it exactly how you want.

Auth0 offers flexible ways to add custom login fields via its Universal Login and Actions system:

• First, customize your login page: Go to Branding > Universal Login > Login and toggle on "Customize Login Page". In the HTML template, add an input field for organizationId:

  <div class="form-group">
    <label for="organizationId">Organization ID</label>
    <input name="organizationId" type="text" class="form-control" placeholder="Enter your organization ID">
  </div>
  

• Then, set up an Auth0 Action with the "Login" trigger. In the action code, access the organizationId from event.request.body.organizationId and validate it (e.g., check if the user is linked to that organization in your backend).
• You can also pass organizationId as a parameter when calling Auth0's login API, then use Actions or Rules to process and validate the value.

Okta supports custom login fields through its Sign-In Widget and hooks system:

• First, create a custom user profile attribute: Go to Directory > Profile Editor, select your user type, and add organizationId as a new attribute.
• Customize the Okta Sign-In Widget: Embed the widget in your app, then modify its DOM to add the organizationId field. For example:

  const oktaSignIn = new OktaSignIn({
    baseUrl: 'https://your-okta-domain.com',
    clientId: 'your-client-id',
    redirectUri: 'https://your-app.com/callback'
  });
  
  oktaSignIn.renderEl({ el: '#okta-login-container' }, () => {}, (err) => console.error(err));
  
  // Add custom organization ID field
  const orgField = document.createElement('div');
  orgField.innerHTML = `
    <label for="organizationId">Organization ID</label>
    <input type="text" id="organizationId" name="organizationId" placeholder="Your organization ID">
  `;
  document.querySelector('.okta-form-input-group').prepend(orgField);
  

• Use an Okta Pre-Authentication Hook to capture the organizationId from the login request and validate it against your organization data. This ensures only users linked to the correct organization can log in.

All these providers let you add and validate custom login fields—your choice will come down to your stack, customization needs, and budget. For example, Keycloak is ideal for self-hosted, open-source setups, while Auth0 and Okta offer managed services with out-of-the-box UI tools.

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