Cara Setup Swagger UI dan Prism Untuk Mocking API dan Mendokumentasikannya Menggunakan Docker Compose — Part 2 Setup Basic Auth

Artikel ini adalah lanjutan dari Cara Setup Swagger UI dan Prism Untuk Mocking API dan Mendokumentasikannya Menggunakan Docker Compose — Part 1.

Sebelumnya kita sudah berhasil melakukan setup Swagger UI dan Prism untuk publish dokumentasi dan mock servernya. Seperti judul kali ini, mungkin akan timbul pertanyaan seperti ini:

Kenapa harus Setup Basic Auth? Kan udah jalan dan bisa dilihat nih sama team FE.

Untuk menjawab pertanyaan di atas, jawabannya simple “Security”. Bayangkan kamu mempublikasikan seluruh endpoint yang ada ke publik, pastinya publik bisa mengaksesnya dengan mudah dan seluruh dokumentasi endpoint service yang kamu buat telanjang dan hacker dapat dengan mudah menemukan endpointnya (tak perlu melakukan inspect manual). Maka dari itu minimal kita harus setup basic auth.

Caranya simple, kita buat Dockerfile dan lakukan modifikasi sedikit pada image swagger uinya:

# bash
touch Dockerfile

Jadi struktur direktori project my-swagger kita jadi seperti ini sekarang:

my-swagger
├── Caddyfile
├── Dockerfile
├── docker-compose.yaml
└── docs
    └── petstore.yaml

Buka project my-swagger di code editor kesukaan kamu, dan masukkan script berikut:

FROM swaggerapi/swagger-ui
RUN apk add apache2-utils
ARG USERNAME=username
ARG PASSWORD=password
RUN htpasswd -c -b /etc/nginx/.htpasswd ${USERNAME} ${PASSWORD} && cat /etc/nginx/.htpasswd
RUN sed -i "s|location / {|location / {\n\tauth_basic \"Restricted Content\";\n\tauth_basic_user_file /etc/nginx/.htpasswd;\n|g" /etc/nginx/nginx.conf

Saat ini mungkin kamu sedikit puyeng. Mari kita bedah code di atas.

• FROM swaggerapi/swagger-ui :
  di sini kita mau buat base image kita dari swaggerapi/swagger-ui
• RUN apk add apache2-utils :
  kemudian kita akan modifikasi sedikit dan install apache2-utils agar bisa menggunakan fitur Basic Authnya
• ARG USERNAME=username; ARG PASSWORD=password :
  kita buat argumen baru untuk menentukan username dan password yang akan kita gunakan nanti pada saat build imagenya
• RUN htpasswd -c -b /etc/nginx/.htpasswd ${USERNAME} ${PASSWORD} && cat /etc/nginx/.htpasswd :
  generate basic auth credential berdasarkan arguman USERNAME dan PASSWORD yang sudah kita tulis diatasnya. Script ini akan menulis kredensial username dan password kita ke /etc/nginx/.htpasswd yang kemudian kita akan panggil ke file nginx.conf nantinya.
• RUN sed -i "s|location / {|location / {\n\tauth_basic \"Restricted Content\";\n\tauth_basic_user_file /etc/nginx/.htpasswd;\n|g" /etc/nginx/nginx.conf :
  Modifikasi konfigurasi standard nginx.conf bawaan image swaggerapi/swagger-ui dan menyisipkan 2 line yakni tauth_basic dan tauth_basic_user_file /etc/nginx/.htpasswd; ke file /etc/nginx/nginx.conf

Kira-kira begitu penjelasannya, mudah-mudahan jelas.

Next step, kita akan membuat image baru untuk pengganti image swaggerapi/swagger-ui dengan menjalankan perintah ini:

docker build ./ --build-arg USERNAME='janji' --build-arg PASSWORD='suci' -t swuegger-ui

Perintah di atas akan membuatkan docker image baru bernama swuegger-ui yang sudah diinject dengan username janji dan passwordnya suci yang nantinya kita akan gunakan di docker-compose.yaml untuk menggantikan image pada service swagger-ui .

Sekarang lakukan modifikasi pada file docker-compose.yaml :

version: "2.4"
services:
  caddy:
    image: caddy
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
    ports:
      - "3000:80"
    depends_on:
      - petstoreService # <- panggil petstoreService ke sini

  swagger-ui:
    image: swuegger-ui # <- ganti jadi swuegger-ui
    ports:
      - "4000:8080"
    volumes:
      - ./docs:/usr/share/nginx/html/docs
    environment:
      URLS: "[
          {name: 'Tempat jualan binatang', url: 'docs/petstore.yaml'},
        ]"

  # prism services to mock
  petstoreSvc:
    image: stoplight/prism:4
    volumes:
      - ./docs/petstore.yaml:/tmp/docs/petstore.yaml
    command: "mock -d -p 4010 --host 0.0.0.0 /tmp/docs/petstore.yaml"

Kemudian jalankan lagi perintah docker-compose up -d dan setelah selesai coba akses kembali halaman http://localhost:4000 .

Udah disuruh login sekarang

Seperti kita lihat, sekarang halaman dokumentasi API kita sudah dilengkapi dengan basic auth security. Dan jika password yang dimasukkan benar, seharusnya halaman dokumentasi API kita sudah bisa diakses.

Demikian tutorial singkat ini, semoga bermanfaat. Stay safe, stay healthy and stay coding!

Akses repo untuk project ini https://github.com/daemswibowo/my-swagger