简介
React-Cognito 是一个开源的 React 库，用于集成亚马逊 Cognito 身份验证服务的前端组件，使得在 React 应用中添加用户身份验证变得简便易行。
本文介绍如何使用 npm 包 react-cognito，从集成到配置，直到最终使用该库进行用户身份验证。操作简单，适合新手掌握，同时对于开发经验丰富的人员而言，提供了一些有关使用此库的深度技术指导。
安装 React-Cognito
首先需要确保安装了 React。然后，使用以下命令来安装 react-cognito：
npm install --save react-cognito
成功安装后，即可 import react-cognito：
import {
CognitoProvider,
CognitoLogin,
CognitoLogout,
CognitoRegister,
CognitoForgotPassword,
CognitoVerifyEmail,
} from 'react-cognito';使用 React-Cognito
CognitoProvider
CognitoProvider 是一个高级 React 组件，它用于实现身份验证状态的全局查询，以确保用户已登录并具有在应用程序中进行身份验证需要的所有凭据。
import { CognitoProvider } from 'react-cognito';
const App = () => (
<CognitoProvider>
<MyApp />
</CognitoProvider>
);CognitoLogin
CognitoLogin 允许用户进行身份验证。
import { CognitoLogin } from 'react-cognito';
const MyLogin = () => (
<div>
<h1>Login</h1>
<CognitoLogin />
</div>
);CognitoLogout
CognitoLogout 允许用户登出。
import { CognitoLogout } from 'react-cognito';
const MyLogout = () => (
<div>
<h1>Logout</h1>
<CognitoLogout />
</div>
);CognitoRegister
CognitoRegister 允许用户注册。
import { CognitoRegister } from 'react-cognito';
const MyRegistration = () => (
<div>
<h1>Registration</h1>
<CognitoRegister />
</div>
);CognitoForgotPassword
CognitoForgotPassword 允许用户通过电子邮件重置密码。
import { CognitoForgotPassword } from 'react-cognito';
const MyForgotPassword = () => (
<div>
<h1>Forgot Password</h1>
<CognitoForgotPassword />
</div>
);CognitoVerifyEmail
CognitoVerifyEmail 允许用户验证其电子邮件地址。
import { CognitoVerifyEmail } from 'react-cognito';
const MyVerifyEmail = () => (
<div>
<h1>Verify Email</h1>
<CognitoVerifyEmail />
</div>
);用户身份验证
使用上述组件，您可以轻松地为您的应用程序提供身份验证功能。使用 CognitoProvider 来跟踪身份验证状态，使用其他组件来进行身份验证，注销，注册，重置密码和验证电子邮件。
-- -------------------- ---- -------
------ ----- ---- --------
------ -
----------------
-------------
--------------
----------------
----------------------
-------------------
- ---- ----------------
----- --- - -- -- -
-----------------
------ --------
------------- --
-------------- --
---------------- --
---------------------- --
------------------- --
------------------
--上述代码提供了一个用于验证用户的完整应用程序。通过配置环境变量和 Cognito 设置，您可以实现在应用程序中进行身份验证的最佳实践。
深指导
CognitoProvider 和其他组件的所有属性都可以通过 React context 进行访问，您可以检查身份验证状态，微调登录和注销部分等等。
-- -------------------- ---- -------
------ - ---------- - ---- --------
------ - -------------- - ---- ----------------
----- ----------- - -- -- -
----- -------- - ---------------------------
------ -
-----
------------------------- - ---------- - ------- --- -----
------
--
--示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -
----------------
-------------
--------------
----------------
----------------------
-------------------
- ---- ----------------
----- --- - -- -- -
-----------------
------ --------
------------- --
-------------- --
---------------- --
---------------------- --
------------------- --
------------------
--
------ ------- ----结论
使用 React-Cognito 可以很好地在 React 应用中实现用户身份验证。本文提供了使用这个 npm 包的详细教程和示例代码。同时，我们介绍了 React context 的作用，以及它如何帮助您微调 React-Cognito。感谢您的阅读，祝您编码愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669f81e8991b448e2d7d