如何将H5页面接入网页端SDK并校验本机号码_号码认证服务(PNVS)-阿里云帮助中心

本文为您详细介绍H5页面接入网页端SDK的方式及本机号码校验相关方法的说明。

说明

在使用过程中如有疑问，可以提交工单联系阿里云技术工程师处理。

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
```

注意事项

在调用SDK之前，务必确保对应的SDK依赖文件已经提前引入。
不可在业务代码中覆盖window.PhoneNumberServer变量。
认证之前确保您的终端设备已关闭Wi-Fi连接且开启了SIM卡的4G移动数据网络（支持中国联通、中国移动的3G网络，但接口耗时会增加）。

交互流程详解

本机号码校验交互流程主要分为三个步骤：初始化、获取认证参数、号码校验。

注：上图为完整的交互流程时序图。

初始化。
1. 用户访问H5页面，H5页面调用服务端集成的GetAuthToken - 获取 H5 认证授权 Token接口获取授权Token（包括业务鉴权accessToken和API鉴权jwtToken两个参数）。
2. H5页面调用SDK的checkAuthAvailable方法发起身份鉴权。
获取认证参数。
1. 身份鉴权通过，H5页面调用SDK的getVerifyToken方法获取号码认证spToken。
号码校验。
1. 用户输入需要验证的手机号。
2. H5页面携带获取到的spToken和用户输入的手机号，向服务端发起认证请求。
3. 服务端调用集成的VerifyPhoneWithToken - 本机号码校验（H5能力专用）接口获取认证结果，判断用户输入的手机号码与用户终端当前访问网络的手机号码是否一致。
4. 返回校验结果给H5页面。

方法说明

初始化实例

const phoneNumberServer = new PhoneNumberServer();

checkAuthAvailable（本机号码校验鉴权接口）

调用该接口之前，请在服务端调用GetAuthToken接口，获取本机号码校验鉴权接口所需的accessToken和jwtToken。

方法参数

参数名称	参数类型	是否必填	参数说明
success	function	是	成功回调。回调函数入参请参见success/error回调函数入参。
error	function	是	失败回调。回调函数入参请参见success/error回调函数入参。
accessToken	string	是	号码认证业务鉴权Token由阿里云对外暴露的getAuthToken接口生成。说明 accessToken过期时间是10分钟，有效期内可以重复使用。
jwtToken	string	是	API鉴权Token由阿里云对外暴露的getAuthToken接口生成。说明 jwtToken过期时间是1小时，有效期内可以重复使用。
timeout	number	否	接口的请求超时时间，默认10秒。

success/error回调函数入参

参数名称	参数说明
code	返回的状态码。返回600000代表请求成功。其他错误码，请参见错误码。
requestId	本地调用的唯一ID，根据此ID可查询相关日志。
content	SDK服务端返回的结果传给用户，方便用户定位问题。
msg	对返回结果的描述。

调用示例

// 调用之前先去用户服务端获取AccessToken和JwtToken
phoneNumberServer.checkAuthAvailable({
  accessToken: "XXXXXXXXXX",
  jwtToken: "******",
  success: function (res) {
    console.log(res);
    if (res.code === 600000) {
      // 在此调用getVerifyToken接口
    }
  },

  error: function (res) {
    // 提示用户关闭Wi-Fi或者尝试其他登录方案
  },
});

getVerifyToken（获取本机号码校验Token接口）

在checkAuthAvailable成功回调中调用此接口。

方法参数

参数名称	参数类型	是否必填	参数说明
success	function	是	成功回调。回调函数入参请参见success/error回调函数入参。
error	function	是	失败回调。回调函数入参请参见success/error回调函数入参。
timeout	number	否	接口的请求超时时间，默认25秒。

success/error回调函数入参

参数名称	参数说明
code	返回的状态码。返回600000代表请求成功。其他错误码，请参见错误码。
spToken	运营商Token。
content	失败时运营商返回的内容。
requestId	本地调用的唯一ID，根据此ID可查询相关日志。

调用示例

phoneNumberServer.getVerifyToken({
  success: function (res) {
    console.log(res);
    // 获取到用户输入的手机号+spToken校验本机号码
  },

  error: function (res) {},
});

getVersion（获取SDK版本号）

const phoneNumberServer = new PhoneNumberServer();
const sdkVersion = phoneNumberServer.getVersion();  // 返回SDK版本号 eg: '1.0.0'

getConnection（网络类型检查接口）

网络类型检查接口，您可自行选择是否调用，对认证流程无阻碍。

此接口会判断当前用户的网络类型： Wi-Fi（wifi）、移动数据网络（cellular）、unknown。
重要
未开启移动数据网络的用户无法通过一键登录完成认证。
提前获取用户的网络类型，拦截使用Wi-Fi网络的用户，及时终止认证流程，节约资源并提升用户的认证体验。
建议认证前调用此接口，对netType为wifi的用户提醒关闭Wi-Fi或者提供其他认证方式，对于netType为unknown和cellular的用户继续一键登录流程。

const phoneNumberServer = new PhoneNumberServer();
const netType =  phoneNumberServer.getConnection();
// console.log(netType);
// netType的值为wifi(Wi-Fi)、cellular（流量）、unknown（未知）

sendLoggerEnable（设置开启日志）

isEnable：是否开启，true为开启，false为不开启。

const phoneNumberServer = new PhoneNumberServer();
phoneNumberServer.setLoggerEnable(true);