如何在自定义Angular UI的Keycloak中添加用户名密码认证后的SMS OTP验证

问题背景 #

我当前的应用采用Keycloak做身份认证与授权，前端用Angular构建自定义登录表单收集用户名和密码，表单将凭证提交至Keycloak的/protocol/openid-connect/token端点，验证成功后获取有效访问令牌。现在需要增强安全性，在用户名密码认证后添加SMS OTP验证步骤。

预期认证流程 #

• 用户在Angular应用中输入用户名和密码
• 将凭证发送至Keycloak的token端点进行验证
• 若用户名密码认证成功：
  • 生成OTP并发送至用户注册的手机号
  • 后端通过SMS服务商（如Twilio、AWS SNS等）处理OTP的生成与发送
  • 提示用户在第二个Angular自定义表单中输入OTP
  • 通过Keycloak的API验证输入的OTP有效性
  • 若OTP验证通过，用户完成认证并进入应用

约束条件 #

• 禁止使用Keycloak内置UI或默认认证流程
• 所有表单（用户名/密码输入、OTP输入）均需在Angular应用内实现
• Keycloak中用户手机号存储为自定义用户属性（例如mobileNumber）
• 优先通过Keycloak处理OTP验证逻辑，且初始认证步骤需基于Keycloak的令牌机制完成
• 已尝试过基于Keycloak扩展的SMS双因素认证实现，但需要适配自定义UI

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