Intégration API Web / HTML

Flux d’intégration recommandé

Pour une sécurité maximale, votre clé API ne doit jamais être exposée directement dans le code JavaScript frontend.

Formulaire de téléversement HTML

Créez une interface de téléversement simple permettant aux utilisateurs de sélectionner et d’envoyer des images.

<input type="file" id="imageInput">

<button onclick="removeBg()">
    Remove Background
</button>

<div id="result"></div>

JavaScript Frontend

Envoyez les images téléversées de manière sécurisée à votre point de terminaison backend à l’aide des requêtes JavaScript fetch.

async function removeBg(){

    const fileInput =
    document.getElementById("imageInput");

    const result =
    document.getElementById("result");

    if(!fileInput.files.length){
        alert("Select image");
        return;
    }

    const formData = new FormData();

    formData.append(
        "file",
        fileInput.files[0]
    );

    result.innerHTML = "Processing...";

    const response = await fetch(
        "/web/remove-bg",
        {
            method:"POST",
            body:formData
        }
    );

    if(!response.ok){

        result.innerHTML =
        "Something went wrong";

        return;
    }

    const blob =
    await response.blob();

    const url =
    URL.createObjectURL(blob);

    result.innerHTML = `
        <img src="${url}">
    `;
}

Responsabilités du Backend

• Stocker les clés API de manière sécurisée sur le serveur.
• Valider correctement les fichiers image téléversés.
• Envoyer des requêtes API sécurisées aux serveurs ByByBG.
• Renvoyer les images PNG transparentes traitées.
• Gérer correctement les erreurs API et les requêtes invalides.

Règles de sécurité importantes

• Utilisez des points de terminaison proxy backend sécurisés.
• Stockez les clés API dans des variables d’environnement.
• Validez les téléversements côté serveur.
• Appliquez des limites de taille de fichier pour plus de sécurité.
• Empêchez les abus à l’aide de systèmes de limitation du débit des requêtes (rate limiting).

Erreurs API courantes