Logo

菜单

发布于 2026-01-06 0 阅读
0

使用 Appsmith 和 APISIX 构建自定义身份验证 DEV 的全球展示挑战赛，由 Mux 呈现：展示您的项目！

使用 Appsmith 和 APISIX 构建自定义身份验证

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

身份验证流程是 Web 应用程序的基础组成部分。它确保用户在使用应用程序时数据的安全性和隐私性。虽然市面上有很多现成的身份验证解决方案，但使用低代码 UI 开发平台和API 管理解决方案构建身份验证系统，可以轻松创建安全的 Web 应用程序。您无需了解前端和后端技术及工具即可创建应用程序。您无需掌握 Python、Java、HTML、CSS 或其他 JavaScript 框架。本文将介绍如何使用Appsmith、Apache APISIX和JWT构建自定义的简单登录流程和 UI 页面，从而保护您的应用程序。

Appsmith 是一个功能强大的低代码开发平台，使用户能够轻松创建 Web 应用程序和仪表板。它提供可视化界面和一套全面的预构建组件，使开发人员和非开发人员都能轻松上手。

学习目标

您将在阅读本文的过程中了解到以下内容：

  • 在低代码环境下设计身份验证流程。
  • 使用 APISIX 设置后端身份验证 API。
  • 使用 Appsmith 中的小部件创建 UI 页面。
  • 启用基于令牌的身份验证。

设计身份验证架构

在深入实施之前，首先需要为您的应用程序设计身份验证系统的架构。请考虑用户注册、登录、密码、会话管理和基于 JWT 令牌的身份验证等关键组件。定义 Appsmith 和 APISIX 之间的信息流，确保清晰高效的身份验证工作流程。

使用 Appsmith 和 APISIX 构建自定义身份验证.png

我们将构建一个简单的移动应用，包含注册页、登录页和主页三个页面。我们的任务分为两部分。第一部分，我们将使用Apache APISIX API 网关搭建后端 API，用于处理身份验证请求。我们将使用现有的 API 网关端点来实现用户注册、登录和令牌生成流程。第二部分，我们将使用 Appsmith 的拖放式界面和现成的 UI 组件来构建注册页、登录页和主页，最后将它们连接到 API 以处理表单提交。接下来，我们将开始构建这些组件。

注册、登录和主页

第一部分：设置后端身份验证 API

我们首先设置后端 API，用于处理来自移动应用的身份验证请求。APISIX 可用于强制执行身份验证，从而保护 API 端点。APISIX 允许您验证用户凭据、颁发身份验证令牌并控制对 API 的访问。通过将 APISIX 集成到您的移动身份验证系统中，您可以增加一层额外的安全保障，确保只有经过身份验证的用户才能访问受保护的资源。

先决条件

  • Docker 用于安装容器化的 etcd 和 APISIX。
  • curl 用于向 APISIX 管理 API 发送请求。您也可以使用 Postman等工具 与 API 进行交互。

步骤 1：安装 Apache APISIX

APISIX 可以通过以下快速入门脚本轻松安装和启动：

curl -sL https://run.api7.ai/apisix/quickstart | sh
Enter fullscreen mode Exit fullscreen mode

步骤 2：配置后端服务（上游）

接下来，我们配置后端服务。为了演示，它可以是任何用于实现后端逻辑的 API 服务。您也可以将其替换为您自己的服务。我使用了一个模拟的公共服务器http://httpbin.org/，它会随机生成响应。为简单起见，我们将使用一个端点http://httpbin.org/ip ，该端点返回我们机器的公网 IP 地址。

要将请求路由到模拟 API 的后端服务，您需要通过 Admin API在 Apache APISIX 中添加上游服务器来配置它。

curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d '
{
   "name":"Mock API upstream",
   "desc":"Register Mock API as the upstream",
   "nodes":{
      "httpbin.org:80":1
   }
}'
Enter fullscreen mode Exit fullscreen mode

步骤 3：创建新的插件配置

此步骤涉及为我们在下一步创建的路由配置插件（使用插件配置对象）。因此，APISIX 启用了 JWT 插件来保护我们的端点。每次我们请求端点时，它都会检查请求头中的 JWT 凭据。

curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d ' 
{
   "plugins":{
      "jwt-auth": {}
   }
}'
Enter fullscreen mode Exit fullscreen mode

步骤 4：为后端 API 创建路由

我们在 APISIX 中创建了一个新的Route 对象，该对象拦截所有发送到/ipURI 的 GET 请求，并使用现有的上游配置和插件配置来启用路由机制和身份验证策略。它会检查请求头中是否存在 JWT 插件，如果存在且有效，则将请求转发到我们的模拟服务器。否则，它会立即返回未授权错误，并且请求将无法到达实际服务。

curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d '
{
   "name":"Mock API server route",
   "desc":"Create a new route in APISIX for the mock server endpoint",
   "methods":[
      "GET"
   ],
   "uri":"/ip",
   "upstream_id":"1",
   "plugin_config_id":1
}'
Enter fullscreen mode Exit fullscreen mode

步骤 5：创建用于签署 JWT 令牌的路由

我们为 API 实现了基于令牌的身份验证。APISIX 还可以作为身份提供程序来生成和验证令牌。为此，您需要为新的 API 端点设置一个路由，该路由使用 public-api 插件对令牌进行签名：

curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d '
{
    "uri": "/login",
    "plugins": {
        "public-api": {
            "uri": "/apisix/plugin/jwt/sign"
        }
    }
}'
Enter fullscreen mode Exit fullscreen mode

通过执行上述 curl 命令，我们注册了一个名为 的新路由，login其 URI 路径为/login，每当现有用户尝试使用其电子邮件从移动应用程序的登录页面登录时，该路由都会签署一个新令牌。

第二部分：在 Appsmith 中创建用户注册和登录表单

使用 Appsmith 的低代码界面，我们可以创建用户注册和登录表单。Appsmith 提供各种预构建的小部件，可以轻松自定义。您可以设计包含用户名、密码以及仪表盘所需任何其他信息的输入字段的表单。

开始之前

我会很怀念在您的机器上安装 Appsmith 的过程。您可以在 Appsmith 网站上 学习如何使用 Docker 安装 Appsmith 。请确保您已安装 Appsmith 并且可以通过http://localhost访问它。部署并运行 Appsmith 后， My first application 默认情况下会添加一个名为 `appsmith` 的应用程序。您可以使用此应用程序来构建您的第一个应用程序。

我的第一个应用程序是 Appsmith。

第一步：创建注册页面

在本例中，新用户首先通过移动应用的注册页面进行注册。首先，在您的应用中创建一个名为RegistrationPage 的新页面。添加用于输入 电子邮件（命名为EmailInput）、用户名（命名为UsernameInput）和密码（命名为 PasswordInput）的输入控件。此外，还要添加注册（命名为RegisterButton）和登录（命名为LoginButton）按钮控件。最终效果如下所示：

注册页面

当用户按下“注册”按钮并输入详细信息后，您需要一个查询来处理与 APISIX 管理 API 端点的通信，以便在 API 网关中注册新的 API 使用者。创建一个 API 查询 （命名为APISIX_Admin_Add_Consumer_API），并指定 APISIX 使用者端点 URI /apisix/admin/consumers。将输入控件的文本添加到查询正文中。访问输入控件的方式应如下所示：

API 查询 JWT 令牌

host.docker.internal请注意，我们使用而不是localhost的地址，因为 APISIX 运行在与 Appsmith 不同的 docker 网络上的自己的容器中。

查询发送到 APISIX 后，它会注册新的消费者，消费者对象将使用jwt-auth带有密钥和密钥的插件。您可以通过用户名获取指定的消费者来测试消费者是否已成功注册到系统中appsmithuser。运行以下 curl 命令：

curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser
Enter fullscreen mode Exit fullscreen mode

现有用户可以直接访问登录页面。详见下一节。

步骤二：创建登录页面

回到应用程序画布，添加一个名为“登录页面”的新页面，并设置登录表单，其中包含输入框（用于输入用户的电子邮件）和按钮（用于登录）小部件。

登录页面

然后，针对 APISIX 登录路由 URI 路径创建一个  名为login_api 的API 查询，并将参数设置为。如果您测试该查询并点击运行按钮，在成功响应的情况下，我们的身份验证 API 网关端点应该返回一个有效的访问令牌。在下面的示例中，密钥  是一个令牌，它表明用户已在 APISIX 端通过身份验证。/loginkey{{EmailInput.text}}jwt

调用登录端点的 REST 请求

 要通过登录按钮运行 login_api查询，需要设置查询的onClick 属性。

登录 API

也可以将 JWT 令牌存储在Appsmith 应用商店中 ，然后将用户重定向到 主页。为此，请将以下代码插入到login_api登录页面的onClick属性中 ：

{{login_api.run(() => {
  const jwt = login_api?.data;
  if (jwt) {
    storeValue('jwt', jwt);
    navigateTo('MainPage', {});
  } else {
    showAlert('Login failed!', 'error');
  }
})}}
Enter fullscreen mode Exit fullscreen mode

点击登录 API

如果用户通过 APISIX 身份验证失败，则显示一条警报消息 作为回调，告知用户出现错误。

步骤 3：创建主页

最后，现在是时候配置 移动应用的首页 ，以便已登录用户能够访问并显示一些数据。您可以使用同一个画布，通过组件构建用户界面。用户成功登录后，我们的逻辑会导航到首页，并在页面首次加载时，使用您添加的查询（名为main_page_data_api ）自动向APISIX 中的路由 http://127.0.0.1:9080/ip发起 API 调用，并从上游服务器（我们在第一部分和第二步中创建）检索 IP 地址。

main_page_data_api

您可能会注意到请求Authorization头中包含一个值，{{appsmith.store.jwt}}该 jwt 值是我们上一步保存在 Appsmith 应用商店中的，用于向您的应用证明用户身份已被识别。如果该值在Appsmith 应用商店jwt 中不存在，我们会向用户显示未授权错误。

在我的例子中，我向主页面添加了两个文本控件，并将第二个文本字段的值设置为调用输出的数据。请看结果。{{main_page_data_api.data}}main_page_data_api

首页

下一步

您还可以添加一个“未授权”页面，将未授权用户重定向到该页面，显示错误信息并建议他们登录或注册以创建新帐户。为用户提供使用完毕后退出应用的按钮组件，这有助于提高数据安全性。

结论

按照上述步骤，我们使用 Appsmith 和 APISIX 创建了个性化身份验证系统。Appsmith 适用于各种应用场景，从构建内部工具和管理仪表盘到原型设计和开发功能齐全的应用程序，都能胜任。借助 APISIX，您不仅可以强制用户进行身份验证，还可以引入额外的安全措施，例如速率限制、IP 封锁和用户限制，从而维护我们定制身份验证解决方案的安全性。

相关资源

社区

🙋 加入 Apache APISIX 社区

🐦 在推特上关注我们

📝 在 Slack 上找到我们

💁 如何贡献页面

关于作者

请在推特上关注我：@BoburUmurzokov

访问我的博客：  www.iambobur.com

文章来源：https://dev.to/apisix/build-custom-authentication-using-appsmith-and-apisix-ep
将 PostgreSQL 用作多租...
每个 ASP.NET Core W...