تكامل API للويب / HTML

تدفق التكامل الموصى به

لتحقيق أقصى درجات الأمان، يجب ألا يتم كشف مفتاح API الخاص بك مباشرة داخل أكواد JavaScript في الواجهة الأمامية.

نموذج رفع HTML

أنشئ واجهة رفع بسيطة تسمح للمستخدمين باختيار الصور ورفعها.

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

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

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

JavaScript للواجهة الأمامية

أرسل الصور المرفوعة بأمان إلى نقطة النهاية الخلفية باستخدام طلبات 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}">
    `;
}

مسؤوليات الخادم الخلفي

• تخزين مفاتيح API بأمان على الخادم.
• التحقق من ملفات الصور المرفوعة بشكل صحيح.
• إرسال طلبات API آمنة إلى خوادم ByByBG.
• إرجاع صور PNG المعالجة بخلفية شفافة.
• التعامل الصحيح مع أخطاء API والطلبات غير الصالحة.

قواعد أمان مهمة

• استخدم نقاط نهاية Proxy آمنة.
• قم بتخزين مفاتيح API داخل متغيرات البيئة.
• تحقق من الملفات المرفوعة على جانب الخادم.
• طبّق حدودًا لحجم الملفات المرفوعة.
• امنع إساءة الاستخدام باستخدام أنظمة تحديد المعدل.

أخطاء API الشائعة