Aller au contenu principal
APIPlaque

API plaque en JavaScript : fetch et protection de la clé

Séparez navigateur et serveur pour appeler l’API plaque avec fetch sans exposer votre clé RapidAPI dans le frontend.

Publié le

Une interface JavaScript doit transmettre la plaque à votre serveur. Le serveur appelle RapidAPI avec sa clé privée, puis renvoie les seuls champs nécessaires à l’interface. Mettre les en-têtes RapidAPI dans un script du navigateur rendrait la clé visible.

Architecture de la requête

Le flux proposé est : formulaire → route protégée de votre application → API plaque → réponse filtrée au navigateur. /api/vehicle est un exemple de route à développer dans votre propre projet ; ce site ne fournit pas de proxy de recherche.

Exemple fetch côté serveur et navigateur

Le module serveur utilise les API disponibles dans Node.js avec fetch natif. Configurez l’environnement serveur et vérifiez la base RapidAPI ; la valeur .p.rapidapi.co issue du catalogue reste non vérifiée.

Variables du serveur
# Configuration serveur uniquement. Confirmer URL et hôte dans RapidAPI.
RAPIDAPI_KEY=YOUR_RAPIDAPI_KEY
API_PLAQUE_BASE_URL=https://api-plaque-immatriculation-france-donnees-vehicule-siv.p.rapidapi.co
RAPIDAPI_HOST=api-plaque-immatriculation-france-donnees-vehicule-siv.p.rapidapi.co
Module JavaScript exécuté côté serveur
// Serveur uniquement : jamais dans un bundle envoyé au navigateur.
export async function lookupVehicle(plaque) {
  const key = process.env.RAPIDAPI_KEY;
  const base = process.env.API_PLAQUE_BASE_URL;
  const host = process.env.RAPIDAPI_HOST;
  if (!key || key === 'YOUR_RAPIDAPI_KEY' || !base || !host) {
    throw new Error('Configuration RapidAPI manquante');
  }
  if (typeof plaque !== 'string' || !plaque.trim()) throw new Error('Plaque requise');
  const url = new URL("/fr", base);
  url.searchParams.set("plaque", plaque.trim());
  const response = await fetch(url, {
    method: "GET",
    headers: {
      'x-rapidapi-key': key,
      'x-rapidapi-host': host,
      'Content-Type': "application/json",
    },
    signal: AbortSignal.timeout(10000),
    redirect: 'error',
    cache: 'no-store',
  });
  if (!response.ok) throw new Error('Service véhicule indisponible (HTTP ' + response.status + ')');
  const body = await response.json(); // Peut échouer si le corps n'est pas du JSON.
  if (!body || body.error !== false || !body.data || typeof body.data !== 'object' || Array.isArray(body.data)) {
    throw new Error('Réponse véhicule inexploitable');
  }
  return body.data;
}
Navigateur — appelle votre propre route protégée
// /api/vehicle est une route de VOTRE application à implémenter.
// Elle authentifie l'utilisateur, limite les requêtes et appelle lookupVehicle côté serveur.
async function identifyVehicle(plaque) {
  const response = await fetch('/api/vehicle', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'same-origin',
    body: JSON.stringify({ plaque }),
    signal: AbortSignal.timeout(12000),
    cache: 'no-store',
  });
  if (!response.ok) throw new Error('Identification indisponible');
  return await response.json();
}

try {
  const vehicle = await identifyVehicle("FH034DD");
  console.log(vehicle.AWN_marque ?? 'Marque indisponible');
} catch {
  console.error('Impossible de charger le véhicule');
}

Traiter un échec dans l’interface

fetch peut recevoir une réponse HTTP en erreur sans rejeter sa promesse : contrôlez response.ok avant le JSON. Le délai peut aussi interrompre la requête, et le corps peut être non JSON. Affichez un état d’échec permettant de corriger la plaque ou de réessayer manuellement, sans exposer le corps brut du fournisseur.

Votre route serveur doit contrôler l’accès, valider la saisie et limiter les appels. Une requête POST peut réduire la présence de plaques dans les URL de votre application ; vérifiez aussi vos politiques de journaux et de conservation. Consultez l’authentification, les erreurs connues et inconnues, puis l’exemple Node.js complet.

Référence technique : utilisation de Fetch sur MDN.

Consulter l’API sur RapidAPILire la documentation