puyao
/
siyu_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--step2: 移动运营商需要判断referrer 请在验证后台添加根据需求添加对应的Referer&&Origin -->
    <meta content="always" name="referrer">
    <title>onepass demo演示</title>
    <style>
        body {
            margin: 50px 0;
            font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
            text-align: center;
        }

        .inp {
            width: 278px;
            height: 40px;
            padding: 0 10px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 2px;
        }

        .btn {
            display: inline-block;
            box-sizing: border-box;
            width: 120px;
            height: 40px;
            color: #666;
            font-size: 16px;
            line-height: 40px;
            background: white linear-gradient(180deg, #fff 0%, #f3f3f3 100%);
            border: 1px solid #ccc;
            border-radius: 2px;
            cursor: pointer;
        }

        .btn:hover {
            background: white linear-gradient(0deg, #fff 0%, #f3f3f3 100%);
        }

        #captcha {
            display: inline-block;
            width: 300px;
        }

        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            vertical-align: top;
        }

        #wait {
            margin: 0;
            color: #666;
            text-align: left;
        }

        .txt_msg {
            width: 130px;
        }

        .btn_msg {
            width: 122px;
            height: 44px;
            margin: 0;
            color: #fff;
            font-size: 14px;
            background: #0bd8d0;
            border: solid 1px #ccc;
            border-radius: 2px;

            -webkit-appearance: none;
        }

        .btn_msg.disable {
            background: #ccc;
        }

        #btnStep1,
        #btnStep2 {
            color: #fff;
            background: #0bd8d0;
        }
    </style>
</head>

<body>
    <h1>注册</h1>
    <div>
        <div id="step1">
            <h5 style="color:red;">请先关闭WIFI</h5>
            <h5>demo 仅展示onepass H5 推荐逻辑</h5>
            <p>推荐根据script里代码的step步骤进行一步一步部署</p>
            <input id="phone" type="tel" class="inp" maxlength="11" placeholder="请输入手机号">
        </div>
        <br />
        <div id="step2" style="display: none;">
            <input id="txtmsg" type="tel" class="inp txt_msg" maxlength="6" placeholder="请输入短信验证码">
            <input type="button" class="btn_msg" id="btnGetMessage" value="获取验证码">
            <br />
        </div>
        <div id="btnStep1" class="btn">下一步</div>
    </div>

    <div id="step3" style="display: none;">
        <h3>注册成功</h3>
    </div>
    <!-- 手机查看日志 -->
    <!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
    </script> -->

    <!-- 本机验证本身不需要jquery 库，此处使用仅为了在demo中减少代码量 -->
    <script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <!-- stpe1: 引入JS -->
    <!-- 引入axios -->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
     <!-- 本地依赖 -->
     <script src="axios.min.js"></script>
    <!-- 引入gysdk-min-dev.js  注意路径-->
    <script src="gysdk-min.js"></script>
    <script type="text/javascript">
        const appid = "xOXlBEZffZ5cugKJMXMX13"
        const appKey = "aivIdLhtYC7zFEGccNInH5"
        const masterSecret = "fxS2KV2qfj8Eh1sJsyK8H2"

        var step1Div = $('#step1');
        var step2Div = $('#step2');
        var step3Div = $('#step3');
        var btnStep1 = $('#btnStep1');

        // 手机号码校验 ，用户可根据业务做不同判断
        function checkPhoneNumber() {
            var phoneEl = $('#phone');
            var phonenumber = phoneEl.val();
            if (!phonenumber) {
                alert('请输入手机号！');
                return false;
            }
            // 根据业务调整正则
            var phonereg = /^1\d{10}$/;
            var result = phonereg.test(phonenumber);
            if (!result) {
                alert('请输入正确的手机号');
            }
            return result;
        }

        //初始化个验SDK
        function initGy() {
            GyManager.setDebugMode(true)
            GyManager.init({
                app: "个验仅H5",
                appid: appid, timeout: 3000, onResult: function (res) {
                    console.log("demo init ", res);
                    if (res.success) {
                        initResult = res;
                    }
                }
            });
        }
      
        //保存初始化结果
        let initResult;
        // 可提前判断网络状态 决定是否初始化H5一键登录
        var nettype = GyManager.checkNetInfo();
        console.log("demo checkNetInfo", nettype);
        // 根据客户业务进行判断 网络判断返回 cellular、 wifi、 unknown
        if (nettype === 'wifi') {
            console.error("demo wifi状态无法一键验证")
            // 可选方案： 
            // 1: 提示用户关闭wifi 进行体验
            // 2: 直接降级走其他验证形式
        } else {
            // stpe3: 初始化H5一键验证
            initGy()
        }
        // 点击登录进行校验流程 
        $('#btnStep1').click(function (e) {
            // 以下为推荐逻辑 ，用户可根据业务进行更改
            // 手机号码检测 && 当前net状态 
            var checkphone = checkPhoneNumber();
            // step4: 网络状态判断方法（非必选）
            var net = GyManager.checkNetInfo();
            if (checkphone && net !== 'wifi') {
                // 调用网关接口 // 参数为phone 
                // step5: 网关接口调用
                GyManager.onePass({
                    phone: $('#phone').val(),
                    onGatewaySuccess: function (res) {
                        console.log("onGatewaySuccess", res);
                       //调用服务端校验接口
                    },
                    onGatewayFail: function (err) {
                        console.error("onGatewayFail", err);
                    }
                });
            } else {
                // 当前网络状态为wifi情况下直接调用短信
            }
        });
    </script>
</body>
</html>