Customize frontend styles-Captcha(Captcha)-阿里云帮助中心

After you create an Alibaba Cloud Captcha configuration, you can customize the Captcha widget's display style by directly modifying the frontend integration code. Alibaba Cloud Captcha also provides a visual customization feature. This feature lets you quickly design the widget's display style, preview the results, and generate the corresponding frontend integration code.

Note

You must provide your own web-accessible image resources for custom style configuration items.
For the foreground image in the normal state of a scratch-card secondary authentication, you must use a base64-encoded image data stream. Other image resource formats are not supported.
If the visual customization feature does not meet your style requirements, you can directly modify the parameters and styles in the frontend integration code. For more information, see the custom styles section in the frontend integration document for the corresponding verification method.

Procedure

Log on to the Alibaba Cloud Captcha console.
On the Captcha page, click the Configuration Management tab.
Select an existing service configuration and click Customize Style.
On the Style Customization page, the system displays the Style Configuration, Text Configuration, and Effect Preview sections based on the verification method of the selected service configuration.
- Style Configuration: Adjust parameters to customize the Captcha widget's display style.
- Text Configuration: You can adjust parameters to customize the prompt text for each widget state.
- Effect Preview: Select a verification state to preview the appearance of the CAPTCHA widget based on your style and text settings.
Click Generate Code. The system automatically generates the frontend integration code based on your style and text settings. Integrate this code into your application's frontend to display the Captcha widget with your custom style.
Important
The system does not automatically save the frontend integration code generated on the style customization page. You must save the generated code in a secure location.