Skip to content
大纲

快速接入

本文将介绍如何用最短的时间完成 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

参数名称参数类型是否必传参数描述
selectorstringSDK 宿主容器选择器,支持#id、.class
typestringtype 为 init 时,默认打开 SDK 首页,
type 为 router 时配合 routerParam 参数进入指定界面
idNumberstring使用人证件号
realNamestring使用人姓名
tokenstringtoken 信息
routerParamRouteParam路由信息(直接进入指定页面)
callbackCallback页面按钮接管配置,优先级全局
baseInfoBaseInfo基础信息(可选)
apiUrlstringAPI 基地址(如果不清楚修改造成的影响,尽量不要修改该值)
sdkUrlstring签署,留样,人脸 SDK 基地址(如果不清楚修改造成的影响,尽量不要修改该值)

RouteParam 参数配置描述

参数名称参数类型是否必传参数描述
pathPath页面访问地址,可选值见下枚举 Path
paramObject页面访问地址
-- btnsCallback页面访问地址
blnCacheboolean是否缓存页面
blnTracelessboolean是否无痕切换
blnRedirectboolean是否切换到当前历史栈中已有路由,如果不存在则新增
  • 结构示例
ts
// 路由配置
RouteParam = {
    path?: Path
    param?: { btns?: Callback, [x:string]: any}
    /** 是否缓存页面 */
    blnCache?: boolean
    /** 是否无痕切换 */
    blnTraceless?: boolean
    /** 是否切换到当前历史栈中已有路由,如果不存在则新增 */
    blnRedirect?: boolean
  }

Path 支持的参数枚举

可选值描述
home-page首页
seal-applystring
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 参数配置描述

参数名称参数类型是否必传参数描述
callbackFunction按钮回调
blnShowboolean是否显示按钮
namestring按钮名称
typestring操作类型(目前只有 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 参数配置描述

参数名称参数类型是否必传参数描述
operatorObject经办人信息
-- namestring姓名
-- phonestring电话号码
-- cardNumberstring证件号
-- unitstring工作单位
legalObject法人信息
-- namestring姓名
-- cardNumberstring证件号
-- phonestring电话号码
companyObject企业信息
-- namestring名称
-- creditCodestring社会统一信用代码
  • 示例结构
ts
// 基础信息配置
BaseInfo = {
  /** 经办人信息 */
  operator?:{
    /** 姓名 */
    name?:string
    /** 电话号码 */
    phone?:string
    /** 证件号 */
    cardNumber?:string
    /** 工作单位 */
    unit?:string
  },
  /** 法人信息 */
  legal?:{
    /** 姓名 */
    name?:string
    /** 证件号 */
    cardNumber?:string
    /** 电话号码 */
    phone?:string
  }
  /** 企业信息 */
  company?:{
    /** 名称 */
    name?:string
    /** 社会统一信用代码 */
    creditCode?:string
  }
}