Integrasi API Web / HTML

Alur Integrasi yang Direkomendasikan

Untuk keamanan maksimal, API Key Anda tidak boleh pernah ditampilkan langsung di dalam kode JavaScript frontend.

Formulir Unggah HTML

Buat antarmuka unggah sederhana yang memungkinkan pengguna memilih dan mengunggah gambar.

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

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

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

JavaScript Frontend

Kirim gambar yang diunggah dengan aman ke endpoint backend Anda menggunakan permintaan 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}">
    `;
}

Tanggung Jawab Backend

• Simpan API Key dengan aman di server.
• Validasi file gambar yang diunggah dengan benar.
• Kirim permintaan API yang aman ke server ByByBG.
• Kembalikan gambar PNG transparan yang telah diproses.
• Tangani kesalahan API dan permintaan yang tidak valid dengan benar.

Aturan Keamanan Penting

• Gunakan endpoint proxy backend yang aman.
• Simpan API Key dalam environment variables.
• Validasi unggahan di sisi server.
• Terapkan batas ukuran unggahan untuk keamanan.
• Cegah penyalahgunaan menggunakan sistem rate limiting.

Kesalahan API Umum