Captcha:Integration guide

Slider, puzzle, click-to-pass, and image restoration

Description of the sequence diagram:

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

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

3. After the user successfully interacts with the Captcha on the business client, such as by solving a slider, puzzle, or image restoration challenge, the JS automatically sends a request to verify the answer. The Captcha server verifies if the answer is correct and if the request is from a machine.

4. If the verification is successful, the Captcha server calls the success callback function and returns CaptchaVerifyParam. If the verification fails, the Captcha automatically refreshes for a new attempt.

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

6. The business server calls the VerifyIntelligentCaptcha API of the Captcha server to verify the CaptchaVerifyParam parameter.

7. The Captcha server verifies if the parameters are correct and if the request is malicious, and then 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's web page.

No-captcha verification

Web and H5 integration

If you use Web and H5 integration, set Integration Method to Web/H5 when you create the verification scenario.

1. Client-side integration: On the client pages (Web and H5) that use the verification feature, integrate the Captcha initialization code. For an example of the initialization code, see Web and H5 client V3 architecture integration.

2. Server-side integration: On the server corresponding to the client pages (Web and H5), integrate the SDK. Then, call the VerifyIntelligentCaptcha API to initiate Captcha verification. For more information, see Server-side integration.

App integration

If you use app integration, set Integration Method to Webview+H5 (for Apps And WeChat Mini Programs) when you create the verification scenario.

1. Client-side integration: On the client pages (Web and H5) that use the verification feature, integrate the Captcha initialization code. For an example of the initialization code, see Web and H5 client V3 architecture integration.

2. Server-side integration: On the server corresponding to the client pages (Web and H5), integrate the SDK. Then, call the VerifyIntelligentCaptcha API to initiate Captcha verification. For more information, see Server-side integration.

3. App-side integration

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

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

WeChat Mini Program integration

If you use WeChat Mini Program integration, set Integration Method to Webview+H5 (for Apps And WeChat Mini Programs) or WeChat Mini Program Native Plugin when you create the verification scenario.

WeChat Mini Program integration: After you add a verification scenario in the console, integrate the Captcha initialization code on the WeChat Mini Program pages that use the verification feature. For more information, see Mini Program integration.

• Test the business client initialization

  After the configuration is complete, open the browser console for the page where Captcha is integrated. Check the information on the Network tab.

  If all the following items are present, the client-side integration is successful:

  • Initialization request (① in the figure)

  • The Preview of the initialization request contains Captcha information (② in the figure), and success is true.

  • Captcha resources (③ in the figure)

• Test the business client verification

  After you send a verification request, open the browser console for the page where Captcha is integrated. Check the information on the Network tab.

  If VerifyResult is true (① in the figure), the verification is successful.

• Test the server-side integration

  After successful client-side integration, the business API sends the captchaVerifyParam verification parameter to the business server. The business server then calls the Alibaba Cloud VerifyIntelligentCaptcha API, which returns a verification result.

  You can view the verification result in the business server's response. If VerifyResult is true, the server-side integration is successful.

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

• Test if the Captcha works as expected

  After successful server-side integration, the business result and the Alibaba Cloud Captcha result are returned to the client. The client performs different business operations based on the returned results. You can use the Captcha on the client to test if the verification works as expected.

  • For Slider Verification, Jigsaw Verification, Click-to-pass Verification, and Image Restore Verification, the verification is successful when the Verification Passed message is displayed.

  • No-CAPTCHA verification: A successful business interaction indicates a successful verification. For example, in a logon scenario, the verification is successful if the Logon Successful message is displayed after you log on with your username and password.