一. 概述

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

二. 体验demo

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

三. 创建应用

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

四. 业务流程

1.流程图

2.流程说明

• 用户：使用业务方H5页面的终端客户。
• 业务方H5页面：用户手机浏览器等运行集成了创蓝闪验SDK_Web的页面程序。
• 业务方服务器：WEB网页对应的后台服务器。
• 创蓝闪验服务器：创蓝闪验的后台服务器。
• 运营商认证服务：手机卡对应的运营商的服务器。

3.流程概述

• 业务方H5页面，加载后调用初始化方法。
• 初始化成功后，在需要登录/注册的场景，由用户手动触发按钮，启动一键登录授权登录页，运营商校验成功后，展示授权页到web端。
• 当用户同意隐私政策并补填手机号码中间4位后，创蓝闪验SDK_Web调用运营商接口获取运营商token参数。
• 业务方H5页面将token等参数发送到业务方服务器，业务方服务器将token参数发送到闪验服务器，闪验服务器调用运营商接口验证token，验证成功时返回加密后的手机号给客户后台，客户后台收到校验结果后处理后续业务逻辑。

五. 集成SDK

• 在页面中引入创蓝闪验Web SDK的JS文件，2.0.0.3版本为例：

<script src="./shanyan2.0.0.3.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) {
    });

参数	类型	说明
setPageType	Boolean	设置页面登录模式，全屏：false，弹窗：true，不填默认全屏
setLoginTitle	string	页面标题
setLoginLogo	string	平台logo，尺寸建议：80x80
setPrivacyOne	[]	格式：['协议名称','链接地址']协议 1 名称，最多20个字符
setPrivacyTwo	[]	格式：['协议名称','链接地址']协议 2 名称，最多 20个字符

2. 初始化

2.1 初始化

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

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

参数	类型	说明
appId	字符串	创蓝闪验平台获取到的 appId
callback	函数	初始化回调监听函数，code:"000000"代表成功，其他代表失败

2.2电信初始化

Window.clshanyansdk.createCtcc(function(data){
})

参数	类型	说明
appId	字符串	创蓝闪验平台获取到的 appId
callback	函数	初始化回调监听函数，code:"000001"代表成功，其他代表失败 注意：状态码为“200000”时，代表电信获取token成功，会返回电信token

3. 启动授权页

3.1 联通与移动启动授权页

• 在需要启动一键登录的页面，调用此方法会启动SDK内部的授权页面。

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

参数	类型	说明
callback	函数	登录回调监听函数，code:"200000"代表成功，可获取置换手机号所需的token；其他状态码为失败注意：电信卡获取token的回调会从初始化返回

3.2 电信启动授权页

• 您的页面中必须有一个 id 为 j-get-code 的按钮，对其进行监听来执行启动授权页函数，不支持自主触发。
• 需要与初始化在同一界面调用，否则电信卡可能会启动不了授权页
• 启动结果会在2.2调用的createCtcc方法中返回， 注意：状态码为“200000”时，代表电信获取token成功，会返回电信token

4. 置换手机号

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

5. 其他api

5.1 日志开关

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

Window.clshanyansdk.setLog(false)

七. 返回码

返回码	返回码描述
000000	联通与移动初始化成功
000001	电信初始化成功
000400	初始化失败
000500	自定义配置失败，协议长度不能超过二十字符
000510	参数错误
000520	appId必传
000600	Sdk加载失败
000700	自定义配置成功
200000	获取token成功