h5页面腾讯验证调用调用安卓和ios方法传递参数

公司有个需求前端做一个腾讯滑块验证的页面,安卓和ios引用这个h5页面,用户验证成功后,调用安卓和ios的方法将腾讯验证返回的参数传给安卓和ios。

腾讯验证文档: https://cloud.tencent.com/document/product/1110

一、参数说明

与安卓和ios定义好调用的方法名,定义好要传递的参数

{"type": 0, "data":{}}
type Data 说明
1 {“random”:“”, “ticket”:“”} 腾讯图形化验证验证成功

二、前端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <!-- 验证码程序依赖(必须)。请勿修改以下程序依赖,如通过其他手段规避加载,会导致验证码无法正常更新,对抗能力无法保证,甚至引起误拦截。 -->
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>
<body>
</body>
<script>
    
    // 定义回调函数
    function callback(res) {
        if (res.ret === 0) {
            let result = {
                type: 1,
                data:{ random: res.randstr, ticket: res.ticket }
            }
            console.log("result",result)
            let u = navigator.userAgent
            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            console.log("isType",isAndroid,isIOS)
            if (isAndroid) {
                console.log("isAndroid",JSON.stringify(result))
                //Android这个是原生封装的一个函数,可以与安卓开发沟通一下
                Android.jsToNative(JSON.stringify(result)); // 调用原生app的函数
            }
            if (isIOS) {
                console.log("isIOSresult",result)
                window.webkit.messageHandlers.jsToNative.postMessage(result);
            }
        }
    }

    // 定义验证码js加载错误处理函数
   function loadErrorCallback() {
        var appid = '你的验证码CaptchaAppId';
        // 生成容灾票据或自行做其它处理
        var ticket = 'terror_1001_' + appid + '_' + Math.floor(new Date().getTime() / 1000);
        callback({
          ret: 0,
          randstr: '@'+ Math.random().toString(36).substr(2),
          ticket: ticket,
          errorCode: 1001,
          errorMessage: 'jsload_error'
        });
     }

    // 定义验证码触发事件
    window.onload = function(){
        try {
                let appid = '你的验证码CaptchaAppId'; // 腾讯云控制台中对应这个项目的 appid
                //callback:定义的回调函数
                var captcha = new TencentCaptcha(appid, callback,{type:'embed'});
                // 调用方法,显示验证码
                captcha.show(); 

        } catch (error) {
        // 加载异常,调用验证码js加载错误处理函数
                loadErrorCallback();
        }
    }
</script>

</html>

你可能感兴趣的:(js,android,ios,javascript,前端)