一.准备工作

注意：本文是H5 集成文档V3.X，请下载【最新版SDK】。

概述

• 本文是创蓝闪验H5的接入文档，用于指导WEB应用开发人员接入，并详细描述接入流程和使用方法，默认读者已经具有一定的编程知识基础。

能力介绍

一键登录：SDK获取当前流量卡对应的token，通过服务端可置换当前流量卡的手机号码。

本机校验：SDK获取当前流量卡对应的token，提供手机号码，通过服务端可校验提供的手机号是否为当前流量卡的手机号码。

注意：本机校验和一键登录是两个单独的能力，两者的token不能互用，否则会报"应用能力不匹配"，请根据需求选择对应能力。

前置条件

• H5版本仅支持单蜂窝数据网络取号，WiFi连接的情况下会失败。
• 目前安卓和鸿蒙端微信浏览器、谷歌浏览器、Edge浏览器有反馈取号失败的情况，建议使用系统自带浏览器，苹果端没有影响。

注意：三网运营商内部执行逻辑不同，必须分别使用三网运营商的卡进行测试，防止功能异常

创建应用

• 开发者使用账号登录创蓝智能云平台 (www.chuanglan.com )，参考【账号创建】中H5相关信息说明，填写信息创建应用。（注意：登录页地址和域名必须按照说明填写，否则会报referer校验不通过的错误）
• 审核通过后，开发者可以在应用详情中获取到应用的appId和appKey，后续集成对接中会使用。

体验demo

• 我们提供了一个 web 页面的【demo示例】，通过示例可以体验创蓝闪验H5的基本用法。
• 测试需要注意，同一号码有输入错误次数限制：
  • 移动：同一号码输入错误三次就会被锁定24小时；
  • 电信：同一号码24小时内总验证次数超过20次或连续输入错误次数超过3次。
  • 联通：同一号码10分钟内总验证次数超过30次；

二. 业务流程

1.流程图

2.流程说明

• 用户：使用业务方H5页面的终端客户。

• 业务方H5页面：用户手机浏览器等运行集成了创蓝闪验SDK_Web的页面程序。

• 业务方服务器：WEB网页对应的后台服务器。

• 创蓝闪验服务器：创蓝闪验的后台服务器。

• 运营商认证服务：手机卡对应的运营商的服务器。

3.流程概述

• 业务方H5页面，加载后调用初始化方法。

• 初始化成功后，在需要登录/注册的场景，由用户手动触发按钮，启动一键登录授权登录页，运营商校验成功后，展示授权页到web端。

• 当用户同意隐私政策并补填手机号码中间4位后，创蓝闪验SDK_Web调用运营商接口获取运营商token参数。

• 业务方H5页面将token等参数发送到业务方服务器，业务方服务器将token参数发送到闪验服务器，闪验服务器调用运营商接口验证token，验证成功时返回加密后的手机号给业务方服务器，业务方服务器收到号码即可进行后续业务逻辑。

4. 集成SDK

• 在页面中引入创蓝闪验Web SDK的JS文件与CSS文件，以V3.0.0.0版本为例：

<script src="./shanyan3.0.0.0.js"></script>
<meta content=”always” name=”referrer”>
<link rel="stylesheet" type="text/css" 	
  href="https://www.cmpassport.com/h5/js/jssdk_auth/css/ydrz-layer.css" />

三.一键登录API

1. 界面配置（可选方法）

• 该方法为可选方法，SDK内置有默认界面配置，可以使用默认配置，降低开发及适配难度。
• 如确需修改界面配置，须在初始化之前通过setUIConfig方法配置。
• 支持授权页面弹窗/全屏模式、标题、应用logo，隐私协议等属性修改，开发者可选择修改其中一项或多项进行配置。

注意：授权页面弹窗/全屏模式三网均可通过api修改。标题、应用logo，隐私协议仅移动、联通支持通过api修改，电信需要发对接人员报备，运营商审核通过后方可生效。

1.1 全屏模式

1.2 弹窗模式

1.3 配置说明

• 页面标题：支持配置文案，限制10字以内，默认显示“本机号码登录”，默认水平居中显示。（仅支持全屏模式下）
• 应用logo：支持配置应用logo，默认水平居中显示
• 服务协议：在运营商协议后，支持增加配置协议。最多新增2个，总限制20字以内，默认水平居中显示

【 方法调用说明 】

config={
setPageType,
setLoginTitle,
setLoginLogo,
setPrivacyOne,
setPrivacyTwo,
}
window.clshanyansdk.setUIConfig(config, function (data) {
    });

【 config参数说明 】

1.4 非标准弹框配置

• 此配置是针对移动授权页错位问题的配置 若使用默认配置没有问题不用关注
• 将以下配置项放入setUIConfig的config中，所有配置项都是可选的

2. 初始化

• 需要在启动授权页前调用，建议在H5页面加载完成时调用。
• 建议至少在启动授权页前提前3秒调用，否则可能会因为初始化未完成而失败。

【 方法调用说明 】

window.clshanyansdk.Init({appId},function(data){
})

【 参数说明 】

3. 启动授权页

• 在需要启动一键登录的页面，调用此方法会启动SDK内部的授权页面。
• 此方法需要使用纯蜂窝数据流量网络请求，建议提示用户关闭WiFi以提高成功率。
• 此方法会调用运营商网关鉴权，需要 1~3s 的时间，建议添加loading提高用户体验。 注意：请勿将图片的 pointer-events设置为none!!!

【 方法调用说明 】

window.clshanyansdk.start(function(data){
  
})

【 参数说明 】

4. 置换手机号

• 补填中间4位手机号后，当code为200000时，启动授权页回调函数会返回置换手机号所需的 token。请参考「服务端」文档来实现置换手机号码的步骤。

5. 其他api

5.1 日志开关

• 默认开启，需要关闭时调用

【 方法调用说明 】

window.clshanyansdk.setLog(false)

5.2 获取网络格式

注意：此方法为可选方法，如若使用必须放在初始化成功之后调用。此方法存在兼容性问题，尤其在iOS系统netType基本都返回unknown，结果仅供参考。

window.clshanyansdk.getConnection(function(data){
})

【 参数说明 】

返回字段

四.本机校验API

注意： 当前本机校验仅支持移动与联通手机号，如有电信需求请向运营人员申请

1.初始化

同一键登录初始化

2.获取token

注： 一定要等初始化成功后调用

window.clshanyansdk.getToken(function(data){
})

【 参数说明 】

五. 返回码

更多返回码请查看官网[返回码]文档