Vue项目调用SEON SDK函数提示seon未找到的解决方法

错误原因 #

• SEON SDK脚本可能晚于Vue组件完成加载，导致触发按钮点击时，seon对象还未挂载到全局作用域
• Vue组件作用域隔离，直接用seon或this.seon无法访问全局window上的seon对象

解决方案 #

方案1：确认SDK加载完成后调用 #

先在index.html的SDK引入代码中添加加载完成标记：

<script src="https://cdn.getdeviceinf.com/js/v5/agent.js" onload="window.seonLoaded = true"></script>

再在Vue组件的按钮点击方法中做存在性判断：

handleSeonConfig() {
  if (!window.seon) {
    console.error("SEON SDK尚未加载完成");
    return;
  }
  window.seon.config({
    host: "seondf.com",
    session_id: "123456abc",
    audio_fingerprint: true,
    canvas_fingerprint: true,
    webgl_fingerprint: true,
    onSuccess: function (message) {
      console.log("success", message);
    },
    onError: function (message) {
      console.log("error", message);
    },
  });
}

方案2：组件内动态加载SDK #

如果不想提前在index.html引入，可在组件中按需加载SDK，加载完成后再执行配置：

async handleSeonConfig() {
  if (!window.seon) {
    await new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://cdn.getdeviceinf.com/js/v5/agent.js';
      script.onload = resolve;
      script.onerror = reject;
      document.body.appendChild(script);
    });
  }
  window.seon.config({
    host: "seondf.com",
    session_id: "123456abc",
    audio_fingerprint: true,
    canvas_fingerprint: true,
    webgl_fingerprint: true,
    onSuccess: (message) => console.log("success", message),
    onError: (message) => console.log("error", message),
  });
}

方案3：TypeScript项目补充全局类型声明 #

如果是TypeScript项目，需在类型声明文件（如src/vite-env.d.ts）中添加全局类型，避免语法报错：

interface Window {
  seon: {
    config: (options: {
      host: string;
      session_id: string;
      audio_fingerprint?: boolean;
      canvas_fingerprint?: boolean;
      webgl_fingerprint?: boolean;
      onSuccess?: (msg: any) => void;
      onError?: (msg: any) => void;
    }) => void;
  };
}

SEON官方文档（JavaScript Agent v5）核心内容翻译 #

初始化说明 #

需通过全局seon对象调用config方法完成SDK初始化，核心配置参数说明：

• host：SEON服务的主机域名，需替换为实际部署地址
• session_id：后端生成的唯一会话ID，用于标识当前用户会话
• audio_fingerprint：是否启用音频指纹采集，布尔值
• canvas_fingerprint：是否启用Canvas指纹采集，布尔值
• webgl_fingerprint：是否启用WebGL指纹采集，布尔值
• onSuccess：初始化成功时触发的回调函数，接收成功消息参数
• onError：初始化失败时触发的回调函数，接收错误消息参数

注意事项 #

• 必须在用户主动交互（如按钮点击）时调用SDK，避免浏览器隐私策略限制部分指纹采集功能
• 务必确保SDK脚本加载完成后再调用seon.config，否则会出现“seon未找到”错误

内容的提问来源于stack exchange，提问作者Rachit Gupta