美文网首页
iOS 腾讯云Web端接入短信人机验证

iOS 腾讯云Web端接入短信人机验证

作者: 鱿鱼干煎辣椒 | 来源:发表于2020-06-06 12:00 被阅读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

    相关文章

      网友评论

          本文标题:iOS 腾讯云Web端接入短信人机验证

          本文链接:https://www.haomeiwen.com/subject/kafzzhtx.html