一键导入
fingerprint-react
Integrate Fingerprint device identification into a React (or Preact) app — initialize the agent and get the visitor's visitor_id and event_id.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Integrate Fingerprint device identification into a React (or Preact) app — initialize the agent and get the visitor's visitor_id and event_id.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Integrate Fingerprint device identification into an Angular app — initialize the agent and get the visitor's visitor_id and event_id.
Add Fingerprint to a fullstack Next.js (App Router) app — identify visitors in the browser with the React SDK and verify the event_id server-side with the node SDK in a Route Handler or Server Action.
Integrate the Fingerprint Server API into a Node/Express backend — fetch an event by event_id and read the verified identification and Smart Signals.
Protect the Fingerprint JS Agent (v4) against ad blockers and improve identification accuracy by routing it through a first-party custom subdomain or a proxy integration (Cloudflare, CloudFront, Azure, Nginx) using the v4 `endpoints` option. Use to maximize accuracy after basic identification works, or when requests to the default Fingerprint domain are being blocked.
Integrate the Fingerprint Server API into a Python backend (FastAPI / Django / Flask) — fetch an event by event_id and read the verified identification and Smart Signals.
Set up no-code automatic protection with the Fingerprint Rules Engine — block or allow visitors based on Smart Signals without writing decision code — and consume the rule outcome server-side. Use when the user wants automatic protection, to build their first rule, or to enforce policy without hand-coding signal checks.
| name | fingerprint-react |
| description | Integrate Fingerprint device identification into a React (or Preact) app — initialize the agent and get the visitor's visitor_id and event_id. |
Integrate Fingerprint into a React app to identify visitors: initialize the agent once at startup,
then ask it for the visitor's visitor_id and a single-use event_id wherever you need it (on
load, or on an action like login or checkout).
Docs: https://docs.fingerprint.com/docs/react · JS Agent v4: https://docs.fingerprint.com/reference/js-agent-v4
@fingerprint/react — install the latest version. (Preact uses the same package. For plain HTML
or an unsupported framework, use @fingerprint/agent instead.)
FINGERPRINT_PUBLIC_API_KEY — the public key, safe to ship to the browser.Bundlers only expose prefixed vars to client code — map the key to the bundler's convention:
- Vite:
VITE_FINGERPRINT_PUBLIC_API_KEY→import.meta.env.VITE_...- Create React App:
REACT_APP_FINGERPRINT_PUBLIC_API_KEY→process.env.REACT_APP_...Never exposeFINGERPRINT_SECRET_API_KEYto the frontend.
Install @fingerprint/react.
Initialize once at the app root. Wrap the app in FingerprintProvider, passing the public
key and region (us | eu | ap, matching the workspace). Client-side only. See
snippets/provider.jsx.
Get the identification where you need it. Use useVisitorData. For identify-on-demand pass
{ immediate: false } and call getData() on the action you care about; it returns
{ visitor_id, event_id, ... }. See snippets/use-visitor-data.jsx.
Verify it works. Disable your ad blocker, run the dev server, trigger the call, and confirm
a visitor_id is logged in the browser console (or that the event appears on the dashboard
Events page).
us | eu | ap).isLoading / error states.@fingerprintjs/fingerprintjs-pro, FingerprintJS.load(), or scriptUrlPattern.