Web SDK 集成文档
一. 概述
- 本文是闪验SDK_Web的接入文档,用于指导WEB应用开发人员接入,并详细描述接入流程和使用方法,默认读者已经具有一定的编程知识基础。
二. 体验demo
- 我们提供了一个 web 页面的【demo示例】,通过示例可以体验闪验H5的基本用法。
三. 创建应用
- 开发者使用账号登录创蓝智能云平台 (www.chuanglan.com ),进入控制台页面创建应用。填写应用基本信息、登录页面地址和域名地址后提交,等待闪验运营人员审核。
- 审核通过后,开发者可以在应用详情中获取到应用的appId和appKey,后续集成对接中会使用。
四. 业务流程
1.流程图
2.流程说明
-
用户:使用业务方H5页面的终端客户。
-
业务方H5页面:用户手机浏览器等运行集成了闪验SDK_Web的页面程序。
-
业务方服务器:WEB网页对应的后台服务器。
-
闪验服务器:闪验的后台服务器。
-
运营商认证服务:手机卡对应的运营商的服务器。
3.流程概述
-
业务方H5页面,加载后调用初始化方法。
-
初始化成功后,在需要登录/注册的场景,由用户手动触发按钮,启动一键登录授权登录页,运营商校验成功后,展示授权页到web端。
-
当用户同意隐私政策并补填手机号码中间4位后,闪验SDK_Web调用运营商接口获取运营商token参数。
-
业务方H5页面将token等参数发送到业务方服务器,业务方服务器将token参数发送到闪验服务器,闪验服务器调用运营商接口验证token,验证成功时返回加密后的手机号给客户后台,客户后台收到校验结果后处理后续业务逻辑。
五. 集成SDK
- 在页面中引入闪验Web SDK的JS文件:
<script src="./shanyan2.0.0.1.min.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. 初始化
- 在调用其他API之前调用,建议在H5页面加载完成时调用。
- 建议至少在启动授权页前提前3秒调用,否则可能会因为初始化未完成而失败。
【 方法调用说明 】
Window.clshanyansdk.Init({appId},function(data){
})
【 参数说明 】
参数 | 类型 | 说明 |
---|---|---|
appId | 字符串 | 闪验平台获取到的 appId |
callback | 函数 | 初始化回调监听函数,code:"000000"代表成功,其他代表失败 |
2. 界面配置
- SDK内置有默认界面配置,建议使用默认配置,降低开发及适配难度。
- 如确需修改界面配置,可以通过SDK对外提供的setUIConfig方法配置。
- 目前修改页面标题、应用logo,隐私协议等属性,开发者可选择修改其中一项或多项进行配置。
- 该配置仅对移动、联通卡立即生效,电信配置需要发对接人员报备,运营商审核通过后方可生效。`
2.1 全屏模式
2.2 弹窗模式
2.3 配置说明
- 页面标题:支持配置文案,限制10字以内,默认显示“本机号码登录”,默认水平居中显示。(仅支持全屏模式下)
- 应用logo:支持配置应用logo,默认水平居中显示
- 服务协议:在运营商协议后,支持增加配置协议。最多新增2个,总限制20字以内,默认水平居中显示
注意:该配置仅对移动、联通卡立即生效,电信配置需要发对接人员报备,运营商审核通过后方可生效。
【 方法调用说明 】
config={
setPageType,
setLoginTitle,
setLoginLogo,
setPrivacyOne,
setPrivacyTwo,
}
Window.clshanyansdk.setUiConfig((config,function(data){
}))
【 config参数说明 】
参数 | 类型 | 说明 |
---|---|---|
setPageType | string | 设置页面登录模式,全屏:full,弹窗:dialog,不填默认全屏 |
setLoginTitle | string | 页面标题 |
setLoginLogo | string | 平台logo,尺寸建议:80x80 |
setPrivacyOne | [] | 格式:['协议名称','链接地址']协议 1 名称,最多20个字符 |
setPrivacyTwo | [] | 格式:['协议名称','链接地址']协议 2 名称,最多 20个字符 |
3. 启动授权页
- 在需要启动一键登录的页面,调用此方法会启动SDK内部的授权页面。
- 您的页面中必须有一个 id 为 j-get-code 的按钮,对其进行监听来执行启动授权页函数,不支持自主触发。
【 方法调用说明 】
Window.clshanyansdk.start({appId},function(data){}
【 参数说明 】
参数 | 类型 | 说明 |
---|---|---|
appId | 字符串 | 闪验平台获取到的 appId |
callback | 函数 | 登录回调监听函数,code:"200000"代表成功,可获取置换手机号所需的token;其他状态码为失败 |
4. 置换手机号
- 补填中间4位手机号后,当code为200000时,启动授权页回调函数会返回置换手机号所需的 token。请参考「服务端」文档来实现置换手机号码的步骤。
七. 返回码
返回码 | 返回码描述 |
---|---|
000000 | 初始化成功 |
000400 | 初始化失败 |
000500 | 自定义配置失败,协议长度不能超过二十 |
000510 | 参数错误 |
000520 | appId必传 |
000600 | Sdk加载失败 |
000700 | 自定义配置成功 |
200000 | 获取token成功 |