aws-cognito-redux-saga-refact 是AWS Cognito SDK和Redux Saga的结合，是一个用于前端的 npm 包。它可以轻松地与 AWS Cognito 进行集成，在前端应用程序中添加认证和授权功能。
在本文中，我们将介绍如何使用 aws-cognito-redux-saga-refact 包来构建一个 AWS Cognito 集成的前端应用程序。我们将深入探讨其实现细节，并给出实现指导以及多个示例代码。
什么是 AWS Cognito？
AWS Cognito 是一项 AWS 提供的认证和授权服务，专门用于应用程序。它提供了一个安全的用户存储、访问控制和认证流程，可以帮助应用程序快速添加用户身份验证和用户数据管理功能。
什么是 Redux Saga？
Redux Saga 是一个用于管理应用程序异步事务的 JavaScript 库。它利用了 ES6 的生成器和 yield 关键字的能力，让异步代码更具读性和易于管理。
安装 aws-cognito-redux-saga-refact 包
首先，我们需要通过 npm 安装 aws-cognito-redux-saga-refact 包。在终端中使用以下命令进行安装：
npm install aws-cognito-redux-saga-refact --save
初始化 AWS Cognito 配置
在使用 aws-cognito-redux-saga-refact 包之前，您需要为 AWS Cognito 设置一些基本配置。打开您的 AWS 控制面板，并确保您在其中创建了应用程序，并配置了相应的用户池。接下来，您需要打开 AWS Cognito 的设置页面，并记录以下参数：
- 用户池 ID
- 客户端 ID
- 用户池区域
通过这些参数，您可以在应用程序的配置文件中初始化 AWS Cognito 设置。在项目中的任何位置创建一个 aws-cognito-config.js 文件，并添加以下代码：
const config = {
region: 'us-east-1',
userPoolId: 'us-east-1_abc123',
identityPoolId: 'us-east-1:123456-abcdefg',
userPoolWebClientId: 'xxxxxxxxxxxxxxxxxx',
}
export default config;其中，region、userPoolId 和 userPoolWebClientId 是必需的参数。您可以在 AWS 控制面板的设置页面上找到这些参数。identityPoolId 参数是可选的，用于托管 AWS 资源的用户标识。
创建 Redux Saga 中间件
下一步，我们需要创建一个 Redux Saga 中间件，并将其注入到 Redux Store 中。中间件负责处理所有与 AWS Cognito 相关的异步处理。
首先，导入必要的依赖项并设置 AWS Cognito 配置：
-- -------------------- ---- ------- ------ - ----- ---------------- --------------------- ------------ --------------------- ------------------- - ---- ----------------------------- ------ - ----- ------ ---- ---------- - ---- --------------------- ------ ------ ---- ----------------------- ----- - ------- --------------- ----------- -------------------- - - ------- ----- ------------- -------------------- - - ----------- ----------- --------- -------------------- -- ----- -------- - --- ------------------------------
在上述代码中，我们导入了 AWS Cognito SDK 和 Redux Saga 的依赖项，并使用 aws-cognito-config.js 中的配置初始化了一个 CognitoUserPool 对象。
接下来，我们将编写 Sagas 代码。我们将使用 Redux Saga 的 takeLatest 方法来实现对 FETCH_USER_CREDENTIALS action 的响应，这里是一个示例代码：
-- -------------------- ---- -------
--------- ---------------------------- -
--- -
----- - --------- -------- - - ---------------
----- ----------- - --- -------------
--------- ---------
--------- ---------
---
----- ----------- - --- -------------
--------- ---------
----- ---------
---
----- ------- - ----- -----
------------- ------------------------------
------------
--
--
----- - -------- ------------ - - --------
----- -----
----- -----------------------------------
-------- -
--------
-------------
--
---
- ----- ------- -
----- ----- ----- -------------------------------- ----- ---
-
-
--------- -------- -
----- ------------------------------------ ----------------------
-
------ ------- -------在上述代码中，我们使用 Sagas 语法来对 FETCH_USER_CREDENTIALS action 进行响应。在我们处理该动作时，我们首先创建了一个 AuthDetails 实例和一个 CognitoUser 实例。然后，我们使用 CognitoUser 实例进行身份验证，并从身份验证方法返回一个 JWT 令牌和刷新令牌。最后，我们派发一个 Redux action（FETCH_USER_CREDENTIALS_SUCCEEDED）来表示身份验证的成功，或派发一个 FETCH_USER_CREDENTIALS_FAILED action 来表示身份验证失败。
在应用程序中使用 Redux Saga 和 aws-cognito-redux-saga-refact
我们已经完成了 aws-cognito-redux-saga-refact 库的配置和 Redux Sagas 的配置，现在我们可以使用它来实现前端认证和授权功能了。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- --------------
------ - ---- - ---- --------------
------ - --------- - ---- --------------------
------ - -------------------- - ---- ------------------------------------
------ ------- -------- -------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- -------- - --------------
----- ------------ - ----- --- -- -
-------------------
------------------------------- --------- -------- ----
--
------ -
----- ------------------------
----------
-----------
------------- -- ----------------------------
----------------------
--------
--
----------
---------------
------------- -- ----------------------------
----------------------
--------
--
------- ------------------ -----------
-------
--
-
在上例中，AuthService中将用户输入的邮箱和密码作为参数传递给saga中的fetchUserCredentials 方法，进行认证并获取JWT令牌。随后更新Redux状态，以便更新应用程序。在应用程序的任何位置使用 useDispatch 钩子，并派发 FETCH_USER_CREDENTIALS 操作即可调用该Saga。然后，使用 Redux Store 中的令牌数据来进行任何流程中的身份验证。
结论
在此教程中，我们详细介绍了如何使用 aws-cognito-redux-saga-refact 包来实现 AWS Cognito 在前端应用程序中的认证和授权功能。我们讨论了 AWS Cognito 和 Redux Saga 的基础知识，并提供了用于将它们结合使用的代码示例。我们希望这篇介绍对您有帮助，可以帮助您为前端应用程序添加认证和授权功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e9d9381d61a3540bcd