Appearance
快速接入
本文将介绍如何用最短的时间完成 PC 电子印章 SDK 的集成。
注意
以下文档内容中"{}"包含的变量信息均可从客户端凭证文件中获取,对接过程中需替换对应的值
环境要求
客户端
- 浏览器支持 Chrome90+
SDK 集成
步骤 1:租户开通
签署 SDK 使用需要用到亲笔签运营平台,需申请客户端凭证等相关信息,可由项目侧或者商务侧发起邮件申请,并给租户分配指定权限
步骤 2:获取 Token
通过步骤一得到的客户端凭证等相关信息可以调用能力平台的获取 Token 的接口来获取调用签署 SDK 所需的 token,详细 Token 获取接口调用流程见<服务端 API-获取 Token>接口 ↓
步骤 3:引入 SDK
经过步骤 1、2 准备工作已做好,现在可以在项目中使用电子印章 SDK 了,我们提供了以下常见的 Web/H5 项目对接方式的 demo 代码,您可以选择合适的代码集成
html
<html>
<head>
<script src="{SDK访问地址}/pc-sdk/Aos.js"></script>
</head>
<body>
<div id="sdk" style="width:100%;height:100%;"></div>
<script>
Aos.int({
selector: "#sdk",
type: "init",
idNumber: "500223199603224463",
realName: "某某某",
token: "xxxxx",
host: "{能力访问地址}/{渠道编码}-{应用编码}/aoscript-gateway",
headers: {
"X-AOS-Voucher": "{客户端凭证}"
}
});
</script>
</body>
</html>
参数描述
options
参数名称 | 参数类型 | 是否必传 | 参数描述 |
---|---|---|---|
selector | string | 是 | SDK 宿主容器选择器,支持#id、.class |
type | string | 是 | type 为 init 时,默认打开 SDK 首页, type 为 router 时配合 routerParam 参数进入指定界面 |
idNumber | string | 是 | 使用人证件号 |
realName | string | 是 | 使用人姓名 |
token | string | 是 | token 信息 |
routerParam | RouteParam | 否 | 路由信息(直接进入指定页面) |
callback | Callback | 否 | 页面按钮接管配置,优先级全局 |
baseInfo | BaseInfo | 否 | 基础信息(可选) |
apiUrl | string | 否 | API 基地址(如果不清楚修改造成的影响,尽量不要修改该值) |
sdkUrl | string | 否 | 签署,留样,人脸 SDK 基地址(如果不清楚修改造成的影响,尽量不要修改该值) |
RouteParam 参数配置描述
参数名称 | 参数类型 | 是否必传 | 参数描述 |
---|---|---|---|
path | Path | 是 | 页面访问地址,可选值见下枚举 Path |
param | Object | 否 | 页面访问地址 |
-- btns | Callback | 否 | 页面访问地址 |
blnCache | boolean | 否 | 是否缓存页面 |
blnTraceless | boolean | 否 | 是否无痕切换 |
blnRedirect | boolean | 否 | 是否切换到当前历史栈中已有路由,如果不存在则新增 |
- 结构示例
ts
// 路由配置
RouteParam = {
path?: Path
param?: { btns?: Callback, [x:string]: any}
/** 是否缓存页面 */
blnCache?: boolean
/** 是否无痕切换 */
blnTraceless?: boolean
/** 是否切换到当前历史栈中已有路由,如果不存在则新增 */
blnRedirect?: boolean
}
Path 支持的参数枚举
可选值 | 描述 |
---|---|
home-page | 首页 |
seal-apply | string |
apply-record-online | 印章申请-线上-申请记录 |
company-apply | 印章申请-企业申请 |
person-apply | 印章申请-个人申请 |
seal-submit | 印章申请-提交成功 |
apply-record-offline | 印章申请-线下-申请记录 |
seal-apply-offline | 印章申请-线下申请 |
seal-manage | 印章管理 |
seal-detail | 印章管理-印章详情 |
seal-authorization | 印章授权 |
authorization-relation | 印章授权-关系管理 |
authorization-complete | 印章授权-完成 |
seal-change | 印章变更 |
- 结构示例
ts
// 路由页面Path定义
Path =
"home-page" | //首页
"seal-apply" | //印章申请
"apply-record-online" | //印章申请_线上_申请记录
"company-apply" | //印章申请_公司申请
"person-apply" | // 印章申请_个人申请
"seal-submit" | //印章申请_提交成功
"apply-record-offline" | //印章申请_线下_申请记录
"seal-apply-offline" | //印章申请_线下申请
"seal-manage" | //印章管理
"seal-detail" | //印章管理_印章详情
"seal-authorization" | // 印章授权
"authorization-relation" | //印章授权_关系管理
"authorization-complete" | //印章授权_完成
"seal-change"; //印章变更
Btn 参数配置描述
参数名称 | 参数类型 | 是否必传 | 参数描述 |
---|---|---|---|
callback | Function | 否 | 按钮回调 |
blnShow | boolean | 否 | 是否显示按钮 |
name | string | 否 | 按钮名称 |
type | string | 否 | 操作类型(目前只有 replace 一种) |
- 示例结构
ts
// 按钮配置
Btn = boolean | {
callback?:(params:{ // 按钮回调
param?:any // 回调携带参数
router?:{push:(param:RouteParam)=>void} // SDK内部路由对象(可进行页面切换)
})=>void,
blnShow?:boolean // 是否显示按钮
name?:string // 按钮名称
type?:'replace' // 操作类型(目前只有replace一种)
}
ts
// 回调配置
Callback = {
/** 印章申请/企业申请 */
"seal-apply-company-apply": {
applySubmit: Btn
},
/** 线上申请/申请完成 */
"apply-online-submit": {
goHome: Btn, //返回首页
applyRecord: Btn //申请记录
},
/** 印章申请/线上申请记录 */
"apply-record-online": {
companyApply: Btn
},
/** 线下申请/印章申请记录 */
"unline-apply-records": {
back: Btn
},
/** 线下申请/信息审核 */
"unline-apply-info-check": {
goHome: Btn //返回首页
},
/** 授权完成页面 */
"seal-authorization-complete": {
goHome: Btn, //返回首页
againAuthorization: Btn //继续授权
},
/** 管理列表 */
"seal-manage-list": {
back: Btn //返回按钮
},
/** 授权列表 */
"seal-authorization-list": {
back: Btn //返回按钮
},
/** 印章详情 */
"seal-detail": {
back: Btn, //返回
renewal: Btn, //续期
updateSealPassword: Btn, //修改密码
changeSeal: Btn, //变更印章
cancel: Btn, //注销印章
enable: Btn, //启用
stop: Btn, //停用
addAuthorization: Btn //新增授权
}
};
BaseInfo 参数配置描述
参数名称 | 参数类型 | 是否必传 | 参数描述 |
---|---|---|---|
operator | Object | 否 | 经办人信息 |
-- name | string | 否 | 姓名 |
-- phone | string | 否 | 电话号码 |
-- cardNumber | string | 否 | 证件号 |
-- unit | string | 否 | 工作单位 |
legal | Object | 否 | 法人信息 |
-- name | string | 否 | 姓名 |
-- cardNumber | string | 否 | 证件号 |
-- phone | string | 否 | 电话号码 |
company | Object | 否 | 企业信息 |
-- name | string | 否 | 名称 |
-- creditCode | string | 否 | 社会统一信用代码 |
- 示例结构
ts
// 基础信息配置
BaseInfo = {
/** 经办人信息 */
operator?:{
/** 姓名 */
name?:string
/** 电话号码 */
phone?:string
/** 证件号 */
cardNumber?:string
/** 工作单位 */
unit?:string
},
/** 法人信息 */
legal?:{
/** 姓名 */
name?:string
/** 证件号 */
cardNumber?:string
/** 电话号码 */
phone?:string
}
/** 企业信息 */
company?:{
/** 名称 */
name?:string
/** 社会统一信用代码 */
creditCode?:string
}
}