Πώς να δοκιμάσετε τα Webhooks όταν αναπτύσσετε τοπικά

Τα webhooks μπορούν να χρησιμοποιηθούν από ένα εξωτερικό σύστημα για την ειδοποίηση του συστήματός σας σχετικά με ένα συγκεκριμένο συμβάν ή ενημέρωση. Πιθανώς ο πιο γνωστός τύπος είναι αυτός όπου ένας Πάροχος Υπηρεσιών Πληρωμών (PSP) ενημερώνει το σύστημά σας για ενημερώσεις κατάστασης των πληρωμών.

Συχνά έρχονται με τη μορφή όπου ακούτε μια προκαθορισμένη διεύθυνση URL. Για παράδειγμα //example.com/webhooks/payment-update. Εν τω μεταξύ, το άλλο σύστημα στέλνει ένα αίτημα POST με συγκεκριμένο ωφέλιμο φορτίο σε αυτήν τη διεύθυνση URL (για παράδειγμα ένα αναγνωριστικό πληρωμής). Μόλις εισέλθει το αίτημα, ανακτάτε το αναγνωριστικό πληρωμής, ζητάτε από το PSP την τελευταία κατάσταση μέσω του API τους και ενημερώστε τη βάση δεδομένων σας μετά.

Άλλα παραδείγματα μπορούν να βρεθούν σε αυτήν την εξαιρετική εξήγηση για τα Webhooks. //sendgrid.com/blog/whats-webhook/.

Ο έλεγχος αυτών των webhooks γίνεται αρκετά ομαλά όσο το σύστημα είναι προσβάσιμο από το κοινό μέσω του Διαδικτύου. Αυτό μπορεί να είναι το περιβάλλον παραγωγής σας ή ένα περιβάλλον προσβάσιμης στο κοινό. Γίνεται πιο δύσκολο όταν αναπτύσσετε τοπικά στον φορητό υπολογιστή σας ή μέσα σε μια εικονική μηχανή (VM, για παράδειγμα, ένα κουτί Vagrant). Σε αυτές τις περιπτώσεις, οι τοπικές διευθύνσεις URL δεν είναι δημόσια προσβάσιμες από το μέρος που στέλνει το webhook. Επίσης, η παρακολούθηση των αιτημάτων που αποστέλλονται είναι δύσκολη, γεγονός που μπορεί να δυσχεράνει την ανάπτυξη και τον εντοπισμό σφαλμάτων.

Τι θα λύσει αυτό το παράδειγμα:

  • Δοκιμές webhooks από ένα τοπικό περιβάλλον ανάπτυξης, το οποίο δεν είναι προσβάσιμο μέσω του Διαδικτύου. Δεν είναι δυνατή η πρόσβαση από την υπηρεσία που στέλνει τα δεδομένα στο webhook από τους διακομιστές τους.
  • Παρακολουθήστε τα αιτήματα και τα δεδομένα που αποστέλλονται, αλλά και την απάντηση που δημιουργεί η εφαρμογή σας. Αυτό θα επιτρέψει τον ευκολότερο εντοπισμό σφαλμάτων και συνεπώς έναν μικρότερο κύκλο ανάπτυξης.

Προαπαιτούμενα:

  • Προαιρετικά : σε περίπτωση που αναπτύσσετε χρήση εικονικής μηχανής (VM), βεβαιωθείτε ότι λειτουργεί και βεβαιωθείτε ότι τα επόμενα βήματα έχουν γίνει στο VM.
  • Για αυτό το σεμινάριο, υποθέτουμε ότι έχετε ορίσει vhost στο webhook.example.vagrant. Χρησιμοποίησα ένα Vagrant VM για αυτό το σεμινάριο, αλλά είστε ελεύθεροι να επιλέξετε το όνομα του vhost σας.
  • Εγκαταστήστε ngrokακολουθώντας τις οδηγίες εγκατάστασης. Μέσα σε ένα VM, θεωρώ ότι η έκδοση του κόμβου είναι επίσης χρήσιμη: //www.npmjs.com/package/ngrok, αλλά μη διστάσετε να χρησιμοποιήσετε άλλες μεθόδους.

Υποθέτω ότι δεν έχετε SSL στο περιβάλλον σας, αλλά αν το κάνετε, μη διστάσετε να αντικαταστήσετε τη θύρα 80 με τη θύρα 433 και //με //τα παρακάτω παραδείγματα.

Κάντε το webhook δοκιμή

Ας υποθέσουμε τον ακόλουθο κωδικό κώδικα. Θα χρησιμοποιώ PHP, αλλά θα το διαβάσω ως ψευδοκώδικα καθώς άφησα ορισμένα κρίσιμα μέρη (για παράδειγμα κλειδιά API, επικύρωση εισόδου κ.λπ.)

Το πρώτο αρχείο: payment.php . Αυτό το αρχείο δημιουργεί ένα αντικείμενο πληρωμής και, στη συνέχεια, το καταχωρεί στο PSP. Στη συνέχεια, παίρνει τη διεύθυνση URL που πρέπει να επισκεφτεί ο πελάτης για να πληρώσει και ανακατευθύνει τον χρήστη στον πελάτη εκεί.

Λάβετε υπόψη ότι webhook.example.vagrantσε αυτό το παράδειγμα είναι το τοπικό vhost που έχουμε ορίσει για τη ρύθμιση ανάπτυξης. Δεν είναι προσβάσιμο από τον έξω κόσμο.

 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());

Δεύτερο αρχείο: webhook.php . Αυτό το αρχείο περιμένει να κληθεί από το PSP για να ενημερωθείτε σχετικά με ενημερώσεις.

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

Η διεύθυνση URL του webhook δεν είναι προσβάσιμη μέσω του Διαδικτύου (θυμηθείτε:) webhook.example.vagrant. Έτσι, το αρχείο webhook.php δεν θα καλείται ποτέ από το PSP. Το σύστημά σας δεν θα γνωρίσει ποτέ την κατάσταση πληρωμής. Αυτό οδηγεί τελικά σε παραγγελίες που δεν αποστέλλονται ποτέ σε πελάτες.

Ευτυχώς, το ngrok μπορεί να λύσει αυτό το πρόβλημα. Το ngrok περιγράφεται ως:

Το ngrok εκθέτει τοπικούς διακομιστές πίσω από NAT και τείχη προστασίας στο δημόσιο Διαδίκτυο μέσω ασφαλών σηράγγων.

Ας ξεκινήσουμε μια βασική σήραγγα για το έργο μας. Στο περιβάλλον σας (είτε στο σύστημά σας είτε στο VM) εκτελέστε την ακόλουθη εντολή:

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

Διαβάστε για περισσότερες επιλογές διαμόρφωσης στην τεκμηρίωσή τους: //ngrok.com/docs.

Θα εμφανιστεί μια τέτοια οθόνη:

Τι ξεκινήσαμε; Βασικά, δώσαμε εντολή ngrokνα ξεκινήσει μια σήραγγα //webhook.example.vagrantστη θύρα 80. Αυτή η ίδια διεύθυνση URL μπορεί πλέον να προσεγγιστεί μέσω //39741ffc.ngrok.ioή //39741ffc.ngrok.io, Είναι δημόσια προσβάσιμη μέσω του Διαδικτύου από οποιονδήποτε γνωρίζει αυτήν τη διεύθυνση URL.

Λάβετε υπόψη ότι έχετε τόσο HTTP όσο και HTTPS διαθέσιμα από το κουτί. Η τεκμηρίωση παρέχει παραδείγματα για το πώς να το περιορίσετε μόνο σε HTTPS: //ngrok.com/docs#bind-tls.

Λοιπόν, πώς κάνουμε το webhook να λειτουργεί τώρα; Ενημέρωση πληρωμής.php στον ακόλουθο κωδικό:

 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());

Τώρα, είπαμε στο PSP να καλέσει τη διεύθυνση URL της σήραγγας μέσω HTTPS. Το ngrok θα διασφαλίσει ότι η εσωτερική σας διεύθυνση URL θα κληθεί με μη τροποποιημένο ωφέλιμο φορτίο, μόλις το PSP καλέσει το webhook μέσω της σήραγγας.

Πώς να παρακολουθείτε κλήσεις στο webhook;

Το στιγμιότυπο οθόνης που έχετε δει παραπάνω δίνει μια επισκόπηση των κλήσεων που πραγματοποιούνται στον κεντρικό υπολογιστή της σήραγγας. Αυτά τα δεδομένα είναι μάλλον περιορισμένα. Ευτυχώς, ngrokπροσφέρει ένα πολύ ωραίο ταμπλό, το οποίο σας επιτρέπει να ελέγχετε όλες τις κλήσεις:

Δεν θα πάω σε αυτό πολύ βαθιά γιατί είναι αυτονόητο μόλις το εκτελέσετε. Επομένως, θα εξηγήσω πώς να αποκτήσετε πρόσβαση σε αυτό στο πλαίσιο Vagrant, καθώς δεν λειτουργεί έξω από το κουτί.

Ο πίνακας ελέγχου θα σας επιτρέψει να δείτε όλες τις κλήσεις, τους κωδικούς κατάστασης, τις κεφαλίδες και τα δεδομένα που αποστέλλονται. Θα δείτε επίσης την απάντηση που δημιούργησε η εφαρμογή σας.

Ένα άλλο τακτοποιημένο χαρακτηριστικό του ταμπλό είναι ότι σας επιτρέπει να αναπαραγάγετε μια συγκεκριμένη κλήση. Ας υποθέσουμε ότι ο κώδικας webhook σας αντιμετώπισε μοιραίο σφάλμα, θα ήταν κουραστικό να ξεκινήσετε μια νέα πληρωμή και να περιμένετε να κληθεί το webhook. Η επανάληψη της προηγούμενης κλήσης κάνει τη διαδικασία ανάπτυξής σας πιο γρήγορη.

Ο πίνακας ελέγχου από προεπιλογή είναι προσβάσιμος στο // localhost: 4040.

Πίνακας ελέγχου σε VM

Για να το κάνετε αυτό σε ένα VM, πρέπει να εκτελέσετε μερικά επιπλέον βήματα:

Πρώτα, βεβαιωθείτε ότι μπορείτε να έχετε πρόσβαση στο VM στη θύρα 4040. Στη συνέχεια, δημιουργήστε ένα αρχείο μέσα στο VM που κρατά αυτή τη διαμόρφωση:

web_addr: 0.0.0.0:4040

Τώρα, σκοτώστε τη ngrokδιαδικασία που εξακολουθεί να εκτελείται και ξεκινήστε με αυτήν την ελαφρώς προσαρμοσμένη εντολή:

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.

Κατά προτίμηση, προσθέστε επίσης ένα διακριτικό στη διεύθυνση URL που είναι μοναδική για κάθε πληρωμή. Αυτό το διακριτικό πρέπει να είναι γνωστό μόνο από το σύστημά σας και το σύστημα που στέλνει το webhook.

Καλή δοκιμή και εντοπισμός σφαλμάτων των webhooks σας!

Σημείωση: Δεν έχω δοκιμάσει αυτό το σεμινάριο στο Docker. Ωστόσο, αυτό το κοντέινερ Docker μοιάζει με ένα καλό σημείο εκκίνησης και περιλαμβάνει σαφείς οδηγίες. //github.com/wernight/docker-ngrok.

Στέφαν Ντόρν

//github.com/stefandoorn

//twitter.com/stefan_doorn

//www.linkedin.com/in/stefandoorn