本文介绍H5页面接入网页端SDK的使用方法，包括一键登录、本机号码校验功能。

一、接入步骤

1. 静态资源引入

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

<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/jssdk/verify-h5-ui/0.0.5/uverify.min.js"></script>

2. 创建应用

前往智能认证后台创建一个h5类型应用，并开通智能认证产品。创建并开通成功后可在应用列表中查看。

示例图1

示例图2

3. 配置方案及密钥

创建成功的应用可在列表中查看，选择此h5应用的配置方案。来到配置方案页后选择添加方案。

在应用列表中找到你的应用，选择配置方案，如下图

在认证配置页选择添加方案，如下图

添加方案名称后下一步，如下图

配置你的h5页面地址后创建方案，如下图

创建方案后得到AppKey和密钥，用于SDK集成使用。

4. 集成验证示例

得到AppKey和密钥后即可调用SDK一键登录方法验证，如下示例，

// 授权页配置项 
const authPageOption = {
  navText: "本机号码登录",
  btnText: "立即登录",
  vendorPrivacyPrefix: "《",
  vendorPrivacySuffix: "》",
  agreeSymbol: "、",
  privacyBefore: "请阅读并同意",
  privacyEnd: "",
  isFocus: true,
  isDialog: true,
  manualClose: true,
  privacyAlertIsNeedShow: true,
  showCustomView: true,
  customView: {
    element: '<div class="btn_box other" onclick="clickEvent()">关闭授权页</div>',
    style: ".btn_box.other{width: 10rem; line-height: 3rem; background: #3b82fe; color: #FFF;font-size: 1rem;border-radius: 5px;text-align: center;margin: 0 auto;}",
    js: "function clickEvent(){ window.uVerify.closePage(); }",
  },
};

// 按需调用h5一键登录功能 
window.uVerify({
  data: {
    key: "你的秘钥",  // 你的秘钥
    appkey: "你的appkey", // 你的appkey
  },
  authPageOption: authPageOption,
  callback: (res) => {
    if (res.code === 600000) {
      console.log('返回code=600000即表示成功', res);
      // 得到res.spToken即表示成功，使用spToken调用服务端接口换取明文手机号。
      // window.uVerify.closePage();  // 手动关闭授权页，按需调用 
      // const ukid = window.uVerify.getVerifyId();
      res.setMessage({  // 提示语，按需调用 
        showMessage: true,
        messageContent: '获取spToken成功',
        messageStyle: {
    	  color: "#fff",
    	  borderRadius: "8px",
        },
        time: 3000,
      });
    }
  }
});

成功后弹出授权页面如下，输入手机号中间4位数后点击立即登录，成功后即可在回调中得到spToken，使用此token去调用服务端接口换号获取明文手机号。

二、SDK方法

h5一键登录提供获取spToken、手动关闭授权页、获取getVerifyId方法。

h5本机号码校验提供获取本机号码的spToken、获取getVerifyId方法。

// 调用h5一键登录功能 
window.uVerify({
  data: {
    key: "你的秘钥",  // 你的秘钥
    appkey: "你的appkey", // 你的appkey
  },
  authPageOption: {},  // 授权页配置项
  callback: (res) => {
    if (res.code === 600000) {
      console.log('返回code=600000即表示成功', res);
      // 得到res.spToken即表示成功，使用spToken调用服务端接口换取明文手机号。
      // window.uVerify.closePage();  // 手动关闭授权页，按需调用 
      res.clearInput(); // 清空输入框并将光标置于第一个输入框
      res.focusOn(2); // 将光标置于第1-4个输入框
      res.setMessage({
        // 设置弹出Toast提示框（有默认样式）
        showMessage: true, // 是否弹出Toast提示框
        messageContent: '获取spToken成功', // 弹出内容
        messageStyle: {
          // 自定义弹窗样式，写入css样式即可
          color: "#fff",
          borderRadius: "8px",
        },
        time: 3000, // 弹出时间/ms，默认3000毫秒
      });
    }
  }
});

// （一键登录方法）手动关闭授权页，可选，按需调用 
// window.uVerify.closePage();  

// （本机号码校验方法）获取本机号码校验的spToken 
window.uVerify.getPhoneNumberToken({
  key: "你的秘钥",  // 你的秘钥
  appkey: "你的appkey", // 你的appkey
}, (res) => {
  // res.code=600000表示成功
  console.warn('开发者接收-本机号码校验', res);
});

// 获取ukid，用于spToken调用换号接口时传入增加频控限制
// const ukid = window.uVerify.getVerifyId();

回调函数返回参数

{ 
  showMessage: boolean, // 是否弹出Toast提示框 
  messageContent: string, // 弹出内容 
  messageStyle: object, // 自定义弹窗样式 
  time: number // 弹出时间ms
}

授权页配置项

对应SDK配置项中的authPageOption各配置项。

{
  "element": "自定义节点",
  "style": "自定义样式",
  "js": "自定义交互"
}

privacyAlertConfig 二次弹窗相关配置