如何在React项目中启用FingerprintJS的Zero Trust Mode

要在React项目里给FingerprintJS Pro启用零信任模式，核心是让指纹采集的所有请求（脚本加载、API调用）都经过你的零信任网关，通过配置SDK的端点和脚本地址即可实现，以下是具体实现方式：

方式一：全局Provider配置（推荐） #

如果你的项目用FingerprintJSProProvider全局初始化SDK，直接在Provider中添加零信任相关配置：

import { FingerprintJSProProvider } from '@fingerprintjs/fingerprintjs-pro-react';

function App() {
  return (
    <FingerprintJSProProvider
      apiKey="你的FingerprintJS API密钥"
      region="你的服务区域（如eu、us、ap等）"
      // 配置零信任代理端点
      endpoint={{
        url: 'https://你的零信任网关地址.com', // 替换为你的网关地址
        path: '/fpjs' // 网关转发到FingerprintJS的路径，可按需调整
      }}
      // 指定从网关加载FingerprintJS脚本
      scriptUrlPattern='https://你的零信任网关地址.com/fp.js'
      // 若网关需要额外身份验证头，可添加请求拦截器
      requestInterceptor: (config) => {
        config.headers['X-Auth-Token'] = '用户身份令牌'; // 替换为实际需要的头信息
        return config;
      }
    >
      {/* 你的应用组件 */}
      <YourComponent />
    </FingerprintJSProProvider>
  );
}

方式二：直接在useVisitorData中配置 #

如果不需要全局配置，也可以在useVisitorData hook中直接传入零信任参数：

import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
import { useEffect } from 'react';

function YourComponent() {
  const { data, getData } = useVisitorData({
    tag: "sub",
    apiKey: "你的FingerprintJS API密钥",
    region: "你的服务区域",
    // 零信任核心配置
    endpoint: {
      url: 'https://你的零信任网关地址.com',
      path: '/fpjs'
    },
    scriptUrlPattern: 'https://你的零信任网关地址.com/fp.js',
    // 可选：添加身份验证头
    requestInterceptor: (config) => {
      config.headers['X-Auth-Token'] = '用户身份令牌';
      return config;
    }
  });

  useEffect(() => {
    if (data?.visitorId) {
      console.log(data?.visitorId);
    }
  }, [data?.visitorId]);

  return <div>你的组件内容</div>;
}

关键注意事项 #

• 确保你的零信任网关已配置转发规则，将请求代理到对应区域的FingerprintJS官方API端点（比如欧盟区为https://eu.api.fpjs.io）。
• 脚本地址scriptUrlPattern要指向网关托管的FingerprintJS脚本，或者网关转发到官方脚本的地址。
• 如果网关有身份验证要求，必须通过requestInterceptor添加对应的验证头，否则请求会被拦截。

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