资源工坊

网页组件SDK鉴权 ​

通过在你的网页中引入WPS网页组件，可在你的网页中使用WPS相关功能。

TIP

  • 网页组件只适用于自建应用，定制应用请参阅人员选择器组件
  • 网页组件适用于普通web网页

接入流程 ​

主要介绍，如何将使用OpenSDK将以开放的网页组件，集成到业务系统中使用;本文档默认已经创建开放平台应用.

1. 申请权限 ​

网页组件需要对应的scope权限，具体权限，每个组件都有不同，按照文档指引操作 开发者后台待定，以实际表现为准

2. 获取jsapi_ticket ​

三方服务端对接

typescript
GET /o/oauth/v1/js_api_ticket
header：
    - Wps-Docs-Authorization // WPS4签名
    - Wps-Docs-Date
200: {
    "code": 0,
    "detail": "",
    "msg": "",
    "data": {
        "js_api_ticket": "jsYWQ91qMICxQwNrc08blEvCuh3g6PQL1nApgJREkxyidr7/KeAJ2D1LwB3MgtX4ge+yn7nkkH93ZVuC6oh8ZXPgc4d/dPHljsQYatOGzrw=", (sk加密)
        "expiration": 1692354769 // 过期时间戳
    }
}

3. 生成signature ​

签名规则如下 a. 参与签名的字段包括noncestr，timestamp，ticket, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string。 b. 对string作HmacSHA256加密。 注意：所有参数名均为小写字符。字段名和字段值都采用原始值，不进行URL 转义

typescript
const message = `noncestr=${noncestr}&ticket=${jsApiTicket}&timestamp=${timestamp}&url=${url}`;
const signature = CryptoJS.HmacSHA256(message, sk).toString(); // sk为应用SK

4. 完成网页组件配置 ​

  1. 引入opensdk
typescript
<!--在网页 html 中-->
<body>...</body>
<!-- 引入umd资源 base为云文档域名+webpath -->
<script src="${base}/c/ecissdk/open/index.umd.js"></script>
  1. 按需引入网页组件
typescript
<!-- 需要用到的前端组件 -->
<script src="${base}/c/directorychooser/index.umd.js"></script>
  1. 配置鉴权
typescript
//SDK 鉴权
async function renderWebComponent({
  app_id,
  open_id,
  signature,
  noncestr,
  timestamp,
}) {
  const url = location.href.split("?")[0];
  const scopes = ["kso.contact.read", "kso.doclib.read"];
  await window.OpenSDK.config({
    openId: open_id, // 当前登录用户的open id，要确保与生成signature使用的user_access_token相对应
    signature, // 签名
    appId: app_id, // 应用 appId，在Step1中获得的应用appId
    timestamp, // 时间戳（毫秒）
    nonceStr: noncestr, // 随机字符串
    scopes,
    url, //url不包含动态 query、hash 部分，参数不参与校验
  });
}
  1. 渲染组件
typescript
//SDK 鉴权，渲染组件
async function renderWebComponent({
  app_id,
  open_id,
  signature,
  noncestr,
  timestamp,
}) {
  const url = location.href.split("?")[0];
  const scopes = ["kso.contact.read", "kso.doclib.read"];
  await window.OpenSDK.config({
    openId: open_id, // 当前登录用户的open id，要确保与生成signature使用的user_access_token相对应
    signature, // 签名，由第三方服务端申请jsapi_ticket后按规则要求生成
    appId: app_id, // appId
    timestamp, // 时间戳（毫秒）
    nonceStr: noncestr, // 随机字符串
    scopes,
    url,
  });

  // 创建一个finder组件, 接受注册的组件名，config, 钩子函数
  const finder = window.OpenSDK.create(
    "finder",
    {
      list: [],
    },
    {
      onBeforeCreate() {},
      onAfterCreate(instance: ComponentInstance) {},
    }
  );
  // 挂在到业务系统中，指定节点
  finder.mount(document.getElementById("finder-container"));
}