数字员工聊天组件

const index: FastifyPluginAsync = async (fastify, opts): Promise<void> => {
    //步骤一 获取access_token 
  fastify.get('/get_app_config', async function (request, reply) {
    // 此处简化获取access_token，js_ticket逻辑
    const { code = '' } = (request.query as { code: string }) || {};
    let user_access_token = '';
    const resp = await getAccessToken({
      code,
      agent_ak: config.agent_ak,
      agent_sk: config.agent_sk,
    });

    if (resp?.code === 0) {
      user_access_token = resp?.data?.user_token || '';

      if (!user_access_token) {
        return reply
          .status(400)
          .send({ code: 400, message: '获取access_token失败' });
      }
    } else {
      return reply
        .status(400)
        .send({ code: 400, message: '获取access_token失败' });
    }

    console.log('授权信息', {
      user_access_token,
      full_response: resp,
    });

    let jsapi_ticket = {
      ticket: '',
      tag: '',
    };
	//步骤二 获取jsapi_ticket
    if (!jsapi_ticket.ticket) {
      const ticketResp: any = await getJSAPITicket(user_access_token);
      console.log('js_ticket', ticketResp);
      if (ticketResp?.code === 0) {
        jsapi_ticket = ticketResp.data;
      } else {
        return reply
          .status(400)
          .send({ code: 400, message: '获取jsapi_ticket失败' });
      }
    }
    // 请求页面的url，不包含query,search
    const url = `http://${request.headers.host}`;
    console.log('url', url);
    const noncestr = Math.random().toString(36).substring(2, 15);
    const timestamp = (Date.now() / 1e3) | 0;
    console.log('timestamp', timestamp);
    const signature = genSignature(
      jsapi_ticket.ticket,
      noncestr,
      timestamp,
      url
    );

    return MakeSuccess({
      app_id: config.agent_ak,
      signature,
      noncestr,
      timestamp,
      tag: jsapi_ticket?.tag,
      url,
    });
  });
};

/**
 * 配置文件
 */

// biz-server 第三方服务地址，您需要替换为您的服务地址
const host = 'http://127.0.0.1:3000'; 

// 默认权限范围，配置您需要的权限
const defaultScopes = [
  'kso.component.agentspace_chat',
  'kso.wiki.readwrite'
];

// Agent 配置，您需要配置您的数字员工的agentid                
const agentConfig = {
  agentId: '*********',
};

// OAuth2 配置,您需要配置您的state 		
const oauthConfig = {
  appId: agentConfig.agentId,
  redirect_uri: 'https://agentspace.wps.cn/sdk-callback',
  state: 'agent-space-chat',
};

/**
 * 授权相关函数
 */

// 发起授权
async function authorize(scopes) {
  // 用户授权演示
  // 以下信息，建议从业务服务端返回给前端
  OpenSDK.OAuth2.authorize({
    appId: oauthConfig.appId,
    redirect_uri: oauthConfig.redirect_uri,
    scope: scopes.join(','),
    mode: OpenSDK.OAuth2.Mode.POPUP,
    state: oauthConfig.state,
  });
}

// 暴露给全局
window.authorize = authorize;

/**
 * 主应用逻辑
 */

let agentspaceChatUmdLoadPromise = null;

// 加载第三方依赖
function loadScript(src) {
  return new Promise((resolve, reject) => {
    // 已存在则复用
    const existing = document.querySelector(`script[src="${src}"]`);
    if (existing) {
      if (existing.dataset.loaded === "1") return resolve();
      existing.addEventListener("load", resolve, { once: true });
      existing.addEventListener("error", reject, { once: true });
      return;
    }

    const s = document.createElement("script");
    s.src = src;
    s.async = true;
    s.addEventListener("load", () => {
      s.dataset.loaded = "1";
      resolve();
    });
    s.addEventListener("error", reject);
    document.head.appendChild(s);
  });
}

/**
 * - 加载 agentspace_chat UMD
 */
function loadAgentspaceChatUmd() {
  if (agentspaceChatUmdLoadPromise) return agentspaceChatUmdLoadPromise;

  agentspaceChatUmdLoadPromise = (async () => {

     // UMD 包在浏览器环境下会从window读取这三个依赖，需要在script加载前挂载
     (window as any).AgentSpaceWebSDKDeps = {
      React:React, // React依赖
      ReactDOM: {
        ...ReactDOM,
        createRoot:ReactDOMClient.createRoot, // React18的createRoot在react-dom/client上
      },  // ReactDOM依赖
      ReactJSXRuntime:ReactJSXRuntime,  // ReactJSXRuntime
    };
    
    await loadScript(
      "https://qn.cache.wpscdn.cn/open_static/libs/widgets/agentspace_chat/1.0.8/kso.component.agentspace_chat.1.0.8.umd.js"
    );
  })();

  return agentspaceChatUmdLoadPromise;
}


let hasRender = false;

// localStorage.scopes || 使用默认值
const savedScopes = localStorage.getItem('merged_scopes');
let scopes = savedScopes ? JSON.parse(savedScopes) : defaultScopes;

async function startApp() {
  if (hasRender) return;
  OpenSDK.setDebug(true);
  // 检查app_config是否过期
  const app_config = localStorage.getItem('app_config');
  if (app_config) {
    const {
      app_id,
      signature,
      noncestr,
      timestamp,
      tag,
      url,
      app_config_timestamp,
    } = JSON.parse(app_config);
    console.log('app_config_timestamp', Date.now() - app_config_timestamp);
    if (Date.now() - app_config_timestamp < 7200000) {
      await OpenSDK.config({
        scopes,
        signature, // 签名
        appId: app_id, // 应用 appId
        timestamp, // 时间戳（毫秒）
        nonceStr: noncestr, // 随机字符串
        tag,
        url,
      });

      // 创建组件
      renderWidget();
      return;
    } else {
      localStorage.removeItem('app_config');
      // 缓存过期，重新开始授权流程
      // console.log('[授权流程] app_config 缓存已过期，重新授权')
      window.location.reload();
    }
  }

  // 无缓存或缓存过期，开始授权
  console.log('[授权流程] 开始授权');
  authorize(scopes);

  OpenSDK.addEventListener(OpenSDK.Events.OAuth2Message, async (event) => {
    // 安全起见，判断来源
    if (event.origin !== 'https://agentspace.wps.cn') return;
    const code = event.data.code;
    console.log('OAuth2Message code', code);

    // 步骤一：拿到临时授权码code，提交给服务端申请access_token
    // 应用授权，无需走OAuth授权流程，直接申请access_token
    // 用户授权，走OAuth授权流程，获取auth_code，然后申请access_token
    if (!code) {
      authorize(scopes);
      return;
    }

    // 步骤二：获取biz-server 申请的js_ticket相关签名信息
    const { app_id, signature, noncestr, timestamp, tag, url } = await fetch(
      `${host}/api/get_app_config?code=${code}`
    ).then(async (res) => {
      const resp = await res.json();
      if (resp?.code === 0) {
        return resp.data || {};
      } else {
        throw new Error('获取signature失败');
      }
    });
    // 先删除缓存的 app_config
    localStorage.removeItem('app_config');
    // 将获取的信息缓存存储，两个小时后过期
    localStorage.setItem(
      'app_config',
      JSON.stringify({
        app_id,
        signature,
        noncestr,
        timestamp,
        tag,
        url,
        app_config_timestamp: Date.now(),
      })
    );
    // 步骤三：OpenSDK设置签名信息
    await OpenSDK.config({
      scopes,
      signature, // 签名
      appId: app_id, // 应用 appId
      timestamp, // 时间戳（毫秒）
      nonceStr: noncestr, // 随机字符串
      tag,
      url,
    });
    // 步骤四：渲染组件
    renderWidget();
  });
}

async function renderWidget() {

  // 加载 agentspace_chat UMD
  await loadAgentspaceChatUmd();
  if (OpenSDK.components.size === 0) return;

  const agentspaceChat = OpenSDK.create('kso-agentspace-chat', {
    agentId: agentConfig.agentId,
    initialExpanded: false,
  });
  agentspaceChat.mount(document.getElementById('agentspace-container'));

  hasRender = true;

  // 第三方开发者监听事件
  agentspaceChat.addEventListener(agentspaceChat.Events.Updated, (e) => {
    console.log('[3rd] Updated:', e);
  });
  agentspaceChat.addEventListener(agentspaceChat.Events.OnSelected, (e) => {
    console.log('[3rd] OnSelected:', e);
  });

  // 监听scopes范围不够，二次授权
  agentspaceChat.addEventListener(
    agentspaceChat.Events.OnAuthRequest,
    async (e) => {
      const detailScopeUser = e.detailScopeUser || []; // detail接口返回的所有required scopes

      console.log(
        '[业务方 addEventListener] detailScopeUser:',
        detailScopeUser
      );

      // 使用本地配置的scopes进行对比，判断缺失的scopes
      const missingScopes = detailScopeUser.filter(
        (scope) => !scopes.includes(scope)
      );

      // 如果没有缺失的权限，无需重新授权
      if (missingScopes.length === 0) {
        console.log('[业务方 addEventListener] 权限验证通过，无需重新授权');
        return;
      }

      // 合并 scopes
      const mergedScopes = [...new Set([...scopes, ...missingScopes])];
      scopes = mergedScopes;

      // 保存合并后的scopes
      localStorage.setItem('merged_scopes', JSON.stringify(mergedScopes));
      // 清除缓存的 app_config，强制重新获取新的授权信息
      localStorage.removeItem('app_config');

      console.log('[业务方 addEventListener] 合并后的scopes:', mergedScopes);

      // 显示自定义授权提示 UI（不使用 window.confirm）
      showAuthPrompt(
        missingScopes,
        mergedScopes,
        // 确认授权回调
        (mergedScopes) => authorize(mergedScopes),
        // 取消授权回调
        () => {
          console.log('[业务方 addEventListener] 用户取消授权');
        }
      );
    }
  );
}

/**
 * 授权弹框辅助函数 【此处模拟业务方的实现】
 * 包含：弹窗被阻止检测、授权提示UI等
 */

// 显示弹窗被阻止的提示
function showPopupBlockedWarning() {
  // 移除可能存在的旧提示
  const existingWarning = document.getElementById('popup-blocked-warning');
  if (existingWarning) {
    existingWarning.remove();
  }

  const warningBox = document.createElement('div');
  warningBox.id = 'popup-blocked-warning';
  warningBox.style.cssText = `
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 999999;
    max-width: 500px;
    font-size: 14px;
    animation: slideDown 0.3s ease-out;
  `;

  warningBox.innerHTML = `
    <style>
      @keyframes slideDown {
        from {
          transform: translateX(-50%) translateY(-20px);
          opacity: 0;
        }
        to {
          transform: translateX(-50%) translateY(0);
          opacity: 1;
        }
      }
    </style>
    <div style="display: flex; align-items: flex-start; gap: 12px;">
      <div style="font-size: 20px;">⚠️</div>
      <div style="flex: 1;">
        <div style="font-weight: bold; margin-bottom: 8px;">浏览器已阻止弹窗</div>
        <div style="margin-bottom: 8px;">授权窗口被浏览器拦截，请按以下步骤操作：</div>
        <ol style="margin: 8px 0 0 0; padding-left: 20px;">
          <li>点击地址栏右侧的 <strong>弹窗被阻止</strong> 图标</li>
          <li>选择 <strong>始终允许来自此网站的弹窗</strong></li>
          <li>刷新页面重新授权</li>
        </ol>
      </div>
      <button id="close-popup-warning" style="
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        color: #856404;
      ">✕</button>
    </div>
  `;

  document.body.appendChild(warningBox);

  // 关闭按钮
  document.getElementById('close-popup-warning').onclick = () => {
    warningBox.style.animation = 'slideDown 0.3s ease-out reverse';
    setTimeout(() => warningBox.remove(), 300);
  };

  // 10秒后自动关闭
  setTimeout(() => {
    if (document.getElementById('popup-blocked-warning')) {
      warningBox.style.animation = 'slideDown 0.3s ease-out reverse';
      setTimeout(() => warningBox.remove(), 300);
    }
  }, 10000);
}

// 显示授权提示 UI（不使用 window.confirm，浏览器会拦截，需要第三方实现一个弹框）
function showAuthPrompt(missingScopes, mergedScopes, onConfirm, onCancel) {
  // 移除可能存在的旧提示
  const existingPrompt = document.getElementById('auth-prompt-box');
  if (existingPrompt) {
    existingPrompt.remove();
  }

  // 提示框
  const promptBox = document.createElement('div');
  promptBox.id = 'auth-prompt-box';
  promptBox.style.cssText = `
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 99999;
    min-width: 300px;
  `;

  // 内容
  promptBox.innerHTML = `
    <div style="margin-bottom: 15px;">
      <strong>需要新增权限</strong>
    </div>
    <div style="margin-bottom: 15px; font-size: 14px; color: #666;">
      缺失权限：${missingScopes.join(', ')}
    </div>
    <div style="text-align: right;">
      <button id="auth-cancel-btn" style="margin-right: 10px; padding: 6px 15px; cursor: pointer;">取消</button>
      <button id="auth-confirm-btn" style="padding: 6px 15px; background: #1890ff; color: white; border: none; cursor: pointer;">授权</button>
    </div>
  `;
  document.body.appendChild(promptBox);

  // 按钮事件
  document.getElementById('auth-confirm-btn').onclick = () => {
    console.log('[授权提示] 用户点击授权');
    document.body.removeChild(promptBox);
    if (typeof onConfirm === 'function') {
      onConfirm(mergedScopes);
    }
  };

  document.getElementById('auth-cancel-btn').onclick = () => {
    console.log('[授权提示] 用户取消');
    document.body.removeChild(promptBox);
    if (typeof onCancel === 'function') {
      onCancel();
    }
  };
}

// 初始化弹窗检测器（拦截 window.open）
function initPopupBlockDetector() {
  const originalWindowOpen = window.open;

  window.open = function (...args) {
    const popup = originalWindowOpen.apply(this, args);

    // 检测弹窗是否被阻止
    if (!popup || popup.closed || typeof popup.closed === 'undefined') {
      console.error('[弹窗检测] 浏览器阻止了弹窗');
      showPopupBlockedWarning();
      return null;
    }

    return popup;
  };
}

// 导出到全局
window.showPopupBlockedWarning = showPopupBlockedWarning;
window.showAuthPrompt = showAuthPrompt;
window.initPopupBlockDetector = initPopupBlockDetector;