亲笔签SDK在线文档

Appearance

大纲

快速接入 ​

本文将介绍如何用最短的时间完成配置签署位 SDK 的集成。

注意

以下文档内容中"{}"包含的变量信息均可从客户端凭证文件中获取，对接过程中需替换对应的值

环境要求 ​

服务端 ​

  • 非私有化部署的情况业务方服务器需支持外网访问，了解原因

客户端 ​

  • 浏览器支持 Chrome49+

SDK 集成 ​

步骤 1：租户开通 ​

签署 SDK 使用需要用到亲笔签运营平台，需申请客户端凭证等相关信息，可由项目侧或者商务侧发起邮件申请，并给租户分配指定权限

步骤 2：获取 Token ​

通过步骤一得到的客户端凭证等相关信息可以调用能力平台的获取 Token 的接口来获取调用签署 SDK 所需的 token，详细 Token 获取接口调用流程见<服务端 API-获取 Token>接口 ↓

步骤 3：引入 SDK ​

经过步骤 1、2 准备工作已做好，现在可以在项目中使用配置签署位 SDK 了，我们提供了以下几种常见的 Web/H5 项目对接方式的 demo 代码，您可以选择合适的代码集成

html
<script src="{SDK访问地址}/sign-config-v2/help.js"></script>
<script>
  const help = new SignConfigHelp({
    options: {
      files: [{
        name: ''; //文件名称
        currentFileId： '';//文件ID
        position:[]
      }],
      signers: [{
        id: '111'
        Signatory:'签署主体', //签署主体
        role:'签署方',//签署方
        name: "签署人姓名" //签署人姓名
        phone:'13800000000', //手机号
        companyName:'企业名称', //企业名称
        color: '#efefef'
      }],
      service: {
        apiConfig: {
          host: "{能力访问地址}/{渠道编码}-{应用编码}/aoscript-gateway",
          headers: {
            "X-AOS-Voucher": "{客户端凭证}"
          }
        },
        token: ''
      },
      sealCodeTypes: [{
        label: "印章名称",
        code: "印章code"
      }],
    },
    target: document.body,
    url: '{SDK访问地址}/sign-config-v2/index.html',
  })

  help.on('onSubmitSuccess', function (data) {
    console.log('onSubmitSuccess', data)
  })
  help.on('onCloseFrame', function () {
    console.log('onCloseFrame')
  })
  help.on('onInitSuccess',()=>{
    console.log('onInitSuccess')
  })
  help.on('onSave',(data)=>{
    console.log('onSave', data)
  })
  help.on("onAutoSave",(data)=>{
    console.log('onAutoSave',data)
  })
</script>

步骤 4：唤起 SDK ​

实例化完成后会自动在target元素下创建配置签署SDK的UI界面

  • 如下图所示

可在顶部区域选择需要配置的组件，右侧区域可以配置具体组件的属性

步骤 5：配置完成 ​

按自行要求完成传入文件的签署位配置后，点击右上方立即发起按钮即可，监听onSave事件即可获取到已经配置好的签署位数据，可直接使用到签署SDK中

参数类型 ​

SignConfigHelp ​

参数字段参数类型是否必填参数描述
targetHTMLElement否配置签署位容器，默认 Body
urlstring是配置签署位服务地址
optionsIOptions是签署位配置参数

IOptions ​

参数字段参数类型是否必填参数描述
filesIFiles是配置签署位的文件列表
serviceIService是签署服务配置
signersISigner否签署人列表
permissionIPermission否权限
currentIndexnumber否当前选中文件 index
sealCodeTypesISealCodeProps否印章列表

IFiles 配置签署位的文件列表 ​

参数字段参数类型是否必填参数描述
namestring是文件名称
currentFileIdstring否文件 ID
sealArray<IPosition>否印章
signArray<IPosition>否签字
fingerArray<IPosition>否指纹
signFingerArray<IPosition>否签字+指纹
pagingSealArray<IPosition>否骑缝章
positionArray<IPosition>否签署位集和

IPosition 基础组件类型 ​

参数字段参数类型是否必填参数描述
idnumber是签署位唯一标识符
xnumber是签署位 X 坐标
ynumber是签署位 Y 坐标
widthnumber是签署位宽度
heightnumber是签署位高度
pagenumber是签署位所在页数
requiredboolean否是否必签
signerIdboolean否签署人 id
namestring是当前签署位名称
positionTypestring是组件类型 1 印章，2 签字，4 文本，5 指纹，6 日期，7 签字指纹，100 单行， 101 多行， 102 数字，103 身份证，104 日期可选日历，105 下拉，106 多选，107 勾选 108 单选框 109 骑缝章
extExtOption否额外参数

ExtOption 额外参数 ​

参数字段参数类型是否必填参数描述
fontSizenumber否字体大小
weightboolean否是否加粗
colornumber否字体颜色
italicboolean否是否斜体
underlineboolean否是否有下划线
alignstring否行内对齐 "CENTER" | "LEFT" | "RIGHT"
lineAlignstring否行对齐 "TOP" | "CENTER" | "BOTTOM"
maxLengthnumber否单行最大长度
maxLinenumber否最大行数
optionsArray<IOption>否下拉选项列表
optionIOption否勾选内容
bottomTipstring否提示文案
sealTypeCodesstring[]否印章 code 集和
relateIdstring否集合 Id

IOption 下拉内容 ​

参数字段参数类型是否必填参数描述
keystring是唯一标识符
labelstring是下拉内容

ISigner 签署人列表 ​

参数字段参数类型是否必填参数描述
idstring否
Signatorystring是签署主体
companyNamestring否企业名称
rolenumber否签署方
namestring是签署人姓名
phonestring否手机号
colorstring否签署人颜色

IService 基础服务配置 ​

参数字段参数类型是否必填参数描述
apiConfigIApiConfig否Api 配置
tokenstring否Token

IApiConfig 基础服务配置 ​

参数字段参数类型是否必填参数描述
envstring否访问环境,可选'dev'|'develop'|'standard'|'open'
hoststring否访问接口根地址
headersobject否自定义请求头

IPermission 权限配置 ​

参数字段参数类型是否必填参数描述默认值
positionsIPositionsPermission否显示签署人管理"{sign：true,seal:true,finger:true}"
operateIOperate否显示返回

IPositionsPermission 组件权限 ​

参数字段参数类型是否必填参数描述默认值
signboolean否签字位true
sealboolean否印章true
fingerboolean否指纹true
signFingerboolean否签字指纹无
pagingSealboolean否骑缝章无
inputboolean否单行文本无
textareaboolean否多行文本无
dateboolean否日期无
inputNumberboolean否数字无
idcardboolean否身份证无
radioboolean否单选框无
checksboolean否复选框无
selectboolean否下拉选择无
singleCheckboolean否勾选无

IOperate 显示的操作按钮 默认全都显示 ​

参数字段参数类型是否必填参数描述默认值
nameboolean否是否展示组件名称选项true
pageboolean否是否展示应用页true
isRequiredboolean否是否展示必填选项true
autoTimeboolean否是否展示自动签署日期true
sealCodesboolean否是否选择印章类型true
backboolean否是否显示返回true
saveboolean否是否显示保存true
submitboolean否是否显示立即发起true
formatboolean否是否可选日期格式true

实例 ​

SignConfigHelp (Class) ​

示例代码

js
const help = new SignConfigHelp({
  options: {
    files: [{
      name: "文件3"; //文件名称
      currentFileId： "200754440742189063";//文件ID
    }],
    service: {
      apiConfig: {
        env: 'dev'|'develop'|'standard'|'open',
        host: string
      },
      token: string
    },
    permission: {
      positions: {
          sign: true,
          seal: true,
          finger: true,
          signFinger: true,
          date: true,
          input: true,
          pagingSeal: true,
          radio: true,
          inputNumber: true,
          idcard: true,
          checks: true,
          select: true,
          singleCheck: true,
          textarea: true,
      },
    },
  },
  target: document.getElementById('sign')|| document.body,
  url: url+'/index.html',
})

实例 / 事件 ​

onSubmitSuccess ​

js
// 配置完成按钮点击事件
help.on("onSubmitSuccess", data => {
  console.log("onSubmitSuccess", data);
});

onCloseFrame ​

js
// 返回按钮点击事件
help.on("onCloseFrame", () => {
  console.log(87, "onCloseFrame");
});

onAutoSave ​

js
//定时自动保存
help.on("onAutoSave", data => {
  console.log("onAutoSave", data);
});

onInitSuccess ​

js
//初始化完成事件
help.on("onInitSuccess", () => {
  //
});

实例 / 方法 ​

getSignData ​

js
//获取完整数据接口
help.getSignData().then((res: IFiles[]) => {
  console.log(res);
});

Copyright © 2019-present Aoscript