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

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

H5 一键登录与本机号码校验使用同一 SDK（aliyun_numberauthsdk_web），但调用不同的接口，且二者的 Token 不能共用。请根据业务场景选择正确的接口：

场景	前端接口	服务端接口
一键登录	`checkLoginAvailable`、`getLoginToken`	`GetAuthToken`、`GetPhoneWithToken`
本机号码校验	`checkAuthAvailable`、`getVerifyToken`	`GetAuthToken`、`VerifyPhoneWithToken`

说明

一键登录的 spToken 与本机号码校验的 spToken 不能互用，请确保前后端接口配对使用。一键登录的接入方式请参见H5客户端接入（一键登录）。

接入步骤

下载SDK

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

创建认证方案

请参见：创建认证方案并获取方案Code。

资源引入

npm包引入

下载npm资源，并将aliyun_numberauthsdk_web包添加依赖到package.json：

npm i aliyun_numberauthsdk_web -S

在脚本中引入：

import { PhoneNumberServer } from 'aliyun_numberauthsdk_web';

静态资源引入

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

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

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

重要

不可在业务代码中覆盖window.PhoneNumberServer变量。
未开启移动数据网络的用户无法通过一键登录完成认证：认证之前确保您的终端设备已关闭Wi-Fi连接且开启了SIM卡的4G移动数据网络（支持中国联通、中国移动的3G网络，但接口耗时会增加）。

交互流程详解

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

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

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

方法说明

初始化实例

var 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 sdkVersion = phoneNumberServer.getVersion();  // 返回SDK版本号，如'1.0.0'

getConnection（网络类型检查接口）

本接口会判断当前用户的网络类型并返回netType：

wifi：Wi-Fi网络，建议对该类用户提醒关闭Wi-Fi或提供其他认证方式。
cellular：移动数据网络。
unknown：未知网络类型。由于 JS 能力有限，在某些浏览器环境下无法准确判断网络类型，会返回 unknown。具体场景包括：iOS 环境仅在微信浏览器中可正常判断 Wi-Fi 状态，其他浏览器（如 Safari）会返回 unknown；Android 环境部分小众手机浏览器无法准确判断 Wi-Fi 状态，会返回 unknown。当 getConnection 返回 unknown 时，建议继续调用 getLoginToken 等接口，不要中断认证流程。

本接口与认证流程不相关联，您可自行选择是否调用。建议认证前调用此接口，拦截使用Wi-Fi网络的用户，节约资源并提升用户的认证体验。

const netType = phoneNumberServer.getConnection(); // 返回netType: wifi, cellular, unknown

setLoggerEnable（设置开启日志）

phoneNumberServer.setLoggerEnable(true); // true为开启，false为不开启。