Captcha:Integrate with the V3 architecture on iOS

Requirements

How it works

This integration has three layers:

The key constraint tying all three layers together: the JavaScript method name used in postMessage (Step 1) must exactly match the name registered in WKUserContentController (Step 3). A mismatch silently drops the message.

Step 1: Integrate Captcha 2.0 in the HTML5 service client

Follow Integrate with the V3 architecture for web and H5 clients to embed Captcha 2.0 in your HTML5 page.

If your service uses V2, see Integrate with the V2 architecture for web and H5 clients.

In the success callback, add the following JavaScript to pass the verification parameter to the iOS app via the JS bridge:

// Success callback function
function success(captchaVerifyParam) {
  // Pass the verification parameter to the iOS app via the JS bridge.
  // The method name must match the one registered in WKUserContentController (Step 3).
  window.webkit && window.webkit.messageHandlers.getCaptchaVerifyParam.postMessage(captchaVerifyParam)
}

Returned data

After the user completes verification, the Captcha server performs behavioral verification and returns a captcha code along with other parameters to the client. To inspect the returned data, use the Network tab in your browser's developer tools. For details, see Data returned by the V3 client architecture.

Step 2: Integrate Captcha 2.0 on the server

On the server that backs your HTML5 service page, install the Captcha 2.0 server-side SDK and call the VerifyIntelligentCaptcha API operation to validate the captcha verification parameter. For setup instructions, see Server-side integration.

Step 3: Load and configure WKWebView in the iOS app

The iOS app registers a WKScriptMessageHandler method so JavaScript in the HTML5 page can post the verification parameter to native code. This step has four sub-steps:

1. Import WebKit.

2. Load the HTML5 service page into WKWebView.

3. Configure the WKWebView object and register the JS message handler.

4. Implement the handler method to receive and forward the verification parameter.

Select the language tab for your project:

import WebKit

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.
}

lazy var webView: WKWebView = {
    // Configure adaptive 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
    // Register the method that JavaScript will call. You can change the name, but it must match
    // the name used in the success callback's postMessage call (Step 1).
    configuration.userContentController.add(self, name: "getCaptchaVerifyParam")
    // Configure WKWebView.
    let webView = WKWebView(frame: self.view.frame, configuration: configuration)
    webView.navigationDelegate = self
    return webView
}()

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "getCaptchaVerifyParam" {
        // Send the verification parameter to your server for signature verification.
        print(message.body)
    }
}

#import "ViewController.h"
#import <WebKit/WebKit.h>

@interface ViewController ()<WKScriptMessageHandler>

@property(nonatomic,strong)WKWebView *webView;

@end

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view addSubview:self.webView];
    self.webView.scrollView.backgroundColor = [UIColor redColor];

    [self loadLocalHtmlForJs];
}

- (void)loadLocalHtmlForJs{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];
    [self.webView loadRequest:req];
}

- (WKWebView *)webView{
    if (!_webView) {
        // Configure adaptive page scaling.
        NSString *jscript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta)";
        WKUserScript *userScript = [[WKUserScript alloc] initWithSource:jscript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
        WKUserContentController *userContentController = [[WKUserContentController alloc] init];
        [userContentController addUserScript:userScript];
        // Register the method that JavaScript will call. The name must match the one used in the
        // success callback's postMessage call (Step 1).
        [userContentController addScriptMessageHandler:self name:@"getCaptchaVerifyParam"];
        // Configure WKWebView.
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        configuration.userContentController = userContentController;
        // Display WKWebView.
        WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
        webView.backgroundColor = [UIColor blackColor];
        // Enable debug mode (optional).
        [webView.configuration.preferences setValue:@YES forKey:@"developerExtrasEnabled"];
        webView.inspectable = YES;

        _webView = webView;
    }
    return _webView;
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    // The method name must match the one registered in WKUserContentController.
    if([message.name isEqualToString:@"getCaptchaVerifyParam"]){
        // Send the verification parameter to your server for signature verification.
        NSLog(@"Signature verification parameters for Captcha: %@", message.body);
        // Example: forward to your server.
        [self sendCaptchaVerifyParamToServer:message.body];
    }
}

Demo downloads

Download a working sample project to see the full integration:

• Swift: Swift app integration demo

• Objective-C: Objective-C app integration demo