npm 包 @orther/react-cognito 使用教程

前言

提供了一种更加简单、安全且可靠的方式来实现用户身份认证。AWS Cognito 可以帮助开发者轻松构建用户认证、注册、登录和注销等功能，海量的文档和 API 接口为开发者提供了充足的资源，这就是 @orther/react-cognito 诞生的原因，它是封装了 AWS Cognito 的一个 React 实现库。

安装

在项目所在的根目录下，执行以下命令进行安装：

--- ------- ---------------------

使用

引入依赖

在需要使用库的页面中，可以通过以下方式引入 @orther/react-cognito：

------ ----- ---- --------
------ - -------------------- ------- - ---- ------------------------

-------- ----- -
  ------ -
    ---------------------
      ---------- ------------
    ----------------------
  --
-

配置参数

在使用 @orther/react-cognito 时，需要指定以下参数：

  • UserPoolId: 用户池 ID，可以在 AWS Cognito 中获取
  • ClientId: 客户端 ID，在 AWS Cognito 中定义
--------------------
  ----------------------------
  ---------------
-
  ---------- ------------
----------------------

获取用户状态

可以通过 useUser Hook 访问用户信息和登录状态。

-------- ----- -
  ----- - ----- --------- - - ----------

  -- ----------- -
    ------ ----------------------
  -

  -- ------- -
    ------ ----------- ----- -- --- ---- -----------
  -

  ------ -
    -----
      --- ----------------
      ------- --------------------------------
    ------
  --
-

注册和登录

可以通过 register 和 login 方法来实现用户注册和登录，代码如下：

------ - ------- - ---- ------------------------

-------- ------- -
  ----- - ----- - - ----------
  ----- ------- --------- - -------------
  ----- ---------- ------------ - -------------
  ----- ------- --------- - ---------------

  ----- ----------- - ----- ------- -- -
    -----------------------

    --- -
      ----- ------------ ----------
    - ----- ------- -
      ----------------
    -
  --

  ------ -
    -----
      ----- -----------------------
        ------ ------------------------------
        ------
          -----------
          ----------
          -------------
          ----------------- -- -----------------------------
        --

        ------ ------------------------------------
        ------
          ---------------
          -------------
          ----------------
          ----------------- -- --------------------------------
        --

        ------- ----------------------------

        ------ -- ---------------------------
      -------
    ------
  --
-
------ - ------- - ---- ------------------------

-------- ---------- -
  ----- - -------- - - ----------
  ----- ------- --------- - -------------
  ----- ---------- ------------ - -------------
  ----- ------- --------- - ---------------

  ----- -------------- - ----- ------- -- -
    -----------------------

    --- -
      ----- --------------- ----------
    - ----- ------- -
      ----------------
    -
  --

  ------ -
    -----
      ----- --------------------------
        ------ ------------------------------
        ------
          -----------
          ----------
          -------------
          ----------------- -- -----------------------------
        --

        ------ ------------------------------------
        ------
          ---------------
          -------------
          ----------------
          ----------------- -- --------------------------------
        --

        ------- -------------------------------

        ------ -- ---------------------------
      -------
    ------
  --
-

登出

可以通过 logout 方法来实现用户登出，代码如下：

------ - ------- - ---- ------------------------

-------- -------- -
  ----- - ------ - - ----------

  ----- ------------ - ----- -- -- -
    ----- ---------
  --

  ------ ------- ---------------------------------------
-

结论

@orther/react-cognito 是一个非常优秀的 React 库，对于使用 AWS Cognito 的开发者来说，能够极大地提高开发效率和代码质量，同时整个库也有很好的文档和示例，可以快速上手使用。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005694c81e8991b448e4cac

阅读全文

猜你喜欢

  • npm 包 fis3-parser-html-plugin 使用教程

    简介 在前端开发中，我们经常需要使用构建工具对代码进行优化和压缩，其中 fis3 是一个非常优秀的前端构建工具。同时，为了使开发和维护变得更加高效，我们还需要使用到各种各样的插件。

    3 年前
  • npm 包 es7-typescript-starter 使用教程

    在现代前端开发中，使用 TypeScript 是越来越普遍的选择。而使用 TypeScript 的好处之一是能够更好地管理代码，避免出现一些常见的编程错误。但是为了使用 TypeScript，必须建立...

    3 年前
  • npm 包 jspdf-with-html2canvas 使用教程

    简介 在前端开发中，很多时候需要将页面内容以 PDF 的形式下载或者导出。而 jspdf-with-html2canvas 这个 npm 包，可以方便地将网页的内容转换成 PDF 文件。

    3 年前
  • npm 包 meekee 使用教程

    Meekee 是一个 npm 包，它是一个用于创建可编辑的、可交互的编程练习的轻量级库。它可以方便地用于前端开发中的教学和演示。 本篇文章中，我们将详细介绍 Meekee 的使用方法，并包括示例代码和...

    3 年前
  • npm 包 mongoose-jobqueue 使用教程

    介绍 mongoose-jobqueue 是一个基于 Mongoose 的简单而灵活的工作队列包，用于在 Node.js 中进行异步任务处理和调度。它可以轻松地实现各种背后数据存储和调度逻辑，通过简单...

    3 年前
  • npm 包 react-settings-panel 使用教程

    简介 React Settings Panel 是一款基于 React 技术开发的 UI 组件库，它提供了一系列的组件，可以快速地在页面上构建出一个通用的设置面板。

    3 年前
  • npm 包 time-in 使用教程

    随着前端技术的飞速发展，我们经常需要对日期、时间进行处理。而 npm 包 time-in 可以简化我们进行时间处理的步骤，本文将会分享关于 npm 包 time-in 的使用教程。

    3 年前
  • npm 包 totvs-custom 使用教程

    在前端开发中，我们经常需要使用各种 npm 包来帮助我们完成开发任务。本文将介绍一种 npm 包 totvs-custom，并给出详细的使用教程和示例代码。 什么是 totvs-custom？ tot...

    3 年前
  • npm 包 @fritz-c/react-image-diff 使用教程

    在前端开发中，经常需要做一些图片对比的工作，比如两张图片之间的差异，或者一个图片和一个特定设计样式之间的对比。这时候，@fritz-c/react-image-diff 就是一个很好用的 npm 包，...

    3 年前
  • npm 包 datecompute 使用教程

    前言 在前端开发中，我们经常需要对日期进行计算。但是 JavaScript 自身对日期的功能比较弱，在不断变化的日期计算场景中，JavaScript 原生的日期对象很难完美胜任。

    3 年前
  • npm 包 egg-thrift 使用教程

    什么是 egg-thrift egg-thrift 是基于 Apache Thrift 实现的 Egg 插件，提供了用于处理 Thrift 协议的异步服务器开发的基本框架。

    3 年前
  • npm 包 fplugin 使用教程

    随着前端技术的不断发展，越来越多的模块化工具被研发出来，npm 是其中最为重要的一个。在前端开发中，我们通常使用众多的开源库和框架来辅助我们的编码工作。但是，我们也经常遇到这样的问题：一个库或框架并不...

    3 年前
  • npm 包 @madarche/donottrack 使用教程

    @madarche/donottrack 是一款方便快捷地实现 Do Not Track 功能的 npm 包，它可以自动将用户的 DNT(Don't Track) 选项设置为 true，保护用户免受隐...

    3 年前
  • npm 包 formula-machine 使用教程

    介绍 formula-machine 是一个基于 JavaScript 的数学公式解析器，它可以将数学公式字符串转化为可执行的 JavaScript 函数，提供了快捷灵活的方式进行数学表达式的计算。

    3 年前
  • npm 包 node-osr 使用教程

    前言 node-osr 描述了一组用于查询 Oxide 拆分后物品名称的方法。对于前端开发人员，该包能够帮助他们更轻松地操作一些数据。本篇文章将详细介绍如何使用 npm 包 node-osr。

    3 年前
  • npm 包 react-image-lightbox-fit 使用教程

    前言 在前端开发中，经常需要使用图像展示功能。而其中，一个对于用户友好的功能便是图片放大。然而，使用原生方式实现图片放大需要处理许多细节，而且逻辑往往较为繁琐。在此情况下，npm 包 "react-i...

    3 年前
  • npm 包 result-service-selenium-cucumber-js 使用教程

    1. 简介 result-service-selenium-cucumber-js 是一个针对前端自动化测试的 npm 包，它集成了 Selenium 和 Cucumber 框架，并提供了一种简洁易用...

    3 年前
  • npm 包 @yci/u-share 使用教程

    简介 在前端项目开发中，常常需要使用一些常见的第三方库来完成一些功能。其中，@yci/u-share 是一个方便且易于使用的社交分享组件，它可以帮助我们在网页中快速实现社交分享功能。

    3 年前
  • npm 包 ngx-cli-library_test 使用教程

    在前端开发中，我们经常需要使用各种第三方库来辅助我们进行开发。而 npm 包是前端开发者最常使用的一种第三方库。ngx-cli-library_test 就是一个非常优秀的 npm 包，它可以帮助我们...

    3 年前
  • npm 包 limberest 使用教程

    在前端开发中，我们经常需要进行接口测试和数据模拟，更好地调试我们的应用程序。limberest 是一个基于 Node.js 的开发工具，它可以帮助我们高效地模拟 REST API，并提供了易于使用的 ...

    3 年前

相关推荐

    暂无文章