:Integrate with the V2 architecture for iOS

Background information

The mobile HTML5 version of Captcha V2.0 offers rapid iteration and strong compatibility. This method of integrating the Captcha V2.0 service into your app avoids compatibility issues caused by dependencies and references in native app components. The rapid iteration of mobile HTML5 Captcha V2.0 also helps your app better handle advanced threats.

Integration flow

Integrating the HTML5 version of Captcha V2.0 into an iOS app involves the following steps:

1. HTML5 page client: Integrate Captcha V2.0 into the client of your HTML5 business page.

2. Server for the HTML5 page: Integrate the Captcha V2.0 software development kit (SDK) on the server. Then, call the VerifyIntelligentCaptcha API operation to initiate verification.

3. iOS app: Use the WKWebView component to enable and deploy the business page that requires Captcha V2.0 integration in your app.

Prerequisites

• Captcha 2.0 is activated, and a verification scenario whose Client Type is set to App(Webview+H5) is created. For more information, see the Access guidelines section of the "Integration guide" topic.

• You are using iOS 10.0 or later.

Step 1: Integrate Alibaba Cloud Captcha V2.0 into the client of your HTML5 business page

1. Integrate the client-side integration code provided by Captcha into the frontend code of your HTML5 page. For more information about client-side integration for HTML5 pages, see Web and H5 Client-side Integration.

2. Adjust the client-side code based on the environment where you perform business result verification.

   • If you perform business result verification on the iOS app side, adjust the code as follows:

     1. In the business request callback function, add the corresponding JavaScript function. Call the method configured in Step 3 and Step 4 to retrieve the verification result. This method uses the WkScriptMessageHandler protocol for interaction between JavaScript and WKWebView. After you retrieve the verification result, you can perform different business operations in the iOS app.

        // Business request (with Captcha verification) callback function
        async function captchaVerifyCallback(captchaVerifyParam) {
          // 1. Send a business request to the backend to obtain the Captcha verification result and the business result.
          const result = await xxxx('http://your_business_request_address', {
              captchaVerifyParam: captchaVerifyParam, // The Captcha parameter.
              yourBizParam... // Business parameters.
          });
        
          // 2. Construct the standard return parameter.
          const verifyResult = {
            captchaResult: result.captchaVerifyResult, // Specifies whether the Captcha verification is passed. This parameter is of the boolean type and is required.
            bizResult: Get your business verification result from the result, // Specifies whether the business verification is passed. This parameter is of the boolean type and is optional. If no business verification result is available, you can leave bizResult empty.
          };
          // Call the JavaScript method implemented by the WkScriptMessageHandler protocol to get the verification result.
          window.webkit && window.webkit.messageHandlers.getVerifyResult.postMessage(verifyResult)
          return verifyResult;
        }

     2. Set the business request verification result callback function of the HTML5 page to an empty function. This migrates the business operations from the HTML5 side to the iOS app side.

        // Business request verification result callback function
        function onBizResultCallback(bizResult) {
          // Set to an empty function.
        }

   • If you perform business result verification on the HTML5 page, you do not need to adjust the code.

   • To perform business result verification on both the HTML5 page and the iOS app side, adjust the code as follows. This ensures that the same integration code can be used in both environments and that the business result verification logic for each does not interfere with the other.

     1. In the business request callback function, add the corresponding JavaScript function. For more information, see Add a JavaScript function.

     2. Modify the business request verification result callback function of the HTML5 page to determine whether the verification environment is HTML5. If it is, add the business logic for the HTML5 page.

        // Business request verification result callback function
        function onBizResultCallback(bizResult) {
          // Determine whether the environment is an iOS app. If no custom JavaScript function exists in the verification environment, the environment is an HTML5 page.
          // You can also use your custom conditions to distinguish between the two environments.
          if (!window.webkit || !window.webkit.messageHandlers) {
              // Your business logic for the HTML5 page.
          }
        }

Step 2: Integrate Alibaba Cloud Captcha V2.0 into the server for the HTML5 page

On the server side of your HTML5 business page, after you integrate the server-side SDK provided by Captcha 2.0, call the VerifyIntelligentCaptcha operation to initiate captcha verification. For more information, see Server-side integration.

Step 3: Enable and deploy the business page in the iOS app

1. In the Controller.swift file of your iOS app project, import the required dependencies.

   import SwiftUI
   import WebKit

2. In the Controller.swift file of your iOS app project, load the HTML5 business page.

   override func viewDidLoad() {
     super.viewDidLoad()
     view.addSubview(webView)
     let url = URL(string: "http://x.x.x.x/demo/")
     let request = URLRequest(url: url!);
     webView.load(request); // Load the page.
   }

3. Set the WKWebView object to enable interaction between JavaScript and WKWebView using the WKScriptMessageHandler protocol.

   lazy var webView: WKWebView = {
     // Configure automatic page scaling.
     let javascript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta)";
     let configuration = WKWebViewConfiguration();
     let userScript = WKUserScript(source: javascript, injectionTime: .atDocumentEnd, forMainFrameOnly: true);
     let usercontroller = WKUserContentController();
     usercontroller.addUserScript(userScript);
     configuration.userContentController = usercontroller;
     // Add a method to call the JavaScript of the HTML page. You can change the method name as needed.
     configuration.userContentController.add(self, name: "getVerifyResult");
     // Configure WKWebView.
     let webView = WKWebView(frame: self.view.frame, configuration: configuration);
     webView.navigationDelegate = self;
     return webView;
   }()

4. Set the corresponding method for the WKScriptMessageHandler protocol. This method is used to retrieve the return value from Captcha V2.0 and your business logic code, and then pass the verification result to a custom API.

   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
     if(message.name == "getVerifyResult"){
       // After you receive the verification result, you can perform different business operations.
       print(message.body)
     }
   }