如何构建全栈身份验证应用程序-DEV365 开发者社区

大多数Web应用程序都需要注册和登录功能。但是对于新手来说，这可能是具有挑战性的。甚至专家开发人员也喜欢从一开始就使用外部服务来处理身份验证。当我们谈论全栈身份验证流时，这意味着在前端设置用户登录和注册，并确保后端API。因此，您必须在这两个部分上工作。

这篇文章将指导您使用Apache APISIX，Authgear和OpenID Connect（OIDC）构建全栈身份验证应用程序。您可以在GitHub上找到项目的源代码。要迅速从应用程序开始，只需按照README.md文件中提供的步骤来克隆存储库并执行代码示例。

学习目标

此内容旨在向所有人展示如何在后端和前端设置身份验证。此外，它旨在协助初学者和经验丰富的开发人员，他们希望成为全栈开发人员。

Apisix，Authgear和OIDC在身份验证中的作用

在潜入指南之前，让我们尽快介绍工具。

OIDC（OpenID Connect）是在OAuth 2.0协议顶部构建的简单身份层。它使第三方应用程序能够以标准化的方式验证用户并获取基本个人资料信息。
apisix 是最受欢迎的开源API网关之一。它不仅是为API管理设计的，而且还为确保对这些API的安全和保护。其安全性武器库中最突出的功能之一是使用其plugin支持OIDC。
authgear 是Web和移动应用程序的高度适应性身份（IDAAS）平台。您的用户可以通过内置的UI界面登录到您的应用程序（您无需为用户注册和登录流量构建UI），这为它们提供了安全的，基于标准的登录体验品牌和各种身份验证方法，例如电子邮件，social logins，passwordless，biometrics logins， 10 and sms/whatsApp和多因素身份验证（MFA）。它使用OpenID Connect（OIDC）和OAuth 2.0来确定用户是谁，并授予受保护资源的授权。

身份验证工作流程

这是身份验证过程的高级架构图：

图中显示的步骤将在下面详细说明：

在上图中， client 是任何Web应用程序是后端API。

Web应用程序可以采用各种形式，从用React，Vue或Angular构建的单页应用程序（SPA）到使用Express，NextJS和类似平台等框架制作的标准Web应用程序。 Web应用程序是我们的frontend的客户端应用程序，将请求发送给具有客户ID的身份提供商（AUTHGEAR），这是一个客户的秘密，用于收集访问令牌，例如JSON Web Tokens（JWT）。
如果提供的凭据正确，则AuthGear用JWT令牌回复了Web应用程序。您可以在Authgear portal中为应用程序创建尽可能多的用户，并且用户可以使用Authgear托管的 UI页面登录。

拥有JWT令牌后，客户端将请求发送到带有访问令牌的API网关（APISIX），并将后端API受到网关保护。

在处理请求之前，APISIX需要确保提供的令牌有效，尚未过期，并且具有适用于请求的数据或服务的正确范围。如果APISIX无法本地验证令牌，则将令牌内省请求发送到Authgear授权服务器。此请求通常是对服务器的 introspection 端点提出的。

Authgear收到内省请求并处理它。服务器检查其记录以确定令牌的有效性，其到期和相关范围，在确定令牌状态后，它对Apisix做出了响应。

基于Authgear的代币反应响应，Apisix可以做出明智的决定。如果令牌有效，则将请求转发到后端API，否则，它会使用未经授权的HTTP状态代码拒绝客户端请求。

Apisix带有请求的资源从后端API发送响应。

带有APISIX，AUTHGEAR和OIDC的全堆栈身份验证应用。

对于demo project，我们使用Docker使用一个命令来安装和运行3个组件（后端，API网关和前端）。我们在Frontend Web应用程序中使用了ExpressJS，并在localhost:3000托管了我们的单页应用程序。可以在localhost:9080上访问APISIX网关，而我们的后端API（可以是使用Python，Java，Nodejs等构建的任何API）在localhost:9081上设置。
。
先决条件

开始之前，您需要以下内容：

a 免费的authgear帐户。Sign up如果您还没有一个。

Docker用于安装所有服务。

配置authgear

要使用authgear服务，您需要在Authgear Dashboard中设置应用程序并获取Authgear OIDC客户信息。此设置允许Authgear中的用户在通过AuthGear身份验证的Web应用程序中登录。
。
步骤1：在Authgear中创建一个应用程序

要设置应用程序，请导航到Authgear Portal UI，然后在左侧导航栏上选择应用程序。使用交互式选择器创建新的 authgear oidc客户端应用程序。

步骤2：复制应用程序凭据

AuthGear中的每个应用程序都分配了一个字母数字，唯一的CLIENT ID和CLIENT Secret，您的应用程序代码将用于调用authgear apis int int web应用程序。从输出中记录生成的authgear ISSUER（例如，https://example-auth.authgear-apps.com），CLIENT ID，CLIENT SECRET。您将在下一步中使用这些值的Web应用程序配置。

步骤3：配置重定向URI

AN 授权重定向您的应用程序的URI 是Authgear将重定向到用户身份验证以进行 OpenID Connect Connect Middleware 完成身份验证过程之后的URL。在我们的情况下，它将是我们前端的主页，它将在http://localhost:3000上运行。

相应地将以下http://localhost:3000设置为授权重定向URIS 字段。 ****如果未设置，用户登录后将不会返回您的应用程序。

步骤4：启用访问令牌

此外，启用 jwt作为访问令牌选项，访问令牌应用程序配置部分：

步骤5：选择登录方法

创建 authgear应用程序后，您选择用户在登录页面上进行身份验证的方式。从身份验证选项卡中，导航到登录方法，您可以从各种选项中选择登录方法，包括电子邮件，移动或社交，仅使用您指定的用户名或自定义方法。对于此演示，我们选择电子邮件+无密码方法，要求我们的用户注册帐户并使用其电子邮件登录。他们将收到一次电子邮件（OTP）的电子邮件，并验证使用该应用的代码。

设置并运行演示项目

使用Authgear成功配置，现在我们可以携带GitHub回购，配置环境变量并运行服务：

首先将project克隆到您的本地机器中：

git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git

cd apisix-authgear-oidc-full-stack-auth

在您项目的根目录中，docker组成yaml文件，创建一个带有以下环境变量的file .envâ：

CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000

用authgear应用程序设置值在配置authgear exect exect ClientId，'ClientId，'ClientSecret

中替换值的authgear app设置值

替换值。

添加环境文件后，从根目录中运行docker compose up命令。

测试身份验证流

对于演示，我们使用Docker使用一个命令安装和运行3个组件（后端，API网关和前端）。我们在Frontend Web应用程序中使用了ExpressJS，并在Localhost：3000托管了我们的单页应用程序。可以在Localhost：9080访问APISIX网关，而我们的后端API（可以是使用Python，Java，Nodejs等构建的任何API）在Localhost上设置了：9081。

。