Slider Captcha integration methods-Captcha(Captcha)-阿里云帮助中心

Alibaba Cloud Captcha provides a client-side slider captcha feature. After you add a configuration for a scenario in the Alibaba Cloud Captcha console, you can integrate the generated frontend code into the web page where you want to use the slider captcha. This topic describes how to integrate the frontend code for the slider captcha.

Frontend integration code sample

You can initialize the slider captcha on the web page where you want to use the feature. The following code is a sample of the frontend integration code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>
<body>
<div id="nc"></div>
<script>
    // Instantiate nc.
    AWSC.use("nc", function (state, module) {
        // Initialize.
        window.nc = module.init({
            // The application type identity. Together with the scenario identity (the scene field), it determines the business scenario for the slider captcha and the corresponding policy model on the backend. You can find the value of the appkey field on the Configuration Management tab in the Alibaba Cloud Captcha console. Make sure to enter it correctly.
            appkey: "CF_APP_1",
            // The scenario identity. Together with the application type identity (the appkey field), it determines the business scenario for the slider captcha and the corresponding policy model on the backend. You can find the value of the scene field on the Configuration Management tab in the Alibaba Cloud Captcha console. Make sure to enter it correctly.
            scene: "register",
            // The ID of the target element where the slider captcha will be rendered.
            renderTo: "nc",
            // This callback is triggered when the frontend slider captcha is passed. In this callback, record the session ID (sessionId), signature string (sig), and unique request token (token). Send them with the business request to your server for signature verification.
            success: function (data) {
                window.console && console.log(data.sessionId)
                window.console && console.log(data.sig)
                window.console && console.log(data.token)
            },
            // This callback is triggered when the slider captcha fails.
            fail: function (failCode) {
                 window.console && console.log(failCode)
            },
            // This callback is triggered when an error occurs while loading the captcha.
            error: function (errorCode) {
                 window.console && console.log(errorCode)
            }
        });
    })
</script>
</body>
</html>

Initialization

Import resources
To use the slider captcha feature on a web page, add the following code to your frontend page to import the required JavaScript (JS) resource.<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>.

Initialization code description

// Instantiate nc. 
    AWSC.use("nc", function (state, module) {
        var ncOption = {} // Slider captcha initialization parameters.
        // Initialize. Call module.init to initialize the slider captcha.
        window.nc = module.init(ncOption);
    })

Note

After module.init is initialized, an instantiated nc object is returned. In the sample code, this nc object is stored in the window.nc variable.

Initialization parameter description
The following initialization parameters are available when you instantiate the captcha component in the frontend code. You can adjust these parameters in the code as needed.

Parameter	Description	Required
appkey	The application type identity. You can find the value of the appkey field on the Configuration Management tab in the Alibaba Cloud Captcha console. Make sure to enter it correctly.	Yes
scene	The scenario identity. You can find the value of the scene field on the Configuration Management tab in the Alibaba Cloud Captcha console. Make sure to enter it correctly.	Yes
renderTo	The ID of the target element where the slider captcha will be rendered.	Yes
foreign	Set to true for requests from outside mainland China.	No
language	The language. The default value is cn (Chinese). For information about how to configure multiple languages, see Customize text and configure multiple languages.	No
width	The width of the slider in pixels (px). The default value is 300. Reserve a width of at least 300 px for the slider.	No
fontSize	The font size for the slider component. The default value is 12.	No
hideErrorCode	Hides the error code during verification. The default value is false.	No
upLang	Custom text for the captcha.	No
test	A test field used to test different captcha states.	No
success	This callback function is triggered when the verification passes. In this callback, record the session ID (sessionid) and signature string (sig). Send them with the business request to your server for signature verification.	No
fail	This callback is triggered when the verification fails.	No
error	This callback is triggered when a verification error occurs.	No

Test

After you integrate the frontend code into your web page, perform the following tests before you publish the page:

Test the behavior of each slider captcha state by setting the test initialization parameter
You can set the test field to different values provided by the slider captcha service to test the behavior of each captcha state. Configure the test field in the frontend initialization code to directly control the return result (pass or block) of the slider captcha service API.
Value of the test field
Simulated effect
module.TEST_PASS
The slider captcha passes.
module.TEST_BLOCK
The slider captcha fails and is blocked.
The prefix module is the object returned by AWSC.use. In the sample code, it is named module.
This way, you can directly observe the interaction, style, and flow of each captcha state.
Note
In the latest integration code, the token is generated automatically. You do not need to specify the token. If you do not delete the test configuration item before you publish the page or perform a full functional test, an abnormal token may be generated. This can cause exceptions during the integration process, such as a signature verification failure.
Test code sample:
```
AWSC.use("nc", function (state, module) {
  window.nc = module.init({
    ...
    ...
    // Test configuration. Set test to module.TEST_PASS to test the pass state, or set it to module.TEST_BLOCK to test the fail state.
    test: module.TEST_PASS, // Test the pass state.
    // test: module.TEST_BLOCK, // Test the fail state.
    ...
    ...
  });
})
```
Functional and compatibility tests.
Before you publish the page, perform full functional and compatibility tests. During testing, note the following:
- During testing, make sure to use the appkey and scene values assigned to you in the Alibaba Cloud Captcha console.
- The captcha component supports Internet Explorer 9 and later. It does not support Internet Explorer 8 or earlier.
- During a full functional test, if the token obtained from a successful call contains CF_APP_1, check whether the test configuration item is deleted. Otherwise, the full functional test may fail.

Further operations on the generated nc object

After module.init is initialized, an instantiated nc object is returned. In the sample code, this object is stored in the window.nc variable. You can use the following methods to perform additional operations on the returned nc object as needed.

Note

The call format is window.nc[MethodName].

Method	Parameter	Function
reset	None	Call this method at any time to reset the slider captcha to its initial state (waiting for slide).
hide	None	Call this method at any time to hide the slider captcha component.
show	None	After you call the hide method, call this method at any time to show the slider captcha component again.

Value of the test field	Simulated effect
module.TEST_PASS	The slider captcha passes.
module.TEST_BLOCK	The slider captcha fails and is blocked.