记录iOS应用中接入阿里的html5滑块验证

之前应用中使用的是阿里的投篮验证，但是由于阿里投篮验证已经不维护，导致App在iOS13系统上存在crash(最近发现在iOS13.4的beta版中，又奇迹般的能正常运行了)，看了下阿里的官方通知，建议将投篮验证换成html5的滑块验证,具体实现其实就是运用了web与native的交互，将html5的滑动验证结果回传给native，从而实现人机验证。

1.登录阿里云，找到人机验证，在云盾人机验证控制台，新增一个h5滑动验证的配置，可以选择自定义样式，然后生成一个滑动验证的slide.html页面。

2.在native应用需要试用人机验证的地方(通常运用在发送验证码的地方)，用一个webView加载上述html，并给该webView添加相应的配置。

配置native的webView

在webView的代理方法中获取html页面中滑动验证的结果，为了方便取值，可以将返回的结果model化：

获取html滑动验证结果

此处为了后面参数读取方便，将滑动回调的结果model化，因为App实例需求，这里是用单独一个页面来做人机验证的，所以会有一个回调的block。

3.在slide.html中添加window.webkit.messageHandlers.slideSuccessResult.postMessage({ "token": nc_token, "sid": data.csessionid, "sig": data.sig })，将滑动验证的结果发送个native

在html页面发送验证结果

4.集成结果：

运行结果

随手记录一下，写的比较随意，详细接入步骤可参考阿里官方文档，建议将slide.html放到远程服务器，最好不要放在App本地访问。

参考：https://help.aliyun.com/document_detail/123335.html?spm=a2c4g.11186623.6.607.755d568fWelB56