Integrasi Device Identification full-stack untuk Next.js (App Router + Pages Router). Tambahkan identifikasi pengunjung, deteksi bot, dan smart signals ke aplikasi Next.js Anda dalam hitungan menit.
Tambahkan SDK ke proyek Anda dengan package manager pilihan Anda.
npm install @tracio/reactyarn add @tracio/reactpnpm add @tracio/reactSiap dan berjalan dengan penyiapan minimal.
// app/layout.tsximport { TracioProvider } from '@tracio/react'export default function Layout({ children }) { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> {children} </TracioProvider> )}Pola siap produksi dengan penanganan error, status loading, dan konfigurasi lanjutan.
// app/api/webhook/tracio/route.ts — identification events land here in real timeimport crypto from 'crypto'function verify(raw: Buffer, header: string, secret: string) { const p = Object.fromEntries(header.split(',').map((kv) => kv.split('='))) const signed = Buffer.concat([Buffer.from(`${p.t}.`), raw]) const expected = crypto.createHmac('sha256', secret).update(signed).digest('hex') const a = Buffer.from(p.v1, 'hex') const b = Buffer.from(expected, 'hex') return a.length === b.length && crypto.timingSafeEqual(a, b)}export async function POST(req: Request) { const raw = Buffer.from(await req.arrayBuffer()) const sig = req.headers.get('x-tracio-signature') ?? '' if (!verify(raw, sig, process.env.TRACIO_WEBHOOK_SECRET!)) { return new Response('Invalid signature', { status: 401 }) } const event = JSON.parse(raw.toString()) if (event.bot.result === 'bot') { await blockVisitor(event.visitorId) } return new Response('OK')}Semua opsi yang tersedia untuk menginisialisasi dan mengonfigurasi SDK.
publicKeystringKunci publik Anda dari dasbor — aman dikirim di browserendpointstringURL endpoint khusus untuk deployment yang dirutekan melalui proxy — URL eksplisit mengalahkan regionregionstringRegion data: us atau eutimeoutMsnumberBatas waktu untuk seluruh panggilan getResult(), dalam milidetiklinkedIdstringID akun internal Anda untuk pengguna yang masuk, agar kunjungan yang berbagi perangkat bisa ditautkantagstringLabel bebas yang dilekatkan pada permintaan identifikasi, mis. checkout atau logindebugbooleanMencatat siklus hidup skrip dan aktivitas jaringan ke konsol browserscriptUrlstringPenimpaan penuh untuk URL skrip agent — untuk self-hosting atau Subresource IntegrityPelajari lebih dalam dengan referensi API lengkap, konfigurasi webhook, dan panduan lanjutan.
Referensi API lengkap, panduan integrasi, dan praktik terbaik.
Pengiriman event real-time, skema payload, dan verifikasi tanda tangan.
Konfigurasikan notifikasi event real-time untuk setiap identifikasi perangkat.
Tambahkan device fingerprinting ke aplikasi Next.js Anda dalam kurang dari 5 menit.