webhook使用_如何使用Netlify函数和JavaScript接收Webhook事件

webhook使用

If you’re building event-driven applications, you’ve probably considered building them in a Serverless platform. It’s really well suited for having small functions, running when there’s an incoming event, processing the data, and then going dormant. Instead of building your own event loop that sits idle in between events, you’re offloading all that logic to a serverless provider. Being a lazy developer, I’m a fan of writing as little code as possible .

如果要构建事件驱动的应用程序，则可能已经考虑过在无服务器平台中构建它们。 它非常适合具有小功能，在有传入事件发生时运行，处理数据然后进入Hibernate状态。 与其建立自己的在事件之间闲置的事件循环，不如将所有逻辑卸载到无服务器提供程序中。 作为一个懒惰的开发人员，我喜欢编写尽可能少的代码fan。

It won’t come as a shock that most of my webhooks are running on serverless instead of on my local machine, or on a VM I have to maintain somewhere. We’ve recently been using Netlify here at Fidel for our documentation previews, so I thought I’d give Netlify Functions a try. In this blog post, I’m going to use them with JavaScript to receive webhook events from an API.

我的大多数Webhooks都运行在无服务器而不是本地计算机上，或者在我必须维护的VM上，这并不令人感到震惊。 我们最近在Fidel的文档预览中一直使用Netlify，因此我想尝试一下Netlify Functions 。 在此博客文章中，我将使用它们与JavaScript来接收来自API的webhook事件。

什么是Webhooks？ (What Are Webhooks?)

Before we begin, let’s do a little refresher on what webhooks really are. If you think about APIs as black boxes that allow you to call them up once in a while, webhooks are the mechanism they use to call you back when they’ve got stuff to tell you. When you want to ask an API to do things for your application, you make an HTTP request to the API endpoint, and send some data. When an API wants to send some data to your application, without you having to ask for it every second (also known as polling), they make an HTTP request to your webhook URL.

在开始之前，让我们先回顾一下真正的webhooks。 如果您将API视为黑匣子，使您可以不时地对其进行调用，那么webhooks是他们用来在有事情要告诉您时回叫您的机制。 当您想让API为您的应用程序做事时，您可以向API端点发出HTTP请求，并发送一些数据。 当API希望将一些数据发送到您的应用程序时，而无需您每秒询问一次(也称为轮询)时，它们会向您的Webhook URL发出HTTP请求。

Now that we know what webhooks are, let’s look at a few things you’ll need to follow along this journey of receiving webhook events with Netlify Functions and JavaScript.

既然我们知道了什么是网络钩子，下面让我们看一下在使用Netlify函数和JavaScript接收Webhook事件的过程中需要遵循的几件事。

先决条件 (Prerequisites)

• Node.js installed

  安装了Node.js

• A Netlify Account

  一个Netlify帐户

• A Fidel Account

  菲德尔账户

创建Netlify函数 (Creating a Netlify Function)

设置Netlify CLI (Set Up Netlify CLI)

I’m going to use the Netlify CLI to create and deploy a Function. In case you don’t have it installed, now would be a good time to do so.

我将使用Netlify CLI创建和部署功能。 如果您没有安装它，现在是个不错的选择。

npm install netlify-cli -g

After you’ve installed the CLI, you’ll also need to authenticate it with your Netlify account.

安装CLI后，还需要使用Netlify帐户对其进行身份验证。

netlify login

This will open a browser window, asking for permission to access Netlify on your behalf. Go ahead and authorize that.

这将打开一个浏览器窗口，代表您请求访问Netlify的权限。 继续进行授权。

We’ll also need to create a netlify.toml file in the root of your project folder, and we'll enable functions there.

我们还需要在您的项目文件夹的根目录中创建一个netlify.toml文件，并在其中启用功能。

[build]
  functions = "functions"
  publish = "dist"

创建一个Netlify函数 (Create a Netlify Function)

Now that we’re all set up with Netlify, we can go ahead and create a Function with the CLI.

现在，我们都已经使用Netlify进行了设置，我们可以继续使用CLI创建功能。

netlify functions:create

This will create an interactive prompt, asking you for a template. I’ve chosen [hello-world], which is a basic JavaScript function that shows async/await usage, and formats your response. The prompt also asks for a name for your function, I've named mine webhook. The output of my command looked a little bit like this:

这将创建一个交互式提示，要求您提供模板。 我选择了[hello-world] ，这是一个基本JavaScript函数，用于显示异步/等待使用情况并格式化响应。 提示符还要求您为函数命名，我将其命名为mine webhook 。 我的命令输出看起来像这样：

$ netlify functions:create
? Pick a template js-hello-world
? name your function: webhook 
◈ Creating function webhook 
◈ Created /Users/laka/fidel/fidel-webhooks-netlify/functions/webhook/hello-world.js

The command also created a webhook.js file in the /functions/webhook/ folder. That was boilerplate code, and I've changed it a bit. I'm removing the Hello World code, and instead of logging the request body, and sending back a 200 OK status on the response. The logic is all wrapped in a try/catch that sends a 500 status and the error on the response in case something happened with the request. Which it shouldn't, but better safe than sorry. Most APIs have a retry mechanism for webhooks, so if we send back anything other than a 200, the API is going to resend the webhook later.

该命令还在/functions/webhook/文件夹中创建了一个webhook.js文件。 那是样板代码，我做了一些更改。 我要删除Hello World代码，而不是记录请求正文，并在响应上发送回200 OK状态。 逻辑全部包装在try/catch ，该请求发送500状态和响应错误，以防请求发生问题。 它不应该这样做，但是比后悔更安全。 大多数API都有针对Webhook的重试机制，因此，如果我们发回200以外的任何内容，则该API将稍后重新发送Webhook。

exports.handler = async (event, context) => {
  try {
    console.log(event.body)
    return {
      statusCode: 200
    }
  } catch (err) {
    return { statusCode: 500, body: err.toString() }
  }
}

部署Netlify功能 (Deploying a Netlify Function)

This is the most basic webhook example I could think of. It logs or saves the event coming from an API, and sends back a confirmation code. What you do inside of that webhook should be based on your application logic, I’m showing you here the mechanism for this transport pattern.

这是我能想到的最基本的webhook示例。 它记录或保存来自API的事件，然后发回确认代码。 您在该Webhook中执行的操作应基于您的应用程序逻辑，在此向您展示此传输模式的机制。

The code needs to be deployed before we can use it, so let’s go ahead and use the Netlify CLI to do that.

在使用代码之前，需要先对其进行部署，因此让我们继续使用Netlify CLI进行此操作。

netlify deploy --prod

After the deploy finished, the output of my terminal looked a bit like this:

部署完成后，终端的输出看起来像这样：

$ netlify deploy --prod   
Deploy path:        /Users/laka/fidel/fidel-webhooks-netlify/dist
Functions path:     /Users/laka/fidel/fidel-webhooks-netlify/functions
Configuration path: /Users/laka/fidel/fidel-webhooks-netlify/netlify.toml
Deploying to main site URL...
✔ Finished hashing 1 files and 1 functions
✔ CDN requesting 0 files and 1 functions
✔ Finished uploading 1 assets
✔ Deploy is live!
Logs:              https://app.netlify.com/sites/fidel-webhooks/deploys/5f19b5e49db36302958eeefe
Unique Deploy URL: https://5f19b5e49db36302958eeefe--fidel-webhooks.netlify.app
Website URL:       https://fidel-webhooks.netlify.app

Once the deploy is live, you’ll be able to access your webhook logs in your Netlify dashboard. If you select your webhook there, you’ll see the log window refresh in real-time, and that’s where you’ll find your function endpoint as well. The naming convention Netlify uses is https://your-app.netlify.app/.netlify/functions/your-function. Mine was https://fidel-webhooks.netlify.app/.netlify/functions/webhook.

部署生效后 ，您将可以在Netlify仪表板中访问Webhook日志。 如果在此处选择Webhook，则将看到日志窗口实时刷新，在那也可以找到函数端点。 Netlify使用的命名约定是https://your-app.netlify.app/.netlify/functions/your-function 。 我的是https://fidel-webhooks.netlify.app/.netlify/functions/webhook 。

设置Fidel API (Set Up for the Fidel API)

Your webhook is live and ready to receive events, the only thing missing is an API to actually send those events . Don’t worry, I’ve got you covered with an example of using the Fidel API to send transaction authorization events to your webhook.

您的Webhook处于活动状态，可以接收事件了，唯一缺少的是实际发送这些事件的API。 不用担心，我为您提供了一个使用Fidel API将事务授权事件发送到您的Webhook的示例。

The Fidel API is providing real-time transaction data about purchases made on a card issued by Visa, Mastercard or Amex. Because of that real-time component, it wouldn’t be wise to keep polling it every second or so to see if there are any new transactions. The API implements a webhook mechanism to send that data to your application whenever a new event happens. It actually supports quite a few webhooks for different types of events, but I won’t dig into that here. We’ll just focus on transactions for now.

Fidel API正在提供有关在Visa，Mastercard或Amex发行的卡上进行的购买交易的实时交易数据。 由于存在实时组件，因此每秒进行一次轮询以查看是否有任何新事务是不明智的。 该API实现了一个Webhook机制，以便在发生新事件时将该数据发送到您的应用程序。 实际上，它支持许多针对不同类型事件的webhooks，但是在这里我不会对此进行深入探讨。 现在，我们仅关注交易。

Before we begin, you’ll need to grab your Fidel API Key from the Dashboard. I’m using my Test Key for this, I want to be able to simulate transactions. It should look similar to sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63.

在开始之前，您需要从信息中心获取Fidel API密钥 。 我为此使用我的测试密钥，我希望能够模拟交易。 它看起来应该类似于sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63 。

The API needs you to set up some plumbing before you can receive transactions, and we’re going to use cURL commands to do that setup, instead of pointing and clicking in the dashboard. If you’re already a Fidel user and have registered a program, brand, location and card, feel free to skip these steps go straight to registering your webhook with the Fidel API.

该API需要您设置一些管道，然后才能接收交易，并且我们将使用cURL命令进行该设置，而不是指向和单击仪表板。 如果您已经是Fidel用户并且已经注册了程序，品牌，​​位置和卡，请随时跳过这些步骤，直接向Fidel API注册您的Webhook。

The container for your transactions in the Fidel world is a Program. We’ll start by creating one. Don’t forget to replace fidel-key with your own before you run the cURL command.

在Fidel世界中，您进行交易的容器是一个程序。 我们将从创建一个开始。 运行cURL命令之前，请不要忘记用自己的fidel-key替换。

curl -X POST \
  https://api.fidel.uk/v1/programs \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "name": "Avocados"
  }'

The command outputs a JSON response from the API, with data about the program we created. We’ll look for the id of it and make a note, we'll be using it later on.

该命令从API输出JSON响应，其中包含有关我们创建的程序的数据。 我们将查找它的id并做一个记录，稍后我们将使用它。

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","live":false,"name":"Avocados","syncStats":{"status":"completed"},"updated":"2020-07-24T12:03:00.251Z","created":"2020-07-24T12:03:00.251Z","id":"08a09745-1e75-4ac3-baaf-f8548c31b25e","active":true,"activeDate":"2020-07-24T12:03:00.251Z","sync":false}],"resource":"/v1/programs","status":201,"execution":79.233234}%

Now that we have a Program, we’ll also need to create a Brand for our program.

现在我们有了一个程序，我们还需要为我们的程序创建一个品牌。

curl -X POST \
  https://api.fidel.uk/v1/brands \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "name": "Bacon Avocados"
  }'

Here’s the output for that command. We’ll make a note of the id for the brand as well, we’ll need to use it later on.

这是该命令的输出。 我们还将记下该品牌的ID，我们稍后需要使用它。

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","consent":true,"live":false,"name":"Bacon Avocados","updated":"2020-07-24T12:05:35.868Z","created":"2020-07-24T12:05:35.868Z","id":"59ded730-007e-43a6-8547-7612d31355cb"}],"resource":"/v1/brands","status":201,"execution":15.915342}%

Now that we have a brand and a program, we can create a Location for that brand. That location represents a physical store, so we can later simulate a live transaction originating there. We’ll use the Program id we got from the previous command, and replace it in the URL. We’ll also use the brandId in the request body to link the location to the Bacon Avocados brand.

现在我们有了一个品牌和一个程序，我们可以为该品牌创建一个位置。 该位置代表实体商店，因此我们以后可以模拟源自该实体商店的实时交易。 我们将使用从上一条命令获得的程序ID，并将其替换为URL。 我们还将在请求正文中使用brandId将位置链接到Bacon Avocados品牌。

curl -X POST \
  https://api.fidel.uk/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/locations \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "address": "2 Avocado Square", 
    "brandId": "59ded730-007e-43a6-8547-7612d31355cb", 
    "city": "London", 
    "countryCode": "GBR",
    "postcode": "W1D 3PX",
    "searchBy": {
        "merchantIds": {
            "visa": ["1234567","7654321"],
            "mastercard": ["1234567","7654321"]
        }
    }
}'

The output for this command has slightly more data, and that’s because the location has information for each card network scheme available. We’ll need to make a note of the id as well, that's what we're going to use to identify this location when we're making a transaction.

该命令的输出包含更多数据，这是因为该位置具有每个可用的卡网络方案的信息。 我们还需要记录一下id ，这就是我们进行交易时将用来标识此位置的信息。

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","address":"2 Avocado Square","brandId":"59ded730-007e-43a6-8547-7612d31355cb","city":"London","countryCode":"GBR","currency":"GBP","live":false,"postcode":"W1D3PX","programId":"08a09745-1e75-4ac3-baaf-f8548c31b25e","geolocation":{"latitude":51.5138332,"longitude":-0.1318224},"preonboard":false,"searchBy":{"merchantIds":{"visa":["1234567","7654321"],"mastercard":["1234567","7654321"]}},"timezone":"Europe/London","updated":"2020-07-24T12:10:17.533Z","created":"2020-07-24T12:10:17.533Z","id":"fe77e7f5-350b-4c34-be68-3e16e7c95d66","amex":{"clearing":false,"auth":false,"authTransactionId":null,"clearingTransactionId":null,"status":"active"},"mastercard":{"clearing":false,"auth":false,"authTransactionId":null,"clearingTransactionId":null,"status":"active"},"visa":{"clearing":false,"auth":false,"authTransactionId":null,"clearingTransactionId":null,"status":"active"},"activeDate":"2020-07-24T12:10:17.533Z","active":true}],"resource":"/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/locations","status":201,"execution":55.277626}%

Now that we’ve set up our location, the only piece missing is a card to simulate a transaction from this location. We’ll need to replace the program id in the URL here as well. We’re not going to register an actual card here, we’re using test cards. Depending on the card network we want to use, there are different ranges of card numbers we can use. For example, I’ll use a test Visa card. Those follow a wildcard format in the range of 4444 0000 0000 4***. I'll use 4444000000004001 as my card number. The cards API also uses a different key for authorization, so instead of using your Secret API Key, you'll need to use your Public SDK Key from the Dashboard. It looks similar to the other one, the main difference is it starts with pk instead of sk. My example uses pk_test_62f02030-0409-4eb5-ab94-6eff05b3d888.

现在我们已经设置好位置，唯一缺少的就是一张模拟来自该位置的交易的卡片。 我们还需要在此处替换网址中的程序ID。 我们不会在这里注册实际的卡，而是使用测试卡。 根据我们要使用的卡网络，可以使用不同范围的卡号。 例如，我将使用测试Visa卡。 这些遵循通配符格式，范围为4444 0000 0000 4*** 。 我将使用4444000000004001作为我的卡号。 卡API还使用其他密钥进行授权，因此您需要使用仪表板中的 Public SDK密钥，而不是使用Secret API密钥。 它看起来与另一个相似，主要区别是它以pk而不是sk开头。 我的示例使用pk_test_62f02030-0409-4eb5-ab94-6eff05b3d888 。

curl -X POST \
  https://api.fidel.uk/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/cards \
  -H 'content-type: application/json' \
  -H 'fidel-key: pk_test_62f02030-0409-4eb5-ab94-6eff05b3d888' \
  -d '{
    "number": "4444000000004222",
    "expMonth": 10,
    "expYear": 2025,
    "countryCode": "GBR",
    "termsOfUse": true
}'

The output from the command should give us an id for the card, and we'll make a note of it. That's what we'll need when we make a transaction.

该命令的输出应为我们提供该卡的id ，我们将对其进行记录。 这就是我们进行交易时需要的。

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","countryCode":"GBR","expDate":"2025-10-31T23:59:59.999Z","expMonth":10,"expYear":2025,"firstNumbers":"444400","lastNumbers":"4222","live":false,"programId":"08a09745-1e75-4ac3-baaf-f8548c31b25e","scheme":"visa","type":"visa","updated":"2020-07-24T12:28:16.957Z","created":"2020-07-24T12:28:16.957Z","id":"bb9b4a67-203c-4eae-8b09-070e819629cc"}],"resource":"/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/cards","status":201,"execution":47.026675}%

注册Webhook (Register Webhook)

We’ve set up everything we needed to start receiving transactions via the Fidel API. But for now, they would only show up in the Fidel Dashboard. If we want to use the real-time transactions in our application, we need to register a webhook URL for them. As I mentioned earlier, the Fidel API supports quite a few different webhooks. We’re going to use the transaction.auth event today, and that fires when a transaction is being authorized. That usually happens as soon as you use your card in person or online to shop. Don't forget to replace the program id in the URL with your own. And use your own Netlify webhook URL in the request payload.

我们已经设置了开始通过Fidel API接收交易所需的一切。 但是目前，它们只会出现在Fidel仪表板上。 如果要在应用程序中使用实时交易，则需要为其注册一个Webhook URL。 如前所述，Fidel API支持许多不同的Webhooks。 今天，我们将使用transaction.auth事件，并且在授权交易时会触发该事件。 通常，当您亲自或在线使用卡购物时，这种情况就会发生。 不要忘记用您自己的URL替换程序ID。 并在请求有效负载中使用您自己的Netlify Webhook URL。

curl -X POST \
  https://api.fidel.uk/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/hooks \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "event": "transaction.auth",
    "url": "https://fidel-webhooks.netlify.app/.netlify/functions/webhook"
  }'

The JSON response from the API should be output to the terminal. It looks similar to this:

来自API的JSON响应应输出到终端。 它看起来类似于：

{"items":[{"accountId":"3693ac7e-3e2b-432c-8c60-2b786453ca9b","event":"transaction.auth","live":false,"programId":"08a09745-1e75-4ac3-baaf-f8548c31b25e","url":"https://fidel-webhooks.netlify.app/.netlify/functions/webhook","updated":"2020-07-24T12:39:15.131Z","created":"2020-07-24T12:39:15.131Z","id":"df1ab75a-04f9-4627-9b0a-c08cd28572e5","secretKey":"wh_ta_425e3be6-d7e3-4ad4-b747-5d5c498f171b"}],"resource":"/v1/programs/08a09745-1e75-4ac3-baaf-f8548c31b25e/hooks","status":201,"execution":87.066399}%

创建验证交易 (Create an Auth Transaction)

Now that we’ve registered our webhook with the Fidel API, we can start creating test transactions, and we should see them coming in the Netlify Function logs. We’re using the test transactions endpoint in the Fidel API, and this only works in test mode. If your account is live, you’ll need to switch it back to test mode to follow along with this tutorial. Don’t forget to replace your locationId and cardId in the request payload.

现在我们已经使用Fidel API注册了Webhook，我们可以开始创建测试事务，并且应该在Netlify Function日志中看到它们。 我们在Fidel API中使用了测试交易端点，这仅在测试模式下有效。 如果您的帐户是真实帐户，则需要将其切换回测试模式，以遵循本教程。 不要忘记在请求有效负载中替换您的locationId和cardId 。

curl -X POST \
  https://api.fidel.uk/v1/transactions/test \
  -H 'content-type: application/json' \
  -H 'fidel-key: sk_test_50ea90b6-2a3b-4a56-814d-1bc592ba4d63' \
  -d '{
    "amount": 12.34,
    "cardId": "bb9b4a67-203c-4eae-8b09-070e819629cc",
    "locationId": "fe77e7f5-350b-4c34-be68-3e16e7c95d66"
  }'

After you run this command, you can see the webhook logs in the Netlify Function log. Mine looked a bit like this after I received the event on my webhook:

运行此命令后，您可以在Netlify功能日志中看到webhook日志。 我在网络挂钩上收到事件后，我的表情看起来像这样：

1:51:56 PM: 2020-07-24T12:51:56.589Z 7989b0a6-f0ce-4985-a45f-7e22ec0ff6c6 INFO {"auth":true,"currency":"GBP","id":"4b549d95-1540-4332-891a-dd2c7603b090","amount":12.34,"wallet":null,"created":"2020-07-24T12:51:55.918Z","accountId":"36081095-2782-4669-8a07-857bbaaeb89b","cleared":false,"updated":"2020-07-24T12:51:55.918Z","programId":"f2c9719a-6433-4ef4-8401-19d7ebf60ab9","datetime":"2020-07-24T13:51:55","card":{"id":"14bda5c9-d5d9-40ef-87e3-158c2f5f2f8d","firstNumbers":"444400","lastNumbers":"4001","scheme":"visa"},"location":{"address":"Titulescu Nr. 16","city":"Bristol","countryCode":"GBR","id":"793f5298-3715-43ef-b89d-1b1cedddd716","geolocation":null,"postcode":"BS16UZ","timezone":"Europe/London","metadata":null},"brand":{"id":"9cd32c61-43ca-4bb7-8aca-0cf491112c28","name":"Avocado","logoURL":"https://developeravocados.net/img/avatar-icon.png","metadata":null},"identifiers":{"MID":"TEST_MID_a7d6bc8f-7837-4f3b-aa43-8c51478ce189","mastercardTransactionSequenceNumber":null,"mastercardRefNumber":null,"amexApprovalCode":null,"visaAuthCode":null}} 1:51:56 PM: Duration: 1.36 ms Memory Usage: 64 MB

下一步是什么？ (What’s Next?)

Hopefully, you’ve followed me along this journey and we’ve managed to receive webhook events on a Netlify Function using JavaScript. If you’ve found them interesting, there are a lot more things you can do with them. For example, you could save that transaction event to a FaunaDB.

希望您在我的旅程中一直跟随我，并且我们设法使用JavaScript在Netlify Function上接收了webhook事件。 如果您发现它们很有趣，则可以使用它们做更多的事情。 例如，您可以将该交易事件保存到FaunaDB中 。

If the Fidel API made you curious, and you want to keep exploring, keep in mind all the things I did with cURL today are available either via the Fidel Dashboard or our API. You can check out the API Reference and use your favorite HTTP client to play with it.

如果Fidel API让您感到好奇，并且想继续探索，请记住，我今天对cURL所做的所有操作都可以通过Fidel Dashboard或我们的API获得。 您可以签出API参考，并使用自己喜欢的HTTP客户端来玩它。

Originally published at https://fidel.uk.

最初在 https://fidel.uk上 发布 。

翻译自: https://medium.com/swlh/how-to-receive-webhook-events-with-netlify-functions-and-javascript-390b36bfc6b7

webhook使用