إعداد أدوات التطوير

​

أدوات التطوير الموصى بها

هذه الخدمات الاختيارية ليست مطلوبة لتشغيل Overleaf، لكنها موصى بها بشدة للتطوير وتصحيح الأخطاء والفحص أثناء التطوير المحلي.

• Hoppscotch أداة خفيفة لاختبار واجهات API تشبه Postman، لكنها تعمل في المتصفح وملائمة جدًا للتطوير.
  • الواجهة الأمامية: http://localhost:3000
  • الوكيل (لتجاوز قيود CORS): http://localhost:9159
• توفر RedisInsight واجهة مرئية لفحص بيانات Redis. وتتوفر الواجهة على: http://localhost:5540
• Mongo Express واجهة ويب لـ MongoDB. يمكنك زيارة http://localhost:8081 باستخدام بيانات الاعتماد: admin:pass

يُرجى إضافة ما يلي إلى ملف docker-compose.yml الخاص بك:

develop/docker-compose.yml

develop/docker-compose.yml

# services: 
  # Overleaf Dev Containers
  # ...
  
  # Add those for your development
  # API debug
  hoppscotch-frontend:
    image: hoppscotch/hoppscotch-frontend:latest
    ports:
      - "3000:3000"

  hoppscotch-proxy:
    image: hoppscotch/proxyscotch:latest
    environment:
      - PORT=9159
    ports:
      - "9159:9159"

  # Redis-insight
  redis-insight:
    image: redislabs/redisinsight:latest
    ports:
      - "5540:5540"
    depends_on:
      - redis
    volumes:
      - ./data/redis-insight:/data

  # mongo-express
  # basicAuth credentials are "admin:pass"
  mongo-express:
    image: mongo-express
    ports:
      - "8081:8081"
    environment:
      ME_CONFIG_MONGODB_SERVER: mongo

​

إعداد Hoppscotch

​

تمرير طلبات API عبر الوكيل

لإعداد Hoppscotch، يمكنك زيارة http://localhost:3000، ثم الانتقال إلى علامة تبويب الإعدادات. عليك ضبط Proxy على http://localhost:9159، حتى تتمكن أدوات التصحيح من التفاعل مع الشبكات الداخلية للحاويات.

يمكنك الآن الاختبار باستخدام http://web:3000/status للتحقق مما إذا كانت خدمة web تعمل:

​

مشكلات CSRF

إذا استخدمت Postman أو أدوات تصحيح أخرى لإنشاء طلب post، فقد تجد أن تسجيل الدخول مرفوض، والسبب هو الخطأ 401. ويرجع ذلك إلى أن Overleaf محمي بالتحقق من csrf.

قد ترى في وحدة التحكم ما يلي:

للتعامل مع ذلك أثناء تطويرك لـ Overleaf، عليك إعداد رمز csrf الخاص بك. وإليك الشرح المفصل.

1. إضافة سكربت ما قبل الطلب

   أضف الشيفرة التالية إلى Pre-Request

   

   السكربت كما يلي:

   pm.sendRequest("http://web:3000/dev/csrf", function (err, res) {
       if (err) {
           console.log(err);
           return;
       }
   
       // 1) Save CSRF token (/dev/csrf)
       const token = res.text().trim();
       pw.env.set("csrftoken", token);
       console.log("csrftoken =", token);
   
       const setCookieHeader = (res.headers || []).find(h => h.key?.toLowerCase() === "set-cookie")?.value;
       console.log("set-cookie =", setCookieHeader);
   
       if (!setCookieHeader) return;
   
       const cookiePair = setCookieHeader.split(";")[0].trim(); // overleaf.sid=...
       pw.env.set("cookie_header", cookiePair);
       console.log("cookie_header =", cookiePair);
   });
   
2. إضافة ترويسات الطلب

   عليك إضافة الترويسات التالية:

   اسم الترويسة	قيمة الترويسة
   Content-Type	application/json
   X-Csrf-Token	<<csrftoken>>
   Cookie	<<cookie_header>>

   
3. تسجيل الدخول باستخدام أدوات API

   يمكنك الآن تسجيل الدخول باسم المستخدم وكلمة المرور.

   {
     "_csrf": "<<csrftoken>>",
     "email": "[e-mail]",
     "password": "xxxxxx"
   }
   

   إليك الاستجابة عند إدخال اسم مستخدم أو كلمة مرور خاطئة.