使用Kong、Stripe和Moesif的端到端API货币化

今天你吸猫了么
114 阅读24分钟

许多API开发者和公司都在努力寻找方法，以便轻松地建立系统，使其API盈利。有些很简单，但不能定制，有些则很复杂，需要大量的工程努力才能真正运行。

为了使事情变得更容易，Moesif在几个月前创建了一个名为 "计费表 "的功能，它提供了大量的可定制性，但只需少量的代码和工程努力。

在这个例子中，我们将使用Moesif、Kong和Stripe来向用户收取API使用费，这个例子实际上可以开箱即用。对于这个设置，有几个假设。

  • 你有一个正在运行的Kong实例（已经创建了一个端点和一个路由）。
  • 您的Kong实例已经为您的端点启用了密钥授权
  • 您有一个活跃的Stripe账户
  • 您有一个活跃的Moesif账户
  • 您已经在Kong中安装并配置了Moesif插件

从外面看，设置非常简单。我们将创建一个/register端点，该端点。

  • 在Stripe中注册一个用户
  • 将该用户订阅到一个产品
  • 在Kong中创建一个用户/消费者
  • 在Moesif中注册用户和公司
  • 使用Kong来生成一个API密钥

我还为它创建了一个小的前端，这是一个简单的表单，通过调用/register端点来注册用户，然后为新注册的用户显示生成的API密钥。

1 - 在Stripe中创建你的产品和价格

我们要做的第一步是在Stripe中创建一个产品和价格。最好先做这一步，因为当你把Stripe集成到Moesif时，你已经有一些定价计划供Moesif使用。然后，定价计划可以与Moesif中的计费表内设置的特定计费标准相关联。

要创建一个产品和价格，请登录Stripe并进入Stripe用户界面中的产品页面。在那里，点击右上角的 "添加产品"按钮。

然后您就可以为您的产品和价格添加细节。您的产品的表格将有几个字段需要填写。

名称这是你的产品的名称。在下面的例子中，我们使用 "我的API "这个名称。

描述这个字段是可选的，但你可以把产品的简要描述放在这里。在下面的例子中，我们使用的描述是 "这是一个货币化的API"。

定价模式在Stripe中可以设置几种不同的定价模式。这些定价模式包括。

  • 标准定价
    • 如果您想对每次API调用收取相同的价格，请使用这个。
  • 套餐
    • 如果您对API的使用按套餐或一组单位收费，请使用此方式。例如，您可以将其设置为每1000次API调用收费10美元。每当用户超过1000次API调用的门槛，他们就会再被收取10美元。
  • 渐进式
    • 使用分级定价层，可能会导致订单中的一些单位的价格不同。例如，你可能对前100个单位收取10美元的费用，然后对后面的50个单位收取5美元。今天，这只适用于经常性的价格。
  • 体积
    • 如果你根据售出的单位总数，对每个单位收取相同的价格，则可使用。例如，你可能对50个单位收取10.00美元，对100个单位收取7.00美元。

价格

根据所选择的定价模式，可以在这个领域设置价格。

计费期

计费期可以设置为。

  • 每天
  • 每周
  • 每月
  • 每三个月
  • 每6个月
  • 一年一次
  • 客户

对于您与Moesif的配置，我们建议将计费期设置为每月。我们还建议，如果你使用Moesif的计费表功能，也要勾选 "使用量是计量的"。

通过以下方式对计量使用量进行收费

一旦选择了 "使用量计量"复选框，就会出现 "按计量使用量收费 "的选项。这个字段让你选择计量使用量的计算方式和收费方式。这个字段的可用值是。

  • 在此期间的使用价值之和
    • 用户按整个计费周期记录的使用量收费。
  • 在此期间的最新使用价值
    • 用户根据计费周期结束前记录的最后一次使用量来收费
  • 最近的使用价值
    • 用户在每个计费周期结束时按整个订阅期记录的最后一次使用量收费。
  • 期内最大使用量
    • 用户被收取账单周期内记录的最高金额。

Moesif计费表的最佳设置是将此值设置为期间的使用值之和，因为Moesif每小时向Stripe报告一次使用情况。

价格描述

这是一个可选的字段，但建议使用。在这里您可以对您的价格进行简要描述。这将使您更容易解读您在Moesif的计费表中选择的价格，特别是当您对一个产品有多个价格时。

一旦你输入了你的产品和价格的所有细节，你可以在屏幕的右上角点击保存产品。

当你创建产品时，你将能够在产品屏幕上查看和编辑它们。

2 - 启用Moesif-Stripe集成

一旦您的产品和价格创建完毕，就可以开始将Stripe与Moesif整合。要开始在Moesif中配置Stripe，请转到计费表页面，点击屏幕右上角的编辑计费供应商下拉菜单。

这将弹出Stripe配置屏幕，引导您进行整合。在这个屏幕上，您可以获得将Stripe插入Moesif所需的所有信息。配置的每一步都涵盖在模式中。

向Stripe添加Moesif webhook

集成的第一步是在Stripe的配置中添加Moesif webhook。添加后，Stripe就可以向Moesif发送订阅更新。

要向Stripe添加Moesif webhook，请在右上方点击 "开发人员"，然后在左侧菜单中点击 "Webhooks"。这将使您进入Webhooks页面，您可以查看现有的Webhooks并添加新的。要添加一个新的Webhook，我们将点击屏幕底部的添加一个端点按钮。

从这里，我们将插入我们的Moesif API端点URL并配置要监听的事件。你要把你的Moesif Webhook URL复制到端点URL领域，然后点击**+选择事件**按钮。

这些细节都可以在上一节提到的Moesif的Stripe配置页面中找到。

您应该选择客户下的选项，选择所有客户事件。在这之后，点击屏幕底部的添加事件按钮。

在这之后，您将返回到您添加端点详细信息的原始屏幕。滚动到屏幕的底部，点击添加端点，将端点保存到Stripe。

将Stripe的API细节插入Moesif中

为了让Moesif在Stripe的订阅中添加使用数量，我们需要将Stripe API的详细信息添加到Moesif中。这是在Moesif的Stripe配置屏幕上完成的，也就是我们之前一直在使用的屏幕。

目前，Moesif只支持2020-08-27版本的Stripe API，因此该字段默认为Stripe API版本字段。

对于Stripe API密钥字段，你需要从Stripe检索API密钥来插入它。在 "开发人员"屏幕上，也就是我们在上一步中使用的那个屏幕上，你将点击API密钥。然后您就可以在屏幕上的秘密密钥或生成的受限密钥字段中看到您的API的私人密钥。两种密钥都可以使用。

从Stripe复制密钥后，您将把这个密钥粘贴到Moesif中的Stripe API密钥字段。做完这些后，在Moesif中您可以向下滚动到屏幕底部，点击 "保存"来保存配置。

在这一点上，您的Stripe集成在Moesif中已经完成，您可以开始使用它。

另外，您还可以在Moesif中自定义客户ID的来源。本指南使用默认值，不需要更改。如果你确实需要定制它，这些设置允许你指定如何将Stripe订阅和客户对象映射到Moesif的公司ID和用户ID。

3 - 创建一个计费表

一旦您在Moesif中激活了Stripe集成，您就可以开始设置您的计费表。在Moesif中创建的计费表做两件事：根据特定标准跟踪使用情况，并向计费供应商报告使用情况。Moesif允许你相对容易地设置非常简单和非常复杂的计费表。

要创建计费表，在Moesif中，你将导航到计费表屏幕。你可以从右侧的菜单中这样做。

在计费表屏幕上，你将点击屏幕右上角的**+添加计费表**。

下一个屏幕是你可以为你的计费表实际输入标准的地方。

这个屏幕上的字段包括。

计费表名称这是您的新计费表的Moesif内部名称。

计费供应商在这个下拉菜单中，您可以选择您想发送使用指标的计费供应商。

**产品（仅限Stripe）**在这里您可以选择您在Stripe中设置的产品，您希望您的使用指标与之挂钩。

**价格（仅限Stripe）**在计费表的计费供应商设置中的最后一个字段，在这里您将选择您希望将您的使用指标与哪个价格挂钩。

过滤器在过滤器配置下，您将配置您的计费标准，只包括符合某种标准的请求。

指标在这里，你可以选择你想根据哪个指标来计费。可用的选项包括。

  • 事件计数
    • 这将增加符合过滤器标准的每个事件的用量。
  • 唯一用户
    • 每当有独特的用户发送符合过滤器标准的请求时，这将增加使用量。对于每一个独特的用户，无论该用户的事件数是多少，计数都将增加1。
  • 自定义
    • 这使你能够建立你自己的指标，如收到的数据、美元数量的百分比、计算单位的总和，或围绕你的API的任何其他消费指标。Moesif支持对API主体字段、用户操作等的度量。

关于常见消费指标的更多例子，请查看《基于使用量的计费以实现API货币化的最佳实践》。

作为一个例子，在本指南中，我们将创建一个计费表，它将过滤单个端点的流量，以及请求收到成功的HTTP 200响应的地方。我们将使用事件计数指标来确保每个请求都被添加到统计表中，并发送给计费供应商。

在Moesif，计费表将被配置为如下所示。

然后我们将点击创建。这将创建并激活计费表。然后，当你回到计费表仪表板时，你将看到你的新计费表显示出来。

Moesif现在将对用量进行四舍五入，并将这些细节发送到Stripe。现在，计费表已经配置好了，我们将设置一个流程，让用户注册、订阅，并发放一个API密钥，以便他们可以使用我们的货币化API。

4 - 创建/register端点

我们将建立自己的流程，而不是使用预先建立的入职流程，例如通过API网关中的开发者门户，。我们将创建一个名为**/register**的端点，然后我们可以用它来接纳想要使用API的用户。其结果是，用户会收到一个API密钥，他们可以使用这个密钥来跟踪他们的使用情况。

由于我们正在使用Moesif、Stripe和Kong作为我们整体解决方案的一部分，我们需要确保每个组件都能正常工作。

下面是这个端点要做的事情。

  1. 在Stripe中创建一个用户
  2. 在Stripe中为API订阅订阅新的用户
  3. 在Kong中创建用户/消费者（用Stripe的客户ID作为custom_id字段）。
  4. 在Moesif中创建公司ID（这将是Stripe的订阅ID）。
  5. 在Moesif中创建用户ID（这将是Stripe客户的ID）。
  6. 创建一个API密钥

如果您在Moesif和其他系统中已经有了您想使用的用户和公司标识符，而不是使用Stripe的客户和订阅作为您的ID，您可以在Moesif的Stripe配置设置下这样做。

在这个例子中，我将用Express创建一个简单的NodeJS API来完成上述工作。

创建npm项目

首先，我们将创建一个名为moesif-monetization的文件夹，在那里我们将添加我们的API代码。然后，我们将运行npm init ，将moesif-monetization，这样我们就可以在我们的项目中使用npm。为此，你将在moesif-monetization目录下运行以下命令。

$ npm init

你可以在创建npm项目时根据需要填写细节或使用默认值。

然后你应该在你的moesif-monetization目录下看到一个package.json文件。

现在，在你喜欢的IDE或文本编辑器中打开这个目录。在本教程的剩余部分，我将使用VS Code进行所有的编码工作。

添加项目的依赖性

我们现在要用正确的依赖关系编辑package.json文件。在package.json中，我们将在依赖关系对象下添加以下条目。

"dependencies": {
  "@stripe/stripe-js": "^1.29.0",
  "body-parser": "^1.20.0",
  "dotenv": "^16.0.0",
  "express": "^4.17.1",
  "http": "0.0.1-security",
  "moesif-nodejs": "^3.1.14",
  "node-fetch": "^2.6.5",
  "path": "^0.12.7",
  "stripe": "^8.219.0"
}

保存该文件，然后导航到终端并运行。

$ npm install

现在，你的依赖项将被带入项目，并添加到node_modules文件夹中。这些依赖将帮助我们调用REST端点，连接到Stripe和Moesif，以及我们将在我们的应用程序中建立的各种其他功能。

创建.env文件

我们将把Stripe密钥和其他静态值抽象成一个.env文件，而不是把它们硬编码到我们的应用程序中。我们可以使用我们在package.json中添加的名为dotenv的依赖项来实现这一目标。

在根目录下，创建一个名为**.env**的文件。在这个文件中，我们将添加一些条目，包含我们代码中使用的键和值。

STRIPE_KEY="sk_test_XXX"
STRIPE_PRICE_KEY="price_XXX"
MOESIF_APPLICATION_ID="YOUR_MOESIF_APP__ID"
KONG_URL="http://KONG_URL:8001"

这里的值可以在以下地方找到。

STRIPE_KEY

这可以在我们之前为计费表所做的Stripe和Moesif集成的密钥的同一地方找到。实际上，你可以为两者使用相同的密钥，或者创建一个有限制的密钥，只有每个功能需要的范围。

STRIPE_PRICE_KEY

这将是你之前在Stripe中创建的价格的密钥。这可以通过进入Stripe中的产品并从API ID列中抓取值来找到。

MOESIF_APPLICATION_ID

在Moesif中，通过进入屏幕左下方的菜单链接（将显示您的名字）并选择API密钥，就可以找到它。

然后，密钥将出现在收集器应用ID下的页面上。

KONG_URL

这将是Kong Management API的URL。通常情况下，这将被托管在8001端口，但如果你有一个自定义的配置，它可能会有所不同。

一旦你用四个键值对填充了这个文件，就保存这个文件。在本教程的剩余部分，我们将不需要再碰这个文件。

创建app.js文件

在我们应用程序的根目录下，我们将创建一个app.js文件（如果尚未创建）。在这个文件中，我们将添加以下代码，添加我们的依赖性并创建一个基本的REST端点。

require('dotenv').config();
const express = require('express');
const path = require("path");
const bodyParser = require('body-parser');
const moesif = require('moesif-nodejs');
const Stripe = require('stripe');
// npm i --save node-fetch@2.6.5
const fetch = require('node-fetch');

const app = express();

const port = 5000;
const stripe = Stripe(process.env.STRIPE_KEY);

var jsonParser = bodyParser.json();

const moesifMiddleware = moesif({
 applicationId: process.env.MOESIF_APPLICATION_ID
});

app.use(moesifMiddleware);

app.post('/register', jsonParser,
 async (req, res) => {
 }
)
app.listen(port, () => {
 console.log(`Example app listening at http://localhost:${port}`);
})

在上面的代码中，我们正在。

  • 导入一些依赖项
  • 配置Stripe的依赖性
  • 配置Moesif中间件
  • 创建**/register**端点
  • 设置我们的应用程序在5000端口运行，并启动我们的Node应用程序

你会注意到我们有process.env.STRIPE_KEY和process.env.MOESIF_APPLICATION_ID。这些值将来自我们在上一步创建的**.env**文件。

实现/register端点

我们的下一步是实现**/register**端点。这个端点将在Kong、Stripe和Moesif之间创建我们的绑定。结果将是Kong生成的API Key，它将把使用情况与Moesif中的用户联系起来，然后将其报告给Stripe。

我们流程中的第一步是在Stripe中创建客户。我们将使用我们的Stripe JS依赖性来完成这一工作。我们将使用请求正文中的参数（电子邮件、名字、姓氏）来使用stripe.customers.create函数在Stripe中创建客户。然后我们将把创建的客户存储在一个自定义变量中，这样我们就可以在Stripe中访问生成的客户ID。

const customer = await stripe.customers.create({
     email: req.body.email,
     name: `${req.body.firstname} ${req.body.lastname}`,
     description: 'Customer created through /register endpoint',
   });

接下来，我们将把这个新用户订阅到我们之前在Stripe中创建的API订阅。我们将使用stripe.subscriptions.create函数，并使用之前函数调用中生成的客户ID来订阅他们。这将返回一个包含ID的订阅对象，我们将在后面使用。

   const subscription = await stripe.subscriptions.create({
     customer: customer.id,
     items: [
       { price: process.env.STRIPE_PRICE_KEY },
     ],
   });

然后，我们将在Kong中创建消费者，允许我们为这个用户生成一个密钥。我们将通过Kong admin APIs向Kong的**/consumers端点发送POST。这将生成一个用户，使用所提供的电子邮件作为他们的用户名**，并使用Stripecustomer.id作为Kong中的custom_id字段。

   var body = { username: req.body.email, custom_id: customer.id };
   var response = await fetch(`${process.env.KONG_URL}/consumers/`, {
     method: 'post',
     body: JSON.stringify(body),
     headers: {'Content-Type': 'application/json'}
   });
   var data = await response.json();

一旦用户在Kong中被创建，我们现在将使用Moesif中间件来创建用户并将他们的相关细节添加到Moesif中。首先，我们将调用Moesif中间件的updateCompany函数，将Stripe的subscription.id映射到Moesif的companyId。

   var company = { companyId: subscription.id };
   moesifMiddleware.updateCompany(company);

然后我们将对updateUser函数做一个类似的步骤，并使用它将Stripecustomer.id映射到userId，Stripesubscription.id映射到companyId，以及其他一些我们在用户身上收集的元数据映射到Moesif。

  var user = {
     userId: customer.id,
     companyId: subscription.id,
     metadata: {
       email: req.body.email,
       firstName: req.body.firstname,
       lastName: req.body.lastname,
     }
   };
   moesifMiddleware.updateUser(user);

在这一点上，我们现在已经将所有的用户细节插入了必要的平台。我们的下一步是为这个用户生成一个API密钥。为此，我们将使用**/consumers/{user}/key-auth端点再次调用 Kong Management API。这将在响应中为该用户返回一个API密钥。我们通过data.key**访问该API密钥。

  var response = await fetch(`${process.env.KONG_URL}/consumers/${req.body.email}/key-auth`, {
     method: 'post',
   });
   var data = await response.json();
   var kongAPIKey = data.key;

另外，我们也可以将用户的API密钥添加到我们的Moesif元数据中。出于测试的目的，如果你丢失了密钥，又不想回到Kong中去找它，这样就可以很容易地得到它。我们将再次使用Moesif中间件中的updateUser函数来做这件事，在元数据对象中提供生成的API密钥。

   var user = {
     userId: customer.id,
     metadata: {
       apikey: kongAPIKey,
     }
   };
   moesifMiddleware.updateUser(user);

最后，我们将返回一个200 OK的响应给调用者，响应体中包含API密钥。

   res.status(200);
   res.send({ apikey: kongAPIKey });

完成的函数，端到端，将看起来像这样。

app.post('/register', jsonParser,
 async (req, res) => {
   // create Stripe customer
   const customer = await stripe.customers.create({
     email: req.body.email,
     name: `${req.body.firstname} ${req.body.lastname}`,
     description: 'Customer created through /register endpoint',
   });
 
   // create Stripe subscription
   const subscription = await stripe.subscriptions.create({
     customer: customer.id,
     items: [
       { price: process.env.STRIPE_PRICE_KEY },
     ],
   });
 
   //create Kong consumer 
   var body = { username: req.body.email, custom_id: customer.id };
   var response = await fetch(`${process.env.KONG_URL}/consumers/`, {
     method: 'post',
     body: JSON.stringify(body),
     headers: {'Content-Type': 'application/json'}
   });
   var data = await response.json();
 
   // create user and company in Moesif
   var company = { companyId: subscription.id };
   moesifMiddleware.updateCompany(company);
 
   var user = {
     userId: customer.id,
     companyId: subscription.id,
     metadata: {
       email: req.body.email,
       firstName: req.body.firstname,
       lastName: req.body.lastname,
     }
   };
   moesifMiddleware.updateUser(user);
 
   // send back a new API key for use
   var response = await fetch(`${process.env.KONG_URL}/consumers/${req.body.email}/key-auth`, {
     method: 'post',
   });
   var data = await response.json();
   var kongAPIKey = data.key;
 
   // add API key to users metadata in Moesif
   var user = {
     userId: customer.id,
     metadata: {
       apikey: kongAPIKey,
     }
   };
   moesifMiddleware.updateUser(user);
 
   res.status(200);
   res.send({ apikey: kongAPIKey });
 }
)

有了这些，我们现在可以实际尝试一下我们的端点，以确保每个部分都能按预期工作。结果应该是一个有API密钥的注册用户，它将记录并向Stripe报告使用数据。让我们继续测试它。

5 - 向/register端点发送测试请求

一旦你的**/register**端点被编码和部署，现在是时候测试它了。现在我们将简单地使用Postman来发送一个请求。我们的请求将包含一个JSON请求体，其中将包含一个。

  • 名
  • 姓氏
  • 电子邮件

当然，这是我们在Kong、Stripe和Moesif中正确配置系统和配置文件所需要的最小信息量。

在Postman中，我们将用以下信息创建我们的请求。

  • 请求类型。POST

  • 端点URL: http://localhost:5000/register

  • 请求主体。

    {
  "firstname": "Userfirstname",
  "lastname": "Userlastname",
  "email": "test@test.com"
}

一旦所有东西都插入Postman，它应该看起来像下面这样。

一旦请求被发送，响应应该包含一个API密钥，新注册的用户可以使用。

我们现在将检查Kong和Stripe，以确保我们注册的信息被正确地输入到每个目标系统中。我们要检查的第一个系统是Stripe。

重新登录Stripe，你将导航到客户屏幕。你应该在列表中看到你新创建的用户。

点击列表中新添加的客户。在下一个屏幕上，您应该看到该客户也订阅了您的API订阅。

一旦这两个条目在Stripe中得到确认，您就可以转移到Kong，以确保用户也在那里得到正确的设置。

使用Kong Manager，导航到消费者屏幕。在这里您应该看到一个条目，其中用户名和Custom_ID字段分别被设置为提供的电子邮件和用户的Stripe客户ID。

点击该条目将使您进入消费者详细信息屏幕。在这里，点击 "证书"选项卡将显示为该用户生成的API密钥。显示的API密钥应该与Postman中返回的密钥一致。

如果你不使用Kong的企业版，你也可以使用Kong管理的API来检索这些信息。

完成这些检查后，我们可以安全地假设我们的**/register**端点在Kong和Stripe中正确设置了用户的账户和订阅。

6 - 使用生成的API密钥调用您的API

我们的下一步是实际使用我们生成的API密钥。然后我们将确认所有正确的信息被添加到Moesif中。我们要确认的数据包括。

  • Stripe的客户ID与Moesif的用户ID相对应。
  • Stripe的订阅ID与Moesif的公司ID相吻合。
  • Moesif在用户档案中包含Stripe元数据。

使用Postman来发送请求

接下来，让我们使用Postman或其他平台，向/test-service端点发送一个请求。这是我们在上面第3步中为其设置的计费表的端点。

在Postman中，我们将。

  • 把/test-service API端点作为请求URL
  • 选择 "授权 "选项卡
  • 选择类型为API密钥
  • 填入API密钥的详细信息
    • 将密钥设置为 "apikey"，或者你在Kong中设置的任何密钥。
    • 将值设置为生成的API密钥
    • 将添加到字段的值设置为 "Header"。

下面是一个在Postman中填充请求配置的例子。

要发送请求到我们的端点，点击发送。

一旦发送，你的请求应该通过Kong代理，API调用分析应该在Moesif登陆。

确认Moesif收到了请求信息

回到Moesif，你将浏览到 "事件"屏幕，在那里你应该看到你刚刚发送的请求。你应该看到该条目有一个用户ID和公司ID，并以Stripe用户和订阅ID的形式填充。这些条目应该看起来像这样。

客户ID看起来像 "cus_XXXX"，订阅ID看起来像 "sub_XXXX"。

如果你点击实时事件日志屏幕上的条目所显示的用户ID，你将来到用户的个人资料页面。在这个页面，我们将确认Stripe元数据的存在。我们将需要在配置文件中添加一个新的列来显示Stripe数据。要做到这一点，在个人资料页面，点击......更多操作按钮，并点击自定义个人资料的布局。

然后我们将为Stripe元数据添加一个新列。您将点击屏幕最右边的 "+"按钮，创建一个新的列，我们将在其中添加Stripe元数据。

您可能需要向右滚动以看到它，这取决于您的分辨率和屏幕尺寸，以看到+按钮。

然后你将深入到元数据 > Stripe > 客户 > 创建，并在新行中使用这个字段。我还把列的图像改成了一个更适合的图像。你可以通过点击图片并选择最适合的那一个来定制它。

您还可以添加其他字段，但现在只需这个单一字段就足以告诉我们Moesif正在正确接收来自Stripe的数据。

如果您没有看到Stripe元数据条目作为一个可用字段，请等待几分钟。如果几分钟后Stripe元数据没有出现，请确保您的Stripe配置在Moesif中是正确的。在确认或编辑后，尝试创建一个新的用户，并再次发送请求，以确认整合正在进行。

在这一点上，我们现在已经确认我们通过Kong代理的API调用是有效的，并且在Moesif中盖上了正确的用户和公司细节。我们还确认了Stripe正在向Moesif发送数据，这些数据被正确地映射到相应的用户配置文件中，并通过Moesif中的Stripe元数据得到确认。

7 - 创建前台

接下来，我们要添加一个简单的小前端，这样我们就不需要通过Postman调用我们的API密钥了。我们将制作一个快速的小注册表，然后返回一个API密钥给我们新注册的用户使用。

将你的前台文件添加到应用程序中

在应用程序的根目录下，我们将添加两个文件。我们将添加一个index.html和一个index.js。

添加你的路由以提供静态HTML文件

在app.js文件中，我们将添加一个路由来提供静态HTML文件。在我们的**/register**端点的代码下面，我们将添加另一个端点。添加以下代码。

pp.get("/", function (_req, res) {
 res.sendFile(path.join(__dirname, "index.html"));
 res.sendFile(path.join(__dirname, "index.js"));
});

现在这段代码将在你导航到http://localhost:5000/时加载网站（一旦我们插入了代码）。

对前台表单和逻辑进行编码

最后，让我们为我们的前台HTML和JavaScript功能添加代码。在index.html文件中，我们将添加看起来像这样的标记。

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta
     name="description"
     content="Moesif Embedded Dashboard example"
   />
   <title>None React App Example</title>
 </head>
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <h1>
     Moesif Monetization Example
   </h1>
   <div id="form-input">
     email: <input id="email-input" placeholder="email" />
     first name: <input id="firstname-input" placeholder="first name" />
     last name: <input id="lastname-input" placeholder="last name" />
     <button onClick="submitRegistration()">Register</button>
   </div>
   <div id="apikey-output"></div>
   <p id="error-message"></p>
   <script src="index.js"></script>
 </body>
</html>

他的标记将显示一个表单，允许用户输入电子邮件、名字和姓氏。它也有一个注册按钮，将调用submitRegistration()的JavaScript函数。该函数将在我们的index.jsJavaScript文件中。

index.js文件将看起来像这样。

async function submitRegistration() {
  const email = document.getElementById("email-input").value;
  const firstname = document.getElementById("firstname-input").value;
  const lastname = document.getElementById("lastname-input").value;
  const errorElement = document.getElementById("error-message");
  const apikey = document.getElementById("apikey-output");

  var body = { email, firstname, lastname };
  console.log(body);
  var response = await fetch('http://localhost:5000/register', {
    method: 'post',
    body: JSON.stringify(body),
    headers: {'Content-Type': 'application/json'}
  });
  var data = await response.json();
  console.log("Kong create consumer");
  console.log(data);
  apikey.innerHTML = data.apikey;
}

这个函数将从表单中获取输入，将其发布到我们的/register端点，并在屏幕上显示返回的API密钥。

8 - 测试前台

为了测试前端，保存你的代码修改并重新启动服务器。然后，在浏览器中，导航到http://localhost:5000/。然后，你会看到表格显示出来。

填写表格字段并提交

现在，表格已经加载，填写字段并点击注册按钮。这将获取信息，将其发布到我们的**/register**端点，并给我们生成API密钥。

建议你使用一个与你之前直接通过/register端点创建API密钥时不同的电子邮件。

确认API密钥被返回

一旦提交按钮被点击，几秒钟后，API密钥应该被返回到用户界面。

9 - 向你的货币化的API发送一个请求

我们将再次要确保一切都在我们的用户界面上工作，直到我们的后端系统。对于这一点，只需重复第6步的步骤，以确认用户和公司ID被正确填入，并且Stripe元数据被返回给这个用户和新的API密钥。

10 - 确认所有的部分都在正常工作

虽然这是可选的，但这一步可能有助于排除任何可能来自我们前面步骤的问题。这里有几件事需要检查，以确保所有的工作都是正常的。在通过用户界面创建一个新用户并使用生成的API密钥对您的API进行调用后，请确认以下情况。

  • 在Stripe中
    • 确认在Stripe中已经用您在用户界面中输入的详细信息创建了一个客户。
    • 确认该客户已经订阅了正确的产品和价格。
  • 在Kong
    • 消费者已被创建
    • 消费者的custom_id字段与Stripe的客户ID相匹配（以cus_XXXX开头）。
  • 在Moesif
    • 您的API调用被记录在Moesif的实时事件日志中
    • 您的API调用在Moesif的用户和公司字段中分别有Stripe的客户ID和订阅ID。
    • 确认Moesif中的Stripe元数据已被填入。

11 - 检查Stripe的使用情况

最后，几个小时后，最好进入Stripe确认使用量是否被添加到用户的订阅中。请确保你已经发送了几个请求，以确保你有一些数据应该被发送到Stripe。

可能需要几个小时的时间才能将使用量从Moesif发送到Stripe。如果几个小时后Moesif中仍然没有数据，请确保您已经遵循了本指南中列出的所有步骤。这包括确保您的用户和公司ID从Moesif正确地映射到Stripe中的相应密钥。

要检查使用情况，在Stripe中您要导航到客户屏幕并选择您进行API调用的客户。选择后，您应该看到您通过**/注册端点注册的用户的一些活动订阅。我们之前创建的那个叫做我的API**。点击该订阅条目。

在下一个屏幕上，点击价格条目旁边的 "查看使用情况"。

现在应该弹出一个模式，显示从Moesif报告给Stripe的API的使用情况。

记住，在向Stripe报告使用情况之前，可能需要一个小时。如果您的数据还没有到，请稍后再查看更新。

总结

货币化一直是一个难以逾越的障碍。许多定制的解决方案提供了灵活性，但工程和支持成本非常高。有了Moesif，API货币化可以在极短的时间内实现。正如本文所展示的，只需一点点配置和极少的代码，我们就可以在最短的时间内创建一个生产就绪的后付费货币化方案。

avatar
文章
阅读
粉丝