提示

获取 code 请参考 UI 鉴权

UI 接入 ​

预装版 UI 把生成、编辑和下载页面整体嵌入接入方产品。服务端负责获取 code，前端只负责创建 iframe 和处理消息。

五步打开预装版 UI ​

步骤接入方动作成功标准
1服务端调用 /api/grant/code 获取 code返回 code、api_key、uid 和有效期
2前端准备 iframe 容器容器有明确宽高，页面无横向异常滚动
3引入 iframe SDK页面存在 window.AipptIframe
4调用 AipptIframe.showiframe 成功加载预装版 UI
5实现 onMessage可以接收保存、下载、错误等关键事件

示例范围 ​

最小接入包括获取 code、引入 SDK、创建 iframe、处理初始化错误和销毁 iframe。功能板块、默认页面、场景鉴权、自定义创建和下载模式见 UI 配置。

默认入口和自定义创建的差别见 业务流程图；先确定用户从作品列表、生成页还是编辑器开始操作。

写初始化代码前检查 ​

检查项要求
开放平台凭证已获取 App Key 和 Secret Key
授权凭证服务端已按 UI 鉴权 获取 code
页面容器前端页面已准备 iframe 挂载容器
安全配置页面不能设置 referrer=no-referrer
事件处理如需感知生成、保存、下载等行为，需实现 onMessage 并阅读 事件通知

引入 iframe SDK ​

js
<script src="https://api-static.aippt.cn/aippt-iframe-sdk.js"></script>

保留 referrer

鉴权初始化需要正常的 referrer 信息。宿主页面设置以下标签后，iframe 会初始化失败：

html
 <meta name="referrer" content="no-referrer">

创建 iframe ​

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AiPPT</title>
  <script src="https://api-static.aippt.cn/aippt-iframe-sdk.js"></script>
  <style>
    #container {
      width: 100vw;
      height: 90vh;
    }
  </style>
</head>

<body>
  <button id="del">删除iframe</button>
  <div id="container"></div>
  <script>
    (async () => {
      try {
        await AipptIframe.show({
          appkey: '',
          channel: '根据调用鉴权功能，获取code接口的channel传参保持一致',
          code: '',
          container: document.getElementById('container'),
          editorModel: true,
          onMessage(eventType, data) {
            console.log(eventType, data)
          }
        })
      } catch (e) {
        /*
          如果初始化code信息失效，请在此处捕捉错误信息
          e: {
            code: number
            data: null
            msg: string | "code已过期"
          }
        */

      }
    })()

    const del = document.getElementById('del');
    del.addEventListener('click', () => {
      AipptIframe.deleteIframe();
    })
  </script>
</body>

</html>

初始化参数边界 ​

参数必填说明
appkey是开放平台分配的 App Key
code是接入方服务端通过 /api/grant/code 获取的授权 code
channel建议传入应与获取 code 时的 channel 保持一致
container是iframe 挂载 DOM 节点
onMessage建议实现接收 iframe 内的保存、下载、错误、鉴权等事件
editorModel按需控制是否进入编辑相关模式，具体能力以 UI 配置 为准

Secret Key、签名计算和 /api/grant/code 请求必须留在服务端，前端只接收业务服务端返回的 code。

用四个结果判断接入完成 ​

  1. 页面能成功加载 AiPPT iframe。
  2. code 过期或无效时，前端能捕获错误并提示重新获取。
  3. 用户能进入预期页面，例如作品列表、AI 任务生成页或编辑 PPT 页面。
  4. 需要业务联动时，接入方能通过 onMessage 收到关键事件。

按需要补充配置和事件 ​

  • 阅读 业务流程图，确认默认进入、UI 自定义创建或 API 自定义创建的入口选择。
  • 阅读 UI 配置，配置功能板块、下载、场景鉴权和路由。
  • 阅读 事件通知，处理 iframe 内部行为通知。
  • 阅读 事件推送，配置保存 PPT 等推送回调。