如何在Angular版Amplify UI的amplify-authenticator中添加验证码

Amplify Angular UI的amplify-authenticator组件没有提供验证码相关的内置配置项，可通过组件自定义插槽+提交流程拦截的方式实现。在你已经完成AWS侧基础配置、注册登录功能正常的前提下，按以下步骤操作即可：

• 引入目标验证码组件：常用的reCAPTCHA、hCaptcha都有对应Angular封装，直接通过npm安装引入到认证模块即可，比如使用Google reCAPTCHA可以安装ng-recaptcha依赖。
• 利用组件开放插槽插入验证码：amplify-authenticator提供了sign-in-form-fields（登录表单字段区）、sign-up-form-fields（注册表单字段区）两个自定义插槽，支持覆盖默认表单渲染逻辑，可在原有表单位置插入验证码组件。
• 拦截默认提交逻辑：替换默认提交按钮，点击提交时先校验验证码是否完成，校验通过后再调用原生表单提交方法，校验不通过直接阻断流程提示用户。
• （可选）服务端校验增强：如果需要更高安全等级，可以把前端拿到的验证码token通过clientMetadata参数传给Cognito，在预注册、预认证触发器中调用验证码服务商接口做二次校验，避免前端校验被绕过。

参考实现代码 #

组件模板代码：

<!-- 提前在模块中引入你使用的验证码模块，例如NgRecaptchaModule -->
<amplify-authenticator [loginMechanisms]="['email']" [signUpAttributes]="['name', 'phone_number']">
  <!-- 自定义登录表单区域 -->
  <ng-template amplifySlot="sign-in-form-fields" let-formFields="formFields" let-submitForm="submitForm">
    <!-- 渲染默认登录表单字段 -->
    <amplify-form-field *ngFor="let field of formFields" [field]="field"></amplify-form-field>
    <!-- 插入验证码组件 -->
    <re-captcha (resolved)="onCaptchaResolved($event, 'signin')" siteKey="你的验证码站点密钥"></re-captcha>
    <!-- 自定义提交按钮 -->
    <amplify-button type="submit" (click)="handleSignInSubmit(submitForm)">登录</amplify-button>
  </ng-template>

  <!-- 自定义注册表单区域 -->
  <ng-template amplifySlot="sign-up-form-fields" let-formFields="formFields" let-submitForm="submitForm">
    <amplify-form-field *ngFor="let field of formFields" [field]="field"></amplify-form-field>
    <re-captcha (resolved)="onCaptchaResolved($event, 'signup')" siteKey="你的验证码站点密钥"></re-captcha>
    <amplify-button type="submit" (click)="handleSignUpSubmit(submitForm)">注册</amplify-button>
  </ng-template>

  <!-- 原有登录成功逻辑保持不变 -->
  <ng-template amplifySlot="authenticated" let-user="user" let-signOut="signOut">
    <h1>Welcome {{ user.username }}!</h1>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>

对应TS逻辑代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-auth-page',
  templateUrl: './auth-page.component.html'
})
export class AuthPageComponent {
  // 存储不同场景的验证码校验结果
  private captchaToken: Record<'signin'|'signup', string> = {
    signin: '',
    signup: ''
  };

  // 验证码验证完成回调
  onCaptchaResolved(token: string, scene: 'signin' | 'signup') {
    this.captchaToken[scene] = token;
  }

  // 登录提交逻辑
  async handleSignInSubmit(submitForm: (values: any) => Promise<void>) {
    if (!this.captchaToken.signin) {
      alert('请先完成人机验证');
      return;
    }
    // 如需服务端校验验证码，可在此处先请求你的业务后端校验token有效性，通过后再往下执行
    await submitForm({
      clientMetadata: { captchaToken: this.captchaToken.signin }
    });
    // 提交后重置验证码状态
    this.captchaToken.signin = '';
  }

  // 注册提交逻辑
  async handleSignUpSubmit(submitForm: (values: any) => Promise<void>) {
    if (!this.captchaToken.signup) {
      alert('请先完成人机验证');
      return;
    }
    await submitForm({
      clientMetadata: { captchaToken: this.captchaToken.signup }
    });
    this.captchaToken.signup = '';
  }
}

注意：如果使用无图形的隐形验证码，可以把验证码触发逻辑绑定到提交按钮的点击事件上，验证完成后自动触发提交，不需要额外占位。

当前默认组件界面参考：

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