如何使用UIWebView在iOS App中接入滑块验证_验证码(Captcha)-阿里云帮助中心

随着混合模式移动应用（Hybrid App）开发技术的日益成熟，您可以通过在App业务中启用WebView组件的方式直接接入移动端HTML5业务类型的滑动验证组件，实现App业务中的人机对抗。用户只需通过类似滑动解锁的方式来实现验证码，对正常用户来说无需思考即可通过人机识别（图灵测试）的挑战。

同时，移动端HTML5业务类型的验证码组件具备快速迭代、强兼容性等优势。通过这种方式在App业务中接入滑动验证服务，您无需再为Native App组件中的各种依赖、引用导致的兼容性问题而感到困扰，而移动端HTML5业务类型的滑动验证组件的快速迭代也将帮助您的App业务更好地应对强对抗场景。

本示例使用iOS原生框架JavaScriptCore.FrameWork实现在iOS App中接入HTML5应用类型的滑块验证组件。您可以根据App业务的开发环境选择其它合适的第三方框架。

在iOS App中接入HTML5应用类型的滑块验证组件主要包含以下步骤：

iOS App端：利用WebView组件在App应用中开启并部署需要接入滑动验证组件的业务页面。
HTML5页面前端：通过JavaScript函数调用Object-C方法并将记录的用户行为参数值传至阿里云验证码服务端。
HTML5页面对应的服务端：集成滑动验证服务端SDK。

步骤一：在iOS App端开启并部署业务页面

在您的iOS App工程的.h文件中，导入框架的依赖库。

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

在您的iOS App工程的.m文件中，加载HTML5业务页面。

        - (void)viewDidLoad {
            [super viewDidLoad];
            self.webView.delegate = self;
            // 配置页面的自适应缩放。
            self.webView.scalesPageToFit = YES;

            // 加载远程HTML5业务页面。
            [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:[NSURL URLWithString:@"http://aliyundoc.com/demo/"]]];

            // 您也可以直接加载本地HTML文件。但使用这种加载方式将无法方便地升级该HTML5页面，因此不推荐使用。
            //    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];
        }

设置JavaScript对象，作为Native App引用与HTML5业务页面间的桥梁。

说明

本示例中将该对象命名为testWebView。

        - (void)webViewDidFinishLoad:(UIWebView *)webView
        {
            // 获取context对象。
            self.context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

            // 设置testWebView JS对象，并将该对象指向其自身。
            self.context[@"testWebView"] = self;
            self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
                context.exception = exceptionValue;
                NSLog(@"异常信息：%@", exceptionValue);
            };
        }

在该对象的Object-C中，设置相应的方法获取滑动验证服务的返回值和您自身的业务逻辑代码。
```
        - (void)getSlideData:(NSString *)callData {
            NSLog(@"Get:%@", callData);
        }
```

在.h文件中，声明所设置的作为Native App应用与HTML5业务页面间桥梁的JavaScript对象名和方法。

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

        @protocol JSObjcDelegate

        // 声明testWebView对象调用的JS方法。
        (void)getSlideData:(NSString*)callData;

        @end 
        @interface ViewController : UIViewController <UIWebViewDelegate,JSObjcDelegate> 
        @property (nonatomic, strong) JSContext *context; 
        @property (weak, nonatomic) IBOutlet UIWebView *webView;

        @end

步骤二：在HTML5页面前端代码中添加JavaScript函数调用App业务中的Object-C

确认已在HTML5业务页面前端代码中集成滑动验证提供的前端接入代码。关于HTML5页面的前端接入代码集成方式，请参见滑动验证集成方式。

在已集成滑动验证前端接入代码的HTML5业务页面中，添加对应的JavaScript函数，实现在用户将滑块滑动至末端时的回调参数中返回Object-C。

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

步骤三：在HTML5页面对应的服务端集成滑动验证服务端SDK

在HTML5业务页面对应的服务端中，集成滑动验证提供的服务端功能SDK。关于HTML5页面的前端接入代码集成方式，请参见滑动验证服务端代码集成。

示例效果

完成上述步骤后，您的iOS App业务中即接入HTML5应用类型的滑块验证组件实现验证码。当用户在App中将滑块滑动至末端时，HTML5业务页面将调用testWebView.getSlideData对象获取所记录的用户行为参数值，将其传至阿里云验证码服务端识别机器风险，根据判决结果和所设定的业务逻辑返回相应结果。返回结果