Captcha:Integration guide

Integration method by platform

Verification types

Web and H5 integration

Set Integration Method to Web/H5 when you create the verification scenario.

1. Client side: Add CAPTCHA initialization code to each page that requires verification, as described in Web and H5 client V3 architecture integration.

2. Server side: Install the Alibaba Cloud SDK. Call the VerifyIntelligentCaptcha API with the CaptchaVerifyParam from the client. For details, see Server-side integration.

App integration (Android and iOS)

Set Integration Method to Webview+H5 (Supports apps and mini-programs) when you create the verification scenario.

1. Client side (Web/H5): Add CAPTCHA initialization code to web pages loaded in your app. Web and H5 client V3 architecture integration.

2. Server side: Install the Alibaba Cloud SDK and call the VerifyIntelligentCaptcha API. See Server-side integration.

3. App side:

   • Android: Use a WebView to load pages with the CAPTCHA. Android V3 architecture integration.

   • iOS: Use a WKWebView to load pages with the CAPTCHA. iOS V3 architecture integration.

WeChat Mini Program integration

Set Integration Method to Webview+H5 (Supports apps and mini-programs) or WeChat Mini Program Native Plugin when you create the verification scenario.

Add CAPTCHA initialization code to each Mini Program page that requires verification. See Mini Program integration.

Test client-side initialization

1. Open the page where CAPTCHA is integrated.

2. Open the browser developer tools and go to the Network tab.

3. Confirm that the following items are present:

   • An initialization request.

   • The Preview of the initialization request contains CAPTCHA information with success set to true.

   • CAPTCHA resources are loaded.

Test client-side verification

1. Trigger a verification request by interacting with the CAPTCHA.

2. In the browser developer tools, go to the Network tab.

3. Confirm that VerifyResult is true.

Test server-side verification

After client-side verification succeeds, the client sends CaptchaVerifyParam to your business server. Your server calls the VerifyIntelligentCaptcha API.

Check the API response. A successful verification returns VerifyResult as true:

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

Test end-to-end behavior

Confirm that the CAPTCHA works as expected in your application:

• Slider, Jigsaw, Click-to-pass, and Image Restore: The Verification Passed message appears after the user completes the challenge.

• No-CAPTCHA: A successful business action confirms verification. For example, in a login scenario, the Logon Successful message appears after the user logs in.

Slider, Jigsaw, Click-to-pass, and Image Restore

1. The client initializes CAPTCHA and requests JavaScript (JS) resources (images, questions) from the CAPTCHA server.

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

3. The user solves the challenge (slider, puzzle, or image restoration). The JS sends a verification request to the CAPTCHA server, which checks the answer and whether the request is from a bot.

4. On success, the CAPTCHA triggers the success callback and returns CaptchaVerifyParam. On failure, it refreshes for another attempt.

5. The client sends the business parameters and CaptchaVerifyParam to the business server.

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

7. The CAPTCHA server verifies the parameters, checks for malicious activity, and returns the result.

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

No-CAPTCHA verification

1. The client initializes CAPTCHA and requests JS resources from the CAPTCHA server.

2. The CAPTCHA server returns the JS resources.

3. The user clicks the trigger button. The Alibaba Cloud server evaluates whether the user is safe.

4. The server returns the evaluation result:

   • Safe user: The initial verification passes. The success callback returns CaptchaVerifyParam for server-side validation.

   • Risky user: A secondary challenge is triggered:

     1. The client loads JS resources and renders the CAPTCHA. After the user solves the challenge, the JS sends a verification request. The CAPTCHA server checks the answer.

     2. On success, the success callback returns CaptchaVerifyParam. On failure, the CAPTCHA refreshes automatically.

5. The client sends the business parameters and CaptchaVerifyParam to the business server.

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

7. The CAPTCHA server verifies the parameters, checks for malicious activity, and returns the result.

8. The business server processes the business logic and returns the result to the client.