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

本文介绍H5页面接入网页端SDK的方式及图形认证相关方法的说明。

接入步骤

下载SDK

登录号码认证产品控制台，在概览页面右侧API&SDK区域，单击立即下载，进入API&SDK页面，根据页面提示下载并解压对应SDK。

创建认证方案

您导入项目或调用API接口时，会用到方案Code或方案编码等参数信息，请先在号码认证产品控制台，创建图形认证方案，获取方案Code等参数信息。

开始集成

支持两种集成网页端SDK的方法，您可任选其中一种：

静态资源引入。
将网页端SDK上传到您的静态资源服务器上，获取能够访问到网页端SDK的URL，通过script标签的方式引入。
```
<script type="text/javascript" charset="utf-8" src="${your-sdk-asset-path}/numberAuth-web-sdk.js"></script>
```
npm包引入。下载npm资源，将aliyun_numberauthsdk_web包添加为项目依赖。
```
// 下载npm资源并添加依赖到package.json
npm i aliyun_numberauthsdk_web -S
```

初始化

调用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: "54088bb07d2df3c46b79f80300b0abbe", // Use your own c
          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
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