如何在Auth0 New Universal Login注册页面添加‘Full Name’字段

我完全理解你想要在新通用登录的初始注册表单里直接加入全名字段，和邮箱、密码放在同一屏，避免多步骤跳转的需求——这个功能是可以实现的，而且不需要退回到经典登录体验，下面给你详细的操作步骤：

方法一：通过Auth0 Dashboard直接配置（推荐，无需代码） #

这是最官方、最简单的实现方式，Auth0已经支持在新通用登录的注册表单中直接添加自定义字段：

1. 登录你的Auth0后台，进入Branding > Universal Login页面
2. 切换到「Login」标签页，往下滚动找到「Signup」板块
3. 点击「Add Field」按钮，在弹出的选项里选择「Custom Field」
4. 在配置弹窗中：
   • 填写「Field Name」为full_name（这是存储在用户元数据里的键名）
   • 设置「Display Name」为「Full Name」（用户在表单上看到的字段标签）
   • 勾选「Required」确保用户必须填写这个字段
   • 还可以根据需要添加帮助文本等额外设置
5. 点击「Save」保存配置

完成后，用户打开注册页面时，就能看到「Full Name」字段和邮箱、密码在同一个表单里，提交后全名会自动存入用户的元数据中。

方法二：自定义页面模板（适合更复杂的UI定制） #

如果你需要对表单样式做更多个性化调整，可以修改新通用登录的页面模板（注意：Auth0官方不建议频繁修改模板，因为可能会影响后续平台更新的兼容性）：

1. 进入Auth0后台的Branding > Universal Login > Advanced Options
2. 勾选「Customize Login Page」选项，确保模板类型选择的是「New Universal Login」
3. 在模板代码里，找到包含邮箱和密码输入框的注册表单区域，插入「Full Name」字段的代码：

   <!-- 可以放在邮箱字段前后，根据需求调整位置 -->
   <div class="form-group">
     <label for="full_name">Full Name</label>
     <input 
       type="text" 
       id="full_name" 
       name="full_name" 
       class="form-control" 
       required
     >
   </div>
   

4. 为了确保字段数据能被正确存储，你可以添加一个Pre User Registration Action做数据校验（可选，但更稳妥）：
   • 进入Actions > Library > Create Action，选择「Pre User Registration」触发器
   • 替换默认代码为：

     exports.onExecutePreUserRegistration = async (event, api) => {
       const fullName = event.request.body.full_name;
       if (!fullName || fullName.trim() === '') {
         api.access.deny('missing_full_name', 'Please enter your full name.');
       }
       // 将全名存入用户元数据
       api.user.setUserMetadata('full_name', fullName.trim());
     };
     

   • 保存Action后，进入Actions > Flows > Pre User Registration，把这个Action添加到流程中并发布

注意事项 #

• 方法一的自定义字段会自动适配Auth0的默认样式，不需要额外调整CSS
• 如果你用方法二，后续Auth0更新新通用登录模板时，可能需要重新同步你的自定义代码
• 无论用哪种方法，收集到的全名都会存在用户的user_metadata里，可以通过Auth0后台或者Management API查看

内容来源于stack exchange