Client UI and custom configuration

Parameter

Slider verification

One-click verification

Puzzle verification

Image restoration

Verification type and interaction

The pop-up is titled Complete the human verification. Drag the slider to the far right.

Select the checkbox labeled Confirm you are not a robot.

Drag the slider to fit the puzzle piece into the correct gap in the image.

Drag the slider to place the object in the correct position based on the image's context.

Interaction UI - pop-up

A pop-up is triggered, which renders the CAPTCHA and waits for user interaction. If the verification fails, the CAPTCHA refreshes for another attempt. After a successful verification, the pop-up closes.

Interaction UI - embedded V2 architecture

In embedded mode, the slider verification component is embedded in the login form, below the account and password input fields. The slider area displays the prompt "Please press and hold the slider and drag it to the far right". After completing the verification, the user clicks the Login button to submit. The webpage loads and renders the slider verification, and returns a result after user interaction.

The login page contains the embedded verification area, which displays the Confirm you are not a robot checkbox and the Alibaba Cloud logo. The account and password input fields are above this area, and the Login button is below it.

The webpage loads, renders the one-click verification, and returns a result after user interaction.

Puzzle verification requires the user to follow the prompt Please drag the slider to complete the puzzle, dragging the puzzle piece to the gap in the background image.

The webpage loads, renders the puzzle verification, and returns a result after user interaction.

The component is embedded in the login form. After entering their username and password, the user must drag the slider to restore the image and then click the Login button. The webpage loads and renders the image restoration verification and returns a result after user interaction.

Interaction UI - embedded V3 architecture

The component is embedded in the login form as a bar between the password field and the Login button, displaying the text Click to start verification and the Alibaba Cloud logo. When the user clicks the button, a puzzle verification pop-up appears. The component returns a result after user interaction.

The webpage loads and renders the CAPTCHA button. When the user clicks the button, an image restoration verification pop-up appears. The component returns a result after user interaction.

V3 architecture frontend interaction flow

Adjust CAPTCHA width or height

To set the width and height of the slider CAPTCHA, pass the slideStyle:{ width:360, height:40 } parameter to the initAliyunCaptcha function. The dimensions are in pixels (px). For security reasons, the minimum width is 320 px. If you provide a value smaller than 320, the width defaults to 320 px.

If the slider width exceeds the screen width on some mobile devices, you can use the overall scaling feature to resolve this issue.

Not supported. Overriding CSS to change the style causes verification errors.

Set overall CAPTCHA scaling

Pass the rem:0.5 parameter to initAliyunCaptcha to scale the entire CAPTCHA UI. You must specify a positive number. For example, a value of 0.5 halves the size, and a value of 2 doubles the size. This parameter is primarily intended for mobile browsers. For more information, see V3 architecture access for web and H5 clients.

Modify page elements such as CAPTCHA color and font size

You can modify these elements by overriding CSS.

Example 1: When verification fails, the system may display an error code such as error: or9o8oyhlL and a red prompt Verification failed. Refresh and try again.. To hide the error code, find the element with the ID aliyunCaptcha-sliding-errorCode and override its CSS with display: none !important;. You can also modify the style of the error prompt by overriding the CSS of its corresponding element.

Example 2: To change the color of the slider, modify the element with the ID aliyunCaptcha-sliding-slider by overriding its CSS color properties.

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

Set a custom company logo

Not applicable

Use the captchaLogoImg parameter during client initialization to change the company logo displayed to the right of the trigger button. For more information, see captchaLogoImg parameter for V3 architecture and captchaLogoImg parameter for V2 architecture.

Not applicable

Not applicable

Set a custom image background

Not applicable

Contact your account manager 7 to 10 business days in advance to configure this.

• Image dimensions: 300 × 200 pixels.

• Image size: Up to 50 KB.

• Number of images: We recommend using more than 130 images, with a minimum of 15. The more images you use, the stronger the security.

The images are part of the challenge library and cannot be customized.

Set a custom language

Pass the language parameter to initAliyunCaptcha to set the text language of the CAPTCHA component.

Set custom text

Pass the upLang: myLang parameter to initAliyunCaptcha and define myLang to customize the text of the CAPTCHA component.

Callback function when the CAPTCHA is closed

Use the onClose function. This callback function is triggered when the CAPTCHA pop-up is closed.

Callback function for frontend loading failures

Use the onError function. This callback triggers on failures or timeouts during the CAPTCHA initialization API call or when loading CAPTCHA resources.