Intégration full-stack de Device Identification pour Next.js (App Router + Pages Router). Ajoutez l'identification des visiteurs, la détection des bots et les smart signals à votre application Next.js en quelques minutes.
Ajoutez le SDK à votre projet avec votre gestionnaire de packages préféré.
npm install @tracio/reactyarn add @tracio/reactpnpm add @tracio/reactDevenez opérationnel avec la configuration minimale.
// app/layout.tsximport { TracioProvider } from '@tracio/react'export default function Layout({ children }) { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> {children} </TracioProvider> )}Des modèles prêts pour la production avec gestion des erreurs, états de chargement et configuration avancée.
// 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')}Toutes les options disponibles pour initialiser et configurer le SDK.
publicKeystringVotre clé publique depuis le tableau de bord — sans risque dans le navigateurendpointstringURL d'endpoint personnalisée pour les déploiements routés par proxy — une URL explicite prime sur regionregionstringRégion des données : us ou eutimeoutMsnumberDélai d'expiration de l'appel getResult() complet, en millisecondeslinkedIdstringVotre ID de compte interne pour l'utilisateur connecté, afin de lier les visites partageant un appareiltagstringLibellé libre attaché à la requête d'identification, par ex. checkout ou logindebugbooleanJournalise le cycle de vie du script et l'activité réseau dans la console du navigateurscriptUrlstringRemplacement complet de l'URL du script agent — pour l'auto-hébergement ou Subresource IntegrityAllez plus loin avec la référence API complète, la configuration des webhooks et les guides avancés.
Référence API complète, guides d'intégration et bonnes pratiques.
Livraison d'événements en temps réel, schéma de la charge utile et vérification de signature.
Configurez des notifications d'événements en temps réel pour chaque identification d'appareil.
Ajoutez le device fingerprinting à votre application Next.js en moins de 5 minutes.