快速开始

在开始接入前，你需要先完成授权。

素材组选择器的链接通过 iframe 嵌入你的系统，你的代码和组件会基于 postMessage 来进行通信交互数据。

素材组选择器链接是：{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey 加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/material_group_selector)}。参照授权。

其中 domain 为客户内容中台（DAM）的域名。

原生
React

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>素材组选择器父页面</title>
  </head>
  <body>
    <script>
      const receiveMessage = (event) => {
        const iframe = document.getElementById('iframe');
        if (!iframe || event.source !== iframe.contentWindow) {
          // 判断是否为当前iframe发出的消息
          return;
        }

        if (event?.data?.type === 'tezign-asset-group-selector-ready') {
          // iframe 页面加载完成，可以传入配置参数
          if (!iframe.contentWindow) {
            return;
          }

          iframe.contentWindow.postMessage(
            {
              type: 'tezign-asset-group-selector-config',
              data: {
                rootSelectable: true,
              },
            },
            '*',
          );
          return;
        }
        if (event?.data?.type === 'tezign-asset-group-selector-confirm') {
          // 点击【确认】 按钮 -- 这里接收已选择的素材组集合
          console.log(event.data);
          return;
        }
        if (event?.data?.type === 'tezign-asset-group-selector-cancel') {
          // 点击【取消】 按钮
          console.log(event.data);
          return;
        }
      };
      window.addEventListener('message', receiveMessage, false);
    </script>
    <iframe src=`{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey
    加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/material_group_selector)}`
    id="iframe" />
  </body>
</html>

import React, { useEffect, useRef } from 'react';

// 此iframeUrl 填入素材组选择器链接
const iframeUrl = `{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey 加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/material_group_selector)}`;

export default function App() {
  const ref = useRef(null);

  const receiveMessage = (event) => {
    if (!ref.current || ref.current !== event.source) {
      // 判断是否为当前iframe发出的消息
      return;
    }

    iframe.contentWindow.postMessage(
      {
        type: 'tezign-asset-group-selector-config',
        data: {
          rootSelectable: true,
        },
      },
      '*',
    );
    if (event?.data?.type === 'tezign-asset-group-selector-confirm') {
      // 点击【确认】 按钮 -- 这里接收已选择的素材组集合
      console.log(event.data);
      return;
    }
    if (event?.data?.type === 'tezign-asset-group-selector-cancel') {
      // 点击【取消】 按钮
      console.log(event.data);
      return;
    }
  };

  useEffect(() => {
    window.addEventListener('message', receiveMessage, false);
    return () => {
      window.removeEventListener('message', receiveMessage);
    };
  }, []);

  return (
    <div>
      <iframe ref={ref} src={iframeUrl} id="iframe" />
    </div>
  );
}