H5客户端接入_号码认证服务(PNVS)-阿里云帮助中心

本文为您介绍如何在H5页面通过集成网页端SDK，使用图形认证。

接入步骤

下载SDK

登录号码认证产品控制台，在概览页面右侧API&SDK区域，单击立即下载，进入API&SDK页面，选择图形验证码 > 网页端 > h5，下载并解压SDK。

资源引入

将网页端SDK上传到您的静态资源服务器上，获取能够访问到网页端SDK的URL，通过script标签的方式引入。

<script type="text/javascript" charset="utf-8" src="${your-sdk-asset-path}/ct4.js"></script>

创建认证方案

您使用SDK时，会用到密钥参数信息，请先在图形认证方案管理控制台，新增图形认证方案，获取密钥参数（包括appId、appKey）信息。

初始化

调用initAlicom4方法并传入参数与回调函数进行初始化，必传参数captcha_id、product可参考如下示例：

<!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" />
    <title>bind</title>
    <style>
      <!-- Some code here -->
    </style>
  </head>

  <body>
    <h2>Slide CAPTCHA-float</h2>
    <form id="form">
      <div>
        <label for="username">Username：</label>
        <input class="inp" id="username" type="text" value="Username" />
      </div>
      <br />
      <div>
        <label for="password">Password：</label>
        <input class="inp" id="password" type="password" value="123456" />
      </div>
      <br />

      <div>
        <label>Verify：</label>
        <div id="captcha"></div>
      </div>
      <br />

      <div id="btn" class="btn">Submit</div>
    </form>
    <!-- Note that the CAPTCHA itself does not require the jquery library. -->
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <!-- Introducing ct4.js, you can use the initAlicom4 initialization func -->
    <script src="https://static.alicaptcha.com/v4/ct4.js"></script>
    <script>
      initAlicom4(
        {
          captchaId: "<YOUR_APP_ID>", // 请填入appId
          product: "bind",
        },
        function (captchaObj) {
          captchaObj
            .onReady(function () {
              //验证码ready之后才能调⽤showCaptcha方法显示验证码
            })
            .onSuccess(function () {
              //your code,结合您的业务逻辑重置验证码
              captchaObj.reset();
            })
            .onError(function () {
              //your code
            });
          // 按钮提交事件
          $("#btn").click(function () {
            // some code
            // 检测验证码是否ready, 验证码的onReady是否执行
            captchaObj.showCaptcha(); //显示验证码
            // some code
          });
        }
      );
    </script>
  </body>
</html>

参数	是否必填	类型	说明
captchaId	是	string	验证ID，请传入在控制台创建认证方案后生成的`appId`。
product	是	string	bind

接口说明

getValidate

获取用户进行成功验证onSuccess所得到的结果，该结果用于进行服务端SDK进行二次验证。
getValidate方法返回⼀个对象，该对象包含⼀些验证需要的字段。
其他情况返回false，网站开发者可根据该返回值决定是否需要进行下⼀步操作，提交表单或ajax进行⼆次验证。

通过ajax方式进行⼆次验证示例

<!DOCTYPE html>
<html lang="zh">
<script>
    initAlicom4({
        // 省略配置参数
    }, function (captchaObj) {
        // 省略其他方法的调用
        // 这里调用onSuccess方法，该方法介绍见下⽂
        captchaObj.onSuccess(function () {
            var result = captchaObj.getValidate();
            // ajax伪代码
            $.ajax({
                url: '服务端',
                data: result,
                dataType: 'json',
                success: function (res) {
                    console.log(res.result);
                }
            })
        })
})
</script>
</html>

reset

用户发现验证成功但其他信息不对的情况，如用户名密码错误或验证出现错误的情况时使用此接口。

<!DOCTYPE html>
<html lang="zh">
<script>
  initAlicom4({
    // 省略配置参数
  }, function (captchaObj) {
    // 省略其他方法的调用
    // 这里调用onSuccess方法，该⽅法介绍见下⽂
    captchaObj.onSuccess(function () {
      var result = captchaObj.getValidate();
      // ajax 伪代码
      ajax('/login', {
        lot_number: result.lot_number,
        captcha_output: result.captcha_output,
        pass_token: result.pass_token,
        gen_time: result.gen_time,
        username: 'xxx',
        password: 'xxx'
        // 其他服务端需要的数据，比如登录时的用户名和密码
      }, function (data) {
        // 根据服务端⼆次验证的结果进⾏跳转等操作
        if (data.status === 'fail') {
          alert('⽤⼾名或密码错误，请重新输⼊并完成验证');
          captchaObj.reset(); // 调⽤该接口进行重置
        }
      });
    });
  });
</script>

</html>

showCaptcha

对用户所填写的数据进行检查，无问题后再调用验证接口。

<!DOCTYPE html>
<html lang="zh">
  <body>
    <div id="btn">提交按钮</div>
  </body>
  <script>
    initAlicom4({
      // 省略配置参数
      product: 'bind'
    }, function (captchaObj) {
      // 省略其他方法的调⽤
      document.getElementById('btn').addEventListener('click', function () {
        if (check()) { // 检查是否可以进行提交
          captchaObj.showCaptcha();
        }
      });
      captchaObj.onSuccess(function () {
        // 用户验证成功后，进行实际的提交⾏为
        // todo
      })
    });
  </script>
</html>

onReady(callback)

监听验证按钮的DOM生成完毕事件，参数callback为函数类型。根据onReady事件隐藏“加载验证提示语”。

<!DOCTYPE html>
<html lang="zh">
<body>
    <div id="captcha-box">
    <div id="loading-tip">加载中，请稍后...</div>
    </div>
</body>
<script>
  initAlicom4({
    // 省略配置参数
  }, function (captchaObj) {
    // 省略其他方法的调用
    captchaObj.onReady(function () {
      // DOM准备好后，隐藏 #loading-tip元素
      // 仅作示例用，用您适合的方式隐藏即可
      document.getElementById('loading-tip').style.display = 'none';
    });
  });
</script>
</html>

onNextReady(callback)

监听验证下一步资源的加载完毕事件，参数callback为函数类型。

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

<body>
  <div id="captcha-box">
    <div id="loading-tip">加载中，请稍后...</div>
  </div>
</body>
<script>
  initAlicom4({
    // 省略配置参数
  }, function (captchaObj) {
    // 省略其他方法的调用
    captchaObj.onNextReady(function () {
    });
  });
</script>

</html>

onSuccess(callback)

监听验证成功事件，参数callback为函数类型。

<!DOCTYPE html>
<html lang="zh">
  <script>
    initAlicom4({
        // 省略配置参数
        product: 'bind'
    }, function (captchaObj) {
        // 省略其他方法的调用
        document.getElementById('btn').addEventListener('click', function () {
            if (check()) { // 检查是否可以进⾏提交
                captchaObj.showCaptcha();
            }
        })};
    captchaObj.onSuccess(function () {
        // 用户验证成功后，进⾏实际的提交⾏为
        // todo
    })
    );
  </script>
</html>

onFail(callback)

监听验证成功事件，参数callback为函数类型。failObj操作失败对象包含：captcha_id、captcha_type、challenge，后续可能增加，监听验证码操作失败事件，统计用户操作失败次数。

<!DOCTYPE html>
<html lang="zh">
   <script>
    initAlicom4{
    // 省略配置参数
   }, function (captchaObj) {
    // 省略其他方法的调用
    captchaObj.onFail(function (failObj) {
      // 对错误信息做⼀些统计
    })
  };
   </script>
</html>

onError(callback)

监听验证出错事件，参数callback为函数类型。静态资源加载失败、网络不佳等验证码能捕获到的错误，都会触发onError回调。该错误对象包含三部分：code错误码、msg提示信息、desc该对象包含detail属性，描述具体的错误信息。

<!DOCTYPE html>
<html lang="zh">
  <script>
  initAlicom4({
    // 省略配置参数
  }, function (captchaObj) {
    // 省略其他方法的调用
    captchaObj.onError(function (error) {
      // 出错啦，可以提醒用户稍后进行重试
      // error 包含error_code、msg
      // {code: '60000',msg:"用户配置错误"，desc:{ detail: "用户id缺少"} }
    });
  });
  </script>
</html>

onClose(callback)

当用户关闭弹出来的验证时，会触发该回调。

<!DOCTYPE html>
<html lang="zh">
<script>
  initAlicom4({
    // 省略配置参数
    product: 'bind'
  }, function (captchaObj) {
    // 省略其他方法的调用
    captchaObj.onClose(function () {
      // 用户把验证关闭了，这时你可以提示用户需要把验证通过后才能进行后续流程
    });
  });
</script>

</html>

destroy

销毁验证实例，验证相关UI以及验证注册的事件监听器都会被移除。

<!DOCTYPE html>
<html lang="zh">
<script>
  initAlicom4({
    // 省略配置参数
    product: 'bind'
  }, function (captchaObj) {
    // 省略其他方法的调用
    captchaObj.onSuccess(function () {
      var result = captchaObj.getValidate();
      // ajax 伪代码
      ajax('/login', {
        lot_number: result.lot_number,
        captcha_output: result.captcha_output,
        pass_token: result.pass_token,
        gen_time: result.gen_time,
        username: 'xxx',
        password: 'xxx'
        // 其他服务端需要的数据，比如登录时的用户名和密码
      }, function (data) {
        // 根据服务端⼆次验证的结果进行跳转等操作
        if (data.status === 'fail') {
          alert('⽤⼾名或密码错误，请重新输入并完成验证');
          captchaObj.reset(); // 调用该接口进行重置
        } else if (data.status === 'success') {
          // 结合业务逻辑，判断是否需要移除验证
          captchaObj.destroy();
          captchaObj = null;
        }
      });
    });
  });
</script>

</html>

错误码

错误码	描述
60001	配置参数captcha_id有误。请检查初始化时传入的配置参数captcha_id。
60002	传给appendTo接口的参数有误，只接受ID选择器和DOM元素。
60100	/load请求报错。建议：请保持网络畅通。检查初始化时传入的配置参数captchaId。
60101	/verify请求报错，请保持网络畅通。
60200	皮肤加载失败，请保持网络畅通。
60201	语⾔包加载失败，请保持网络畅通。
60202	验证图片加载失败，请保持网络畅通。
60204	（gacptcha4）js资源加载超时，请保持网络畅通。
60205	(ct4)js资源加载超时，请保持网络畅通。
60500	服务端forbidden。