自定义前端样式

更新时间:

创建阿里云验证码配置后,您可以通过直接修改前端接入代码的方式自定义验证码组件的显示样式。同时,阿里云验证码为您提供可视化的验证码组件样式自定义功能,帮助您结合预览效果快速设计验证码组件的显示样式,生成相应的前端接入代码。

说明

  • 对于自定义样式配置项中的图片资源,需要您自行准备可用的、可由Web访问的资源。

  • 对于无痕验证方式中的刮刮卡二次验证配置项中的正常状态前景图片项,必须使用base64格式的图片数据流,不支持其它图片资源。

  • 对于自定义样式功能无法满足的特殊前端样式配置,您可以参考该验证方式对应的前端接入代码集成文档中的自定义样式内容直接修改前端接入代码中参数、样式相关的代码部分。

操作步骤

  1. 登录阿里云验证码控制台

  2. 验证码页面,选择配置管理页签。

  3. 选择已创建的服务配置,单击自定义样式

  4. 样式自定义页面,系统将根据您所选的服务配置的验证方式,展示对应的样式配置文案配置效果预览

    • 样式配置:调整配置参数,自定义验证码组件的显示样式。

    • 文案配置:调整配置参数,自定义组件各状态的提示文案。

    • 效果预览:选择验证状态,根据您设置的样式配置和文案配置,展示验证码组件的显示效果。

  5. 单击生成代码,系统将自动根据您设定的样式配置和文案配置参数生成相应的前端接入代码,您可直接将这些前端接入代码集成到您的业务前端代码中,即可在业务前端页面中以您想要的样式显示验证码组件。

    重要

    系统不会自动保存样式自定义页面生成的前端接入代码。在生成代码后,请您妥善保存该自定义样式的前端接入代码。