自定义 AWS Cognito 托管登录字段标签

使用 JavaScript 自定义 AWS Cognito 托管登录字段标签

此方法侧重于使用 JavaScript 通过定位 AWS Cognito 呈现的 DOM 元素来动态修改托管登录页面上的字段标签。

// Wait for the Cognito UI to load completely
document.addEventListener('DOMContentLoaded', function() {
    // Identify the DOM elements for the field labels
    const givenNameLabel = document.querySelector('label[for="given_name"]');
    const familyNameLabel = document.querySelector('label[for="family_name"]');

    // Update the text content of the labels
    if (givenNameLabel) {
        givenNameLabel.textContent = 'First Name';
    }

    if (familyNameLabel) {
        familyNameLabel.textContent = 'Last Name';
    }

    // Optionally, add input validation or styling here
});

使用 AWS Lambda 自定义 AWS Cognito 中的标签

该解决方案使用 AWS Lambda 和 Cognito 触发器在注册过程中强制执行字段命名约定。

const AWS = require('aws-sdk');

exports.handler = async (event) => {
    // Access user attributes from the event
    const { given_name, family_name } = event.request.userAttributes;

    // Modify the attributes to use "First Name" and "Last Name"
    event.request.userAttributes['custom:first_name'] = given_name || '';
    event.request.userAttributes['custom:last_name'] = family_name || '';

    // Remove original attributes if necessary
    delete event.request.userAttributes['given_name'];
    delete event.request.userAttributes['family_name'];

    // Return the modified event object
    return event;
};

AWS Lambda 自定义字段解决方案的单元测试

用 Jest 编写的单元测试用于验证 AWS Lambda 函数行为。

const handler = require('./index');

test('should replace given_name and family_name with custom fields', async () => {
    const event = {
        request: {
            userAttributes: {
                given_name: 'John',
                family_name: 'Doe'
            }
        }
    };

    const result = await handler(event);
    expect(result.request.userAttributes['custom:first_name']).toBe('John');
    expect(result.request.userAttributes['custom:last_name']).toBe('Doe');
    expect(result.request.userAttributes['given_name']).toBeUndefined();
    expect(result.request.userAttributes['family_name']).toBeUndefined();
});

使用 React 和 Amplify 自定义 Cognito 字段

基于 React 的解决方案，利用 AWS Amplify 动态覆盖注册表单上的默认 Cognito 字段标签。

import React from 'react';
import { withAuthenticator } from '@aws-amplify/ui-react';

function App() {
    return (
        <div>
            <h1>Custom Cognito Form</h1>
            <form>
                <label htmlFor="first_name">First Name</label>
                <input id="first_name" name="first_name" type="text" required />
                <label htmlFor="last_name">Last Name</label>
                <input id="last_name" name="last_name" type="text" required />
            </form>
        </div>
    );
}

export default withAuthenticator(App);

使用前端自定义来自定义 AWS Cognito 字段标签

方法：使用 JavaScript 动态修改托管登录 UI 上的标签

// Wait for the AWS Cognito UI to load
document.addEventListener('DOMContentLoaded', () => {
  // Identify the Given Name field and modify its label
  const givenNameLabel = document.querySelector('label[for="given_name"]');
  if (givenNameLabel) givenNameLabel.textContent = 'First Name';
  // Identify the Family Name field and modify its label
  const familyNameLabel = document.querySelector('label[for="family_name"]');
  if (familyNameLabel) familyNameLabel.textContent = 'Last Name';
});

使用后端 Lambda 触发器自定义 AWS Cognito

方法：使用AWS Lambda预处理自定义属性

exports.handler = async (event) => {
  // Modify attributes before user creation
  if (event.triggerSource === 'PreSignUp_SignUp') {
    event.request.userAttributes['custom:first_name'] = event.request.userAttributes['given_name'];
    event.request.userAttributes['custom:last_name'] = event.request.userAttributes['family_name'];
  }
  return event;
};

1. 详细的 AWS Cognito 文档： AWS Cognito 开发人员指南
2. AWS Lambda 触发器指南： AWS Lambda 触发器参考
3. 在 AWS Cognito 中设置托管 UI 的样式： 自定义 Cognito 托管 UI
4. JavaScript DOM 操作基础知识： MDN Web 文档 - DOM 简介
5. Cognito 在应用程序中的用例示例： AWS Cognito 用例