Integrate HTML5 slider CAPTCHA in an iOS app-Captcha(Captcha)-阿里云帮助中心

As hybrid app development technology matures, you can integrate a mobile HTML5 slider CAPTCHA component directly into your app using a WebView component. This helps you implement bot mitigation for your app's services. The slider CAPTCHA is intuitive, allowing legitimate users to easily pass the Turing test with a simple slide-to-unlock motion.

Mobile HTML5 CAPTCHA components offer advantages like rapid iteration and strong compatibility. This integration removes compatibility concerns related to dependencies and references in native app components. The rapid iteration of the mobile HTML5 slider CAPTCHA component also helps your app better handle sophisticated bot attacks.

This topic demonstrates how to integrate an HTML5 slider CAPTCHA component into an iOS app using the native iOS framework, JavaScriptCore.framework. You can choose other third-party frameworks based on your app's development environment.

The integration process involves the following steps:

iOS app: Use a WebView component to load and display the business page that requires the slider CAPTCHA component.
HTML5 page frontend: Use a JavaScript function to call an Objective-C method and pass the recorded user behavior parameters to the Alibaba Cloud CAPTCHA server.
HTML5 page server-side: Integrate the slider CAPTCHA server-side SDK.

Step 1: Load and deploy the business page

In the .h file of your iOS project, import the required framework libraries.

        #import <UIKit/UIKit.h>
        #import <JavaScriptCore/JavaScriptCore.h>

In the .m file of your iOS project, load the HTML5 business page.

        - (void)viewDidLoad {
            [super viewDidLoad];
            self.webView.delegate = self;
            // Configure the page to scale to fit.
            self.webView.scalesPageToFit = YES;
            // Load the remote HTML5 business page.
            [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:[NSURL URLWithString:@"http://aliyundoc.com/demo/"]]];
            // You can also load a local HTML file. However, this method is not recommended because it makes it difficult to update the HTML5 page.
            //    NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
            //    NSString *path = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"html"];
            //    NSString *html = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
            //    [self.webView loadHTMLString:html baseURL:baseURL];
        }

Set up a JavaScript object to act as a bridge between your native app and the HTML5 business page.

Note

In this example, the object is named testWebView.

        - (void)webViewDidFinishLoad:(UIWebView *)webView
        {
            // Obtain the context object.
            self.context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
            // Set the testWebView JavaScript object and point it to self.
            self.context[@"testWebView"] = self;
            self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
                context.exception = exceptionValue;
                NSLog(@"Exception: %@", exceptionValue);
            };
        }

In the Objective-C class for this object, define a method to receive the return value from the slider CAPTCHA service and implement your business logic.
```
        - (void)getSlideData:(NSString *)callData {
            NSLog(@"Get:%@", callData);
        }
```

In the .h file, declare the protocol and methods for the JavaScript bridge object.

        #import <UIKit/UIKit.h>
        #import <JavaScriptCore/JavaScriptCore.h>
        @protocol JSObjcDelegate
        // Declare the method that can be called from JavaScript.
        (void)getSlideData:(NSString*)callData;
        @end 
        @interface ViewController : UIViewController <UIWebViewDelegate,JSObjcDelegate> 
        @property (nonatomic, strong) JSContext *context; 
        @property (weak, nonatomic) IBOutlet UIWebView *webView;
        @end

Step 2: Call the Objective-C method from JavaScript

Ensure that you have integrated the frontend code for the slider CAPTCHA into your HTML5 business page. For more information, see Slider CAPTCHA integration method.

In the HTML5 business page where you integrated the frontend code, add a JavaScript callback function. This function calls the Objective-C method when the user successfully slides the puzzle piece, passing the callback parameters.

        function slideCallBack(data) {
            var result = {
                'nc_token':nc_token,
                'sessionid':data.csessionid,
                'sig':data.sig
            };
            window.testWebView.getSlideData(JSON.stringify(result));
        }

Step 3: Integrate the server-side SDK

On the web server that hosts your HTML5 business page, integrate the server-side SDK for the slider CAPTCHA. For more information, see Server-side integration for slider CAPTCHA.

Results

Completing these steps integrates the HTML5 slider CAPTCHA component into your iOS app. When a user successfully slides the puzzle piece, the HTML5 page calls the testWebView.getSlideData method. This method sends the callback parameters to the Alibaba Cloud CAPTCHA server to identify bot risk. Based on the risk analysis result and your defined business logic, the server returns an appropriate response.

2019-06-25 16:28:29
Get:
  {"nc_token":"CF_APP_1:1561xxxxxxxx:0.19652839996446203","sessionid"
  :"01jBFTxWBON65x9h_dk3oAArkAOTHy5bFxQukCvROWiIk9L17Hmkuzktu3jpC8G
  U_22bW8GF1G9f2oTysHmQ0lwYpZI48SOBL66S1lLoHBVk8N8fsM2IEHsCDAN7KX0FiKYf
                                        ","sig":"O5zSoDt-
  IMzEcFF2tvn7vy5cgjnOC5_PFV4iCegfuY1MY-3MN0dWR21QamD-
  MKUfMjQoxykb80MvU0hGCi0XuHtPqpfWj2X7VoiLjMtbo1nxB81_x-
  1BIOKMYQH2uU1wdWp8iDqPXGzfUC3EkrTJBgShX_0S7ZTUj-7cGKxf-
  BnF9tRM5n0SZo1zs-rpGZ2srKVbmvfTkMsNwMWbtv1IfTtt40xZ2P14GH17J01MN8ZS-
  s4CSqdpppDJgHyjeHCdEwjqEVuKcQJKV9ztzTfkfihFw9cvAh8G1wJWrj-
  irhdvwFJDHcBHSqAif7AyeQ0sjMUYgp-
  xxxxxxxxxxxxxxxxxxxxxxxx"}