iOS 腾讯云Web端接入短信人机验证
2020-06-06 本文已影响0人
鱿鱼干煎辣椒
由于腾讯云目前暂无支持APP直接SDK接入，APP要接入只能通过web的形式接入。详情请参考下方腾讯云链接：
https://007.qq.com/captcha/#/CreateApp
那么要使用腾讯云的短信验证，本文的思路是这样的：点击获取验证码->弹出写好的web页面（本地嵌入一个html文件）->OC与web页面上的JS进行交互->根据交互结果，判断是否请求获取验证码的后端接口，请求则开始倒计时，反之不开启。
一、本地嵌入LoginYanZhen.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<script src="https://static.xcx.co.ltd/assets/lib/jquery/3.1.1/jquery.min.js?_v=202005291817"></script>
<meta charset="UTF-8">
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script>
/* 自动触发验证按钮的点击事件，响应验证按钮的点击方法-callBack*/
$(document).ready(function() {
$("#TencentCaptcha").click();
})
/*
触发callBack方法，获取到名为“res”的数据
// res（用户主动关闭验证码）= {ret: 2, ticket: null}
// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
*/
function callback(res) {
console.log(1111111111)
console.log(res)
/*jS给OC传值(res)*/
window.webkit.messageHandlers.callFunction.postMessage(res)
/*关闭当前窗口*/
// window.close()
}
</script>
<style>
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0;
padding:0;
background-color:rbga(0,0,0,0.5);
}
</style>
</head>
<body>
<!--点击此元素会自动激活验证码-->
<!--id : 元素的 ID (必须)-->
<!--data-appid : AppID(必须)-->
<!--data-cbfn : 回调函数名(必须)-->
<!--data-biz-state : 业务自定义透传参数(可选)-->
<button id="TencentCaptcha" data-appid="2098880292" data-cbfn="callback" style="display: none">验证</button>
</body>
<!-- 详情web端接入验证码：https://007.qq.com/captcha/#/CreateApp -->
</html>
二、webView调用JS的实现
#import "LMLoginYanZhenWebView.h"
#import <WebKit/WebKit.h>
#import <JavaScriptCore/JavaScriptCore.h>
@interface LMLoginYanZhenWebView ()<WKNavigationDelegate,WKScriptMessageHandler>
@property (nonatomic, strong) WKWebView *wWebView;
@property (nonatomic ,strong)WKUserContentController * userCC;
@property(nonatomic,strong)NSString *ticket;
@property(nonatomic,strong)NSString *randStr;
@property(nonatomic,assign)NSInteger ret;
@end
@implementation LMLoginYanZhenWebView
- (void)dealloc {
if (self.wWebView) {
[self.wWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"about:blank"]]];
[self.wWebView reload];
self.wWebView = nil;
}
//最后， VC销毁的时候一定要把handler移除
[self.userCC removeScriptMessageHandlerForName:@"callFunction"];
}
-(void)viewWillDisappear:(BOOL)animated{
[super viewWillDisappear:animated];
[[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:NO];
}
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = MCBGColor;
NSLog(@"进来了");
// /1 遵循WKScriptMessageHandler协议
//2 初始化
WKWebViewConfiguration * config = [[WKWebViewConfiguration alloc]init];
self.wWebView = [[WKWebView alloc]initWithFrame:CGRectZero configuration:config];
// self.wWebView.backgroundColor = [UIColor colorWithWhite:0.2 alpha:0.3];;
self.wWebView.navigationDelegate = self;
NSString *path = [NSString stringWithFormat:@"Login.bundle/%@",self.localHtml];
NSURL *fileUrl = [[NSBundle mainBundle] URLForResource:path withExtension:@".html"];
[self.wWebView loadRequest:[NSURLRequest requestWithURL:fileUrl]];
[self.view addSubview:self.wWebView];
[self.wWebView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.view.mas_centerX);
make.centerY.equalTo(self.view.mas_centerY);
make.size.mas_equalTo(CGSizeMake(ScreenWidth, ScreenWidth));
}];
self.userCC = config.userContentController;
[self.userCC addScriptMessageHandler:self name:@"callOSX"];
//此处相当于监听了JS中callFunction这个方法
[self.userCC addScriptMessageHandler:self name:@"callFunction"];
}
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation
{
NSLog(@"开始加载");
}
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
NSLog(@"加载完成");
}
//加载失败
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error {
NSLog(@"加载失败");
}
#pragma mark WKScriptMessageHandler delegate
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
//这个回调里面， message.name代表方法名（‘本例为 callFunction’）， message.body代表JS给我们传过来的参数
/*{bizState: undefined, appid: "2098880292", ret: 0, ticket: "t02MTDRuk_eUb9xoxRITuopVvGLh_pnOJn6DLKL_zAv60Xp1rq…FYRzeYj5rQTBE2lpn57BYTXdF-JuoIAeRBSnl7VcLR9PLyw**", randstr: "@Cyv"}
NSLog(@"message.name === %@,message.body ===%@",message.name,message.body);*/
self.ticket = message.body[@"ticket"];
self.randStr = message.body[@"randstr"];
self.ret = [message.body[@"ret"] integerValue];
if (self.ret == 0 || self.ret == 2) {
[self dismissViewControllerAnimated:YES completion:^{
self.resCallBackBlock(self.ret, self.ticket, self.randStr);
}];
}
NSLog(@"webVc ticket == %@,randStr==%@,ret == %ld",self.ticket,self.randStr,(long)self.ret);
}
@end
此种方式会优先显示出一个白色底色的View,待解决，后显示图片滑动视图。
三、参考链接
1、https://blog.csdn.net/sinat_32283541/article/details/85989122
2、https://www.jianshu.com/p/9cf138651332
