如何在VueJS+AWS Amplify中实现注册时用户组池选择？

步骤1：自定义注册表单，添加组选择字段 #

利用Amplify UI Vue的Authenticator组件插槽，覆盖默认注册表单，添加单选按钮让用户选择教师/学生组：

<template>
  <authenticator>
    <!-- 自定义注册表单插槽 -->
    <template v-slot:sign-up="{ form, handleSubmit }">
      <h3>注册账号</h3>
      <!-- 渲染默认注册字段（邮箱、密码等） -->
      <amplify-form-section>
        <amplify-auth-fields :form="form"></amplify-auth-fields>
      </amplify-form-section>
      <!-- 添加自定义组选择字段 -->
      <amplify-form-section>
        <div class="field-group">
          <label>选择身份</label>
          <div>
            <input
              type="radio"
              id="teacher"
              name="userGroup"
              value="Teachers"
              v-model="selectedGroup"
              required
            >
            <label for="teacher">教师</label>
          </div>
          <div>
            <input
              type="radio"
              id="student"
              name="userGroup"
              value="Students"
              v-model="selectedGroup"
              required
            >
            <label for="student">学生</label>
          </div>
        </div>
      </amplify-form-section>
      <!-- 注册提交按钮 -->
      <amplify-button
        type="submit"
        @click="handleSubmit(onSubmit)"
        :disabled="!form.formIsValid"
      >
        注册
      </amplify-button>
      <!-- 切换到登录页面的链接 -->
      <div class="sign-in-link">
        已有账号？<amplify-button type="button" @click="form.showSignIn()">登录</amplify-button>
      </div>
    </template>

    <!-- 登录后的内容 -->
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>

<script setup>
import { ref } from 'vue';
import { Authenticator } from '@aws-amplify/ui-vue';
import '@aws-amplify/ui-vue/styles.css';
import { Auth } from 'aws-amplify';

const selectedGroup = ref('');

// 处理注册提交，将选择的组存入用户自定义属性
const onSubmit = async (data) => {
  try {
    await Auth.signUp({
      username: data.username,
      password: data.password,
      attributes: {
        email: data.email,
        'custom:userGroup': selectedGroup.value // 把选择的组存入自定义属性
      }
    });
    return true;
  } catch (error) {
    console.error('注册失败:', error);
    return false;
  }
};
</script>

<style scoped>
.field-group {
  margin: 1rem 0;
}
.sign-in-link {
  margin-top: 1rem;
  text-align: center;
}
</style>

步骤2：创建Post Confirmation Lambda触发器，自动分配用户组 #

前端无法直接将用户添加到Cognito组（需要管理员权限），所以借助Cognito的Post Confirmation触发器，在用户验证邮箱后自动分配组：

1. 创建Node.js Lambda函数：

const AWS = require('aws-sdk');
const cognito = new AWS.CognitoIdentityServiceProvider();

exports.handler = async (event) => {
  const { userName, userPoolId, request } = event;
  const userGroup = request.userAttributes['custom:userGroup'];

  // 仅处理有效组的分配
  if (['Teachers', 'Students'].includes(userGroup)) {
    const params = {
      GroupName: userGroup,
      UserPoolId: userPoolId,
      Username: userName
    };

    try {
      await cognito.adminAddUserToGroup(params).promise();
      console.log(`用户 ${userName} 已添加到 ${userGroup} 组`);
    } catch (error) {
      console.error('添加用户到组失败:', error);
    }
  }

  return event;
};

2. 配置Cognito触发器：

• 进入AWS控制台的目标Cognito用户池
• 切换到「触发器」标签页
• 在「Post confirmation」选项中选择刚创建的Lambda函数
• 保存配置

步骤3：验证功能 #

用户注册时选择身份，完成邮箱验证后，会被自动添加到对应的Cognito组。后续可通过Auth.currentUserInfo()获取用户组信息，实现角色权限控制。

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