客户端UI说明和自定义配置

配置项

滑块验证

一点即过

拼图验证

图像复原

验证形态和交互动作

滑块拖动验证：弹窗标题为请完成人机验证。拖动滑块到最右边。

勾选确认您不是机器人复选框完成人机验证。单击方框完成勾选。

拖动滑块，将碎片拼到图片正确的缺口上。

拖动滑块，根据图片含义将物件拼到正确的位置上。

交互UI-弹出式

触发弹框渲染验证码，等待交互进行验证，如果验证失败刷新验证码，重新等待交互进行验证，如果验证成功，完成校验，弹框消失。

交互UI-V2架构嵌入式

在嵌入式模式下，滑块验证组件直接嵌入登录表单中（位于账号和密码输入框下方），滑块区域显示提示"请按住滑块，拖动到最右边"，用户完成滑块拖动验证后单击登录按钮提交。网页加载渲染滑块验证，交互并反馈验证结果。

嵌入式网页为登录页面，验证区域显示确认您不是机器人复选框和 Alibaba Cloud 标识，上方为账号、密码输入框，下方为登录按钮。

网页加载渲染一点即过验证，交互并反馈验证结果。

拼图验证要求用户按照请拖动滑块完成拼图提示，将拼图块拖至背景图片缺口处完成验证。

网页加载渲染拼图验证，交互并反馈验证结果。

滑块验证嵌入登录表单中，用户输入用户名和密码后，需拖动滑块还原完整图片完成验证，然后单击登录按钮。网页加载渲染图像复原验证，交互并反馈验证结果。

交互UI-V3架构嵌入式

嵌入式验证组件集成在登录表单中，表现为密码输入框与登录按钮之间的滑动验证条，显示点击开始验证文字及 Alibaba Cloud 标识。网页加载渲染验证码按钮，单击后弹出拼图验证，交互并反馈验证结果。

网页加载渲染验证码按钮，点击后弹出图像复原验证，交互并反馈验证结果。

V3架构前端交互时序图

调整验证码宽度或高度

通过initAliyunCaptcha传参slideStyle:{ width:360, height:40 } 来设置滑块验证码宽度和高度，单位为px。和安全能力有关，width最小为320px，传入小于320数值将按320处理。

若移动端部分机型上出现滑块宽度超过屏幕，可通过整体缩放功能解决。

不支持修改。若复写CSS 强行修改样式，会导致验证异常。

设置验证码整体缩放

通过initAliyunCaptcha传参数rem:0.5对验证码UI进行整体缩放，请传入正数，如0.5是缩小一倍，2是放大一倍。此参数主要针对移动端浏览器使用，请参见Web和H5客户端V3架构接入。

修改验证码颜色、字体大小等页面元素

可通过覆写CSS进行修改。

示例一：需要隐藏滑块验证失败的errorcode，找到ID为aliyunCaptcha-sliding-errorCode的元素，覆写CSS设置display: none !important;，把这个ID的元素隐藏即可。示例一：验证码验证失败时，输入框中显示错误码（如 error: or9o8oyhlL），同时页面出现红色提示验证失败，请刷新重试，可通过覆写对应错误提示元素的 CSS 修改其样式。

示例二：需要修改滑块的颜色，修改ID为aliyunCaptcha-sliding-slider的滑块元素，覆写css设置颜色对应属性即可。

#aliyunCaptcha-sliding-slider {
  background: #4285f4 !important;
  color: #fff !important;
}

设置自定义企业Logo图片

不涉及

客户端初始化新增captchaLogoImg参数，支持更换触发按钮右侧的企业Logo。具体详情请参见V3架构captchaLogoImg参数说明、V2架构captchaLogoImg参数说明。

不涉及

不涉及

设置自定义图片背景

不涉及

请提前 7-10 个工作日联系商务经理沟通配置。

• 图片尺寸：300*200。

• 图片大小：50KB以内。

• 图片数量：建议130张以上（至少15张），数量越多安全能力越强。

图片即为题库，不支持自定义。

设置自定义语言

通过initAliyunCaptcha传参language参数来设置验证码组件中的文本语言。

设置自定义文案

通过initAliyunCaptcha传参数upLang: myLang，并定义myLang来自定义验证码组件的文案。

关闭验证码时的回调函数

可使用函数onClose，验证码弹窗关闭时触发的回调函数。

前端加载失败的回调函数

可使用函数onError，验证码初始化接口请求和验证码资源加载失败、超时的错误回调函数。