Feature overview

The following figure shows the sliding captcha on a client.

Sliding captcha workflow

The sliding captcha service works as follows.

1. After integrating the sliding captcha code into your application's client (web page) and server, the slider component activates on the specified client page.

   Note

   • When you integrate the sliding captcha code, the appkey and scene parameter values must match the values from the corresponding captcha configuration on the console. Ensure these values are consistent between the frontend and the server.

   • When testing different frontend styles, you can use the test parameters (appkey and scene) provided in the frontend integration documentation. After testing, you must restore the original appkey and scene values. Do not use test parameters in your production environment.

2. The user drags the slider to the end on the client (web page). This action automatically triggers the slider component's code, which sends a verification request to Alibaba Cloud servers to validate the operation.

3. Alibaba Cloud servers use risk control technology to assess the verification request and return the result to the application's client.

   • Verification successful: The client receives the callback result in the callback parameter of the NC_Opt object.

   • Verification failed: The client displays a failure message and prompts the user to try the sliding captcha again.

4. The client sends the parameters required for signature verification (param), along with the application's business request (such as login or registration), to your application server. You must implement this part according to your business logic.

   Note

   The parameters required for signature verification include nc_token, data.csessionid, and data.sig. We also recommend sending the appkey and scene values from this slider's configuration to your application server. This enables the server to support multiple captcha configurations for different scenarios.

5. Your application server calls the afs signature verification API, sending a request to Alibaba Cloud servers to validate the signature.

   • For Java, .NET, PHP, and Python, you can use the pre-packaged signature verification methods available in the SDK.

   • For other languages, you can call the signature verification API directly over HTTP.

6. Upon receiving the signature verification request, Alibaba Cloud servers verify it in real time.

   Note

   • To prevent attackers from collecting sig values for batch attacks, the signature verification API parameters are valid for 10 minutes.

   • To prevent replay attacks, the signature verification API parameters can be used only once. This means a signature verification request succeeds only on the first attempt.

7. Your application server receives the signature verification result and processes it according to your business logic.

   • A return code of 100 indicates that the signature verification was successful.

   • A return code of 900 indicates that the signature verification failed.

8. The application client receives the final verification result and proceeds according to your business logic.

Quick start

Use the following steps to integrate the sliding captcha service into your application.

Note

The sliding captcha service supports only web applications on PCs and mobile devices (H5). If you want to deploy a captcha in a native app, you can use the Captcha 2.0 service. For more information, see What is Captcha 2.0?.

1. Log on to the Alibaba Cloud Captcha console and go to the Captcha > configuration management tab.

   The page displays a list of existing configurations with columns such as Configuration Name, scene, Verification Method, service type, and scenario. Click add configuration in the upper-right corner. The Actions column provides links for customize style and System Code Integration.

2. Click add configuration.

   Note

   If you have already created a sliding captcha configuration for the required scenario, you can reuse the existing configuration and its integration code.

   Set Configuration Name, peak QPS, scenario, and service type. For Verification Method, select sliding captcha.

   Note

   Peak QPS refers to the number of queries per second during your business's peak traffic periods.

   

3. Click Next.

   Note

   Once a configuration is created, it is written to the live environment and cannot be modified or deleted. Please configure these settings carefully.

4. On the System Code Integration & Test page, securely save the automatically generated frontend and server integration code.

5. Integrate the provided code into your application's frontend and server.

After completing the configuration and integration, you can use Alibaba Cloud's latest bot detection technology to secure your business applications.

More features

After integrating the sliding captcha service into your application, you can also use the following features:

• Customize style: On the configuration management tab of the Alibaba Cloud Captcha console, click customize style to set the look and feel of your sliding captcha component. For details, see Customize the frontend style.

• Data monitoring: On the data monitoring tab of the Alibaba Cloud Captcha console, you can view your data overview. For details, see View data monitoring.