Integration guide

Slider, jigsaw, click-to-pass, and image restore

Sequence diagram description:

1. When a user initializes the CAPTCHA on the business client, the client requests JavaScript (JS) resources, such as images or challenges, from the CAPTCHA server.

2. The CAPTCHA server dynamically returns the JS resources. The business client loads the resources and renders the CAPTCHA.

3. After the user successfully interacts with the CAPTCHA on the business client (such as by completing slider, jigsaw, or image restore verification), the JS automatically sends an answer verification request. The CAPTCHA server verifies whether the answer is correct and whether the request is from a bot.

4. If the request is successfully verified, the CAPTCHA server calls the success callback function and returns CaptchaVerifyParam. If the verification fails, the CAPTCHA automatically refreshes so the user can try again.

5. The business client sends a request that contains business parameters and CaptchaVerifyParam to the business server for validation.

6. The business server calls the VerifyIntelligentCaptcha API to validate CaptchaVerifyParam.

7. The CAPTCHA server validates the parameters, checks for malicious requests, and returns the verification result.

8. The business server processes the business logic based on the verification result and returns the verification and business results to the client.

No-CAPTCHA verification

Web and H5 integration

If you are integrating with a web or H5 application, select Web/H5 for the Integration Method when you create the verification scenario.

1. Client-side integration: In the client-side pages (web and H5) that require verification, integrate the CAPTCHA initialization code. For an example of the initialization code, see Web and H5 client-side integration for V3 architecture.

2. Server-side integration: On your business server, integrate the SDK and call the VerifyIntelligentCaptcha API to initiate verification. For more information, see Server-side integration.

App integration

If you are integrating with a mobile app, select Webview+H5 (Supports apps and mini-programs) for the Integration Method when you create the verification scenario.

1. Client-side integration: In the client-side pages (web and H5) that require verification, integrate the CAPTCHA initialization code. For an example of the initialization code, see Web and H5 client-side integration for V3 architecture.

2. Server-side integration: On your business server, integrate the SDK and call the VerifyIntelligentCaptcha API to initiate verification. For more information, see Server-side integration.

3. App-side integration

   • Android: Use a WebView component to enable and deploy the pages that require CAPTCHA 2.0 in your app. For more information, see Android integration for V3 architecture.

   • iOS: Use a WKWebView component to enable and deploy the pages that require CAPTCHA 2.0 in your app. For more information, see iOS integration for V3 architecture.

WeChat Mini Program integration

If you are integrating with a WeChat Mini Program, select Webview+H5 (Supports apps and mini-programs) or WeChat Mini Program Native Plugin for the Integration Method when you create the verification scenario.

WeChat Mini Program integration: After you add a verification scenario in the console, you must integrate the CAPTCHA initialization code into the WeChat Mini Program pages that require verification. For more information, see Mini Program integration.

• Test the client-side initialization

  After you complete the integration, open the developer console in your browser on the page that contains the CAPTCHA, and view the Network tab.

  The client-side integration is successful if you see the following:

  • An initialization request.

  • The Preview tab for the initialization request contains CAPTCHA-related information and the success field is true.

  • CAPTCHA resources.

    {
        "CaptchaType": "TRACELESS",
        "CertifyId": "3c6a84ac-xxx-xxx-xxx-xxx",
        "Code": "Success",
        "Message": "success",
        "StaticPath": "1.0.0/80c3280184eb1b98210a",
        "Success": true
    }

• Test the client-side verification

  After a verification request is sent, open the developer console in your browser on the page that contains the CAPTCHA, and view the Network tab.

  The verification is successful if the VerifyResult field is true.

  {
    "Code": "Success",
    "HttpStatusCode": 200,
    "Message": "success",
    "RequestId": "Exxxx...xxxx3",
    "Result": {
      "VerifyCode": "T001",
      "VerifyResult": true,
      "certifyId": "8JkVwuU1a2",
      "securityToken": "6o..."
    },
    "Success": true
  }

• Test the server-side integration

  After the client-side integration is successful, the CaptchaVerifyParam parameter is sent to your server through your API. Your server calls the VerifyIntelligentCaptcha API and receives a verification result.

  You can view the verification result in the response from the VerifyIntelligentCaptcha API. The server-side integration is successful if the VerifyResult is true.

  {
      "RequestId": "C******-B***-4***-A***-5*******1",
      "Message": "success",
      "HttpStatusCode": 200,
      "Code": "Success",
      "Success": true,
      "Result": {
          "VerifyCode": "T001",
          "VerifyResult": true
      }
  }

• Test the end-to-end functionality

  After the server-side integration is successful, the business result and the Alibaba Cloud CAPTCHA result are returned to the client. The client then handles the business logic based on the returned results. You can use the CAPTCHA on the client to test the verification.

  • For slider, jigsaw, click-to-pass, and image restore verification: After you follow the prompts to complete the verification, the Verification Passed message appears.

  • For no-CAPTCHA verification: A successful business interaction indicates that the verification is successful. For example, in a logon scenario, after you enter your username and password and log on, the Logon Successful message appears.