Cara menguji Webhooks semasa anda membangun secara tempatan

Webhooks dapat digunakan oleh sistem luaran untuk memberitahu sistem anda mengenai peristiwa atau kemas kini tertentu. Mungkin jenis yang paling terkenal adalah jenis di mana Penyedia Perkhidmatan Pembayaran (PSP) memberitahu sistem anda mengenai kemas kini status pembayaran.

Selalunya mereka datang dalam bentuk di mana anda mendengar pada URL yang telah ditentukan. Contohnya //example.com/webhooks/payment-update. Sementara itu sistem lain menghantar permintaan POST dengan muatan tertentu ke URL tersebut (contohnya ID pembayaran). Sebaik sahaja permintaan masuk, anda mengambil ID pembayaran, meminta PSP status terbaru melalui API mereka, dan mengemas kini pangkalan data anda selepas itu.

Contoh lain boleh didapati dalam penjelasan yang sangat baik ini mengenai Webhooks. //sendgrid.com/blog/whats-webhook/.

Menguji webhook ini berjalan dengan lancar selagi sistem ini dapat diakses oleh orang ramai melalui internet. Ini mungkin persekitaran pengeluaran anda atau persekitaran pementasan yang dapat diakses oleh orang ramai. Ia menjadi lebih sukar apabila anda mengembangkan komputer riba secara tempatan atau di dalam Mesin Maya (VM, misalnya, kotak Vagrant). Dalam kes tersebut, URL tempatan tidak dapat diakses secara terbuka oleh pihak yang menghantar webhook. Juga, memonitor permintaan yang dikirim sangat sulit, yang mungkin menyulitkan pengembangan dan debug.

Apa yang akan diselesaikan oleh contoh ini:

  • Menguji webhook dari persekitaran pembangunan tempatan, yang tidak dapat diakses melalui internet. Ia tidak dapat diakses oleh layanan yang mengirim data ke webhook dari pelayan mereka.
  • Pantau permintaan dan data yang dikirim, tetapi juga respons yang dihasilkan oleh aplikasi Anda. Ini akan membolehkan penyahpepijatan yang lebih mudah, dan oleh itu kitaran pengembangan lebih pendek.

Prasyarat:

  • Pilihan : sekiranya anda mengembangkan menggunakan Mesin Maya (VM), pastikan ia berjalan dan pastikan langkah seterusnya dilakukan di VM.
  • Untuk tutorial ini, kami menganggap anda mempunyai vhost yang ditentukan di webhook.example.vagrant. Saya menggunakan Vagrant VM untuk tutorial ini, tetapi anda bebas memilih nama vhost anda.
  • Pasang ngrokdengan mengikuti arahan pemasangan. Di dalam VM, saya dapati versi Node juga berguna: //www.npmjs.com/package/ngrok, tetapi sila gunakan kaedah lain.

Saya menganggap anda tidak menjalankan SSL di persekitaran anda, tetapi jika anda melakukannya, sila ganti port 80 dengan port 433 dan //dengan //contoh di bawah.

Jadikan webhook boleh diuji

Mari kita anggap kod contoh berikut. Saya akan menggunakan PHP, tetapi membacanya sebagai kod pseudo kerana saya meninggalkan beberapa bahagian penting (contohnya kunci API, pengesahan input, dll.)

Fail pertama: pembayaran.php . Fail ini membuat objek pembayaran dan kemudian mendaftarkannya ke PSP. Kemudian mengambil URL yang perlu dikunjungi pelanggan untuk membayar dan mengarahkan pengguna kepada pelanggan di sana.

Perhatikan bahawa webhook.example.vagrantdalam contoh ini adalah vhost tempatan yang telah kami tetapkan untuk penyediaan pembangunan kami. Ia tidak boleh diakses dari dunia luar.

 123, 'amount' => 25.00, 'description' => 'Test payment', 'redirect_url' => '//webhook.example.vagrant/redirect.php', 'webhook_url' => '//webhook.example.vagrant/webhook.php', ]; $payment = $paymentProvider->createPayment($payment); header("Location: " . $payment->getPaymentUrl());

Fail kedua: webhook.php . Fail ini menunggu untuk dipanggil oleh PSP untuk diberitahu mengenai kemas kini.

getPayment($paymentId); $status = $paymentInfo->getStatus(); // Perform actions in here to update your system if ($status === 'paid') { .. } elseif ($status === 'cancelled') { .. }

URL webhook kami tidak dapat diakses melalui internet (ingat:) webhook.example.vagrant. Oleh itu, fail webhook.php tidak akan dipanggil oleh PSP. Sistem anda tidak akan pernah mengetahui mengenai status pembayaran. Ini akhirnya menyebabkan pesanan tidak pernah dihantar kepada pelanggan.

Nasib baik, ngrok dapat menyelesaikan masalah ini. ngrok menggambarkan dirinya sebagai:

ngrok mendedahkan pelayan tempatan di belakang NAT dan firewall ke internet awam melalui terowong yang selamat.

Mari mulakan terowong asas untuk projek kami. Di persekitaran anda (sama ada di sistem anda atau di VM) jalankan arahan berikut:

ngrok http -host-header=rewrite webhook.example.vagrant:80

Baca lebih banyak pilihan konfigurasi dalam dokumentasi mereka: //ngrok.com/docs.

Skrin seperti ini akan muncul:

Apa yang baru kita mulakan? Pada asasnya, kami mengarahkan ngrokuntuk memulakan terowong ke //webhook.example.vagrantport 80. URL yang sama sekarang boleh dicapai melalui //39741ffc.ngrok.ioatau //39741ffc.ngrok.io, Mereka dapat diakses secara terbuka melalui internet oleh sesiapa sahaja yang mengetahui URL ini.

Perhatikan bahawa anda mendapat HTTP dan HTTPS yang tersedia di luar kotak. Dokumentasi memberikan contoh bagaimana untuk mengehadkannya kepada HTTPS sahaja: //ngrok.com/docs#bind-tls.

Jadi, bagaimana kita menjadikan webhook kita berfungsi sekarang? Kemas kini pembayaran.php ke kod berikut:

 123, 'amount' => 25.00, 'description' => 'Test payment', 'redirect_url' => '//webhook.example.vagrant/redirect.php', 'webhook_url' => '//39741ffc.ngrok.io/webhook.php', ]; $payment = $paymentProvider->createPayment($payment); header("Location: " . $payment->getPaymentUrl());

Sekarang, kami memberitahu PSP untuk memanggil URL terowong melalui HTTPS. ngrok akan memastikan URL dalaman anda dipanggil dengan muatan yang tidak diubah suai, sebaik sahaja PSP memanggil webhook melalui terowong.

Bagaimana untuk memantau panggilan ke webhook?

Tangkapan skrin yang anda lihat di atas memberikan gambaran keseluruhan panggilan yang dibuat ke host terowong. Data ini agak terhad. Nasib baik, ngrokmenawarkan papan pemuka yang sangat bagus, yang membolehkan anda memeriksa semua panggilan:

Saya tidak akan membahas perkara ini dengan mendalam kerana sudah jelas apabila anda menjalankannya. Oleh itu, saya akan menerangkan cara mengaksesnya di kotak Vagrant kerana ia tidak berfungsi di luar kotak.

Papan pemuka akan membolehkan anda melihat semua panggilan, kod statusnya, tajuk dan data yang dihantar. Anda juga akan melihat respons yang dihasilkan oleh aplikasi anda.

Satu lagi ciri papan pemuka yang kemas ialah ia membolehkan anda memainkan semula panggilan tertentu. Katakanlah kod webhook anda mengalami kesalahan yang besar, akan membosankan untuk memulakan pembayaran baru dan menunggu webhook dipanggil. Mengulang panggilan sebelumnya menjadikan proses pengembangan anda lebih cepat.

Papan pemuka secara lalai boleh diakses di // localhost: 4040.

Papan pemuka dalam VM

Untuk menjadikan ini berfungsi di dalam VM, anda harus melakukan beberapa langkah tambahan:

Pertama, pastikan VM dapat diakses di port 4040. Kemudian, buat fail di dalam VM yang memegang konfigurasi ini:

web_addr: 0.0.0.0:4040

Sekarang, bunuh ngrokproses yang masih berjalan dan mulakannya dengan arahan yang sedikit disesuaikan ini:

ngrok http -config=/path/to/config/ngrok.conf -host-header=rewrite webhook.example.vagrant:80

You will get a screen looking similar to the previous screenshot though the ID’s have changed. The previous URL doesn’t work anymore, but you got a new URL. Also, the Web Interface URL got changed:

Now direct your browser to //webhook.example.vagrant:4040 to access the dashboard. Also, make a call to //e65642b5.ngrok.io/webhook.php.This will probably result in an error in your browser, but the dashboard should show the request being made.

Final remarks

The examples above are pseudo-code. The reason is that every external system uses webhooks in a different way. I tried to give an example based on a fictive PSP implementation, as probably many developers have to deal with payments at some moment.

Please be aware that your webhook URL can also be used by others with bad intentions. Make sure to validate any input being sent to it.

Preferably also add a token to the URL which is unique for each payment. This token must only be known by your system and the system sending the webhook.

Good luck testing and debugging your webhooks!

Note: I haven’t tested this tutorial on Docker. However, this Docker container looks like a good starting point and includes clear instructions. //github.com/wernight/docker-ngrok.

Stefan Doorn

//github.com/stefandoorn

//twitter.com/stefan_doorn

//www.linkedin.com/in/stefandoorn