Menyiapkan Alat Pengembangan

​

Alat Pengembangan yang Direkomendasikan

Layanan opsional ini tidak diperlukan untuk menjalankan Overleaf, tetapi sangat direkomendasikan untuk pengembangan, debugging, dan inspeksi selama pengembangan lokal.

• Hoppscotch adalah alat pengujian API ringan yang mirip dengan Postman, tetapi berbasis browser dan sangat praktis untuk pengembangan.
  • Frontend: http://localhost:3000
  • Proxy (untuk melewati CORS): http://localhost:9159
• RedisInsight menyediakan antarmuka visual untuk memeriksa data Redis. UI tersedia di: http://localhost:5540
• Mongo Express adalah UI berbasis web untuk MongoDB. Anda dapat mengunjungi http://localhost:8081 dengan kredensial: admin:pass

Tambahkan konfigurasi berikut ke docker-compose.yml Anda:

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

​

Menyiapkan Hoppscotch

​

Mem-proxy Permintaan API

Untuk menyiapkan Hoppscotch, kunjungi http://localhost:3000, lalu buka tab pengaturan. Anda perlu mengatur Proxy ke http://localhost:9159, agar alat debug Anda dapat berinteraksi dengan jaringan internal kontainer.

Sekarang Anda dapat menguji dengan http://web:3000/status untuk memeriksa apakah web sudah aktif:

​

Masalah CSRF

Jika Anda menggunakan Postman atau alat debug lain untuk membuat permintaan post, Anda mungkin mendapati bahwa login ditolak (forbidden), dan penyebabnya adalah error 401. Hal ini karena Overleaf dilindungi oleh verifikasi csrf.

Di konsol Anda, Anda mungkin melihat:

Untuk mengatasi hal ini dalam pengembangan Overleaf Anda, Anda perlu menyiapkan token csrf. Berikut tutorial lengkapnya.

1. Tambahkan Pre-Request

   Tambahkan kode berikut ke Pre-Request

   

   Skripnya adalah sebagai berikut:

   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. Tambahkan Header Permintaan

   Anda perlu menambahkan header berikut:

   Nama Header	Nilai Header
   Content-Type	application/json
   X-Csrf-Token	<<csrftoken>>
   Cookie	<<cookie_header>>

   
3. Login dengan Alat API

   Sekarang Anda dapat login dengan nama pengguna dan kata sandi Anda.

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

   Berikut adalah respons ketika Anda memasukkan nama pengguna atau kata sandi yang salah.