快速接入 ​

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

环境要求 ​

服务端 ​

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

客户端 ​

• 浏览器支持IE11+、Chrome49+

SDK 集成 ​

步骤 1：租户开通 ​

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

步骤 2：获取Token ​

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

步骤 3：引入 SDK ​

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

<script src="{SDK访问地址}/sdk/umd/isigning.min.js"></script>
<script>
  var aos = window.axLib.AosSign({
    host: "{能力访问地址}/{渠道编码}-{应用编码}/aoscript-gateway",
    headers: {
      "X-AOS-Voucher": "{客户端凭证}"
    }
  });
  // 设置token，获取方式见上
  aos.setToken('b1cea9ea-0eaf-4f28-82b7-a1e362be8e31');

  function upload(input) {
    var files = Array.prototype.slice.apply(input.files).map(file => ({file}))
    // 发起签署 详细参数见客户端API-startSign方法
    aos.startSign({
      files: files,
      isFree: true,
      thirdBizId: 'xxx',
    });
  }
</script>
<p>本地上传待签署文件，支持上传多份文件</p>
<input type="file" name="" multiple accept="application/pdf" onchange="upload(this)" id="">

步骤 4：签署文件准备 ​

SDK支持的文件传递方式

1、文件流

• 如果是本地上传的文件，直接获取File对象传入即可 通过传递file字段

见demo示例代码

• 如果文件在服务器上，可通过自行的下载接口获取文件流，并new File对象来传入SDK中，简易示例如下

fetch('下载接口').then(res => res.blob()).then(res => new File(res, '文件名'))

2、文件ID

• 可以通过文件上传接口把文件上传到服务端，并用返回的文件ID传递到SDK的currentFileId字段

3、URL

• 可通过传递url字段，发起签署

步骤 5：唤起 SDK ​

通过调用签署SDK实例提供的startSign方法可以唤起签署SDK的UI界面了

• PC端UI如下图所示

• H5端UI如下图所示

步骤 6：文件签署 ​

用户可以在签署页面进行签署操作，目前SDK支持自由签署和固定位置签署两种模式

模式一：固定位置签署 ​

在开始签署时指定一个或者多个签署位的类型、页数、坐标等信息，用户只能在指定位置完成指定类型的签署操作。

了解详细配置

模式二：自由签署 ​

配置了自由签署类型，用户可以自由的在页面任一位置选择签署，签署完成后，签署图片会渲染到用户指定的位置

了解详细配置的isFree字段

步骤 7：获取签署后的文件 ​

获取签署后的文件，系统提供了两种方式，如下：

方式一：后台推送 ​

该方式需要业务方提供一个文件推送的接口，配置到亲笔签系统中，在签署完成后，亲笔签方会调用业务方的推送接口推送签署后的文件。推送接口规范见此

方式二：主动下载 ​

签署完成后，JS-SDK会触发onSubmitSuccess事件或者asyncSubmitComplete事件，具体触发事件取决于业务方使用的是同步签署还是异步签署（详细了解配置的isAsyncSubmit字段）。业务方可以通过事件监听获取到签署后的文件。

事件监听获取文件ID示例代码如下：

// 同步签署
aos.event.on('onSubmitSuccess', options => {
  // 签署成功执行回调
  const { signId, thirdBizId, files, sourceFileList, fileMd5List } = options
})

// 异步签署
aos.event.on('asyncSubmitComplete', options => {
  // 异步签署成功执行回调
  const { signId, thirdBizId, files, sourceFileList, fileMd5List } = options
})

步骤 7：查看已签署文件 ​

查看签署后的文件可以由业务方自己实现，或者直接通过本地的WPS、OFFICE等软件完成预览。当然系统也提供了文件预览API通过文件ID即可预览签署后的文件。

相关文档 ​

• SDK API 手册
• SDK 更新日志
• 常见问题