npm 包 express-passport-boilerplate 使用教程

简介

express-passport-boilerplate 是一款基于 Express 和 Passport 的身份验证的脚手架，可快速搭建一个基础的身份验证系统并进行二次开发。本文将详细介绍这个包的使用方法，旨在帮助前端开发人员快速构建高效、安全的 Web 应用程序。

安装

要安装该 npm 包，只需在终端中输入以下命令即可：

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

安装完成后，在项目文件夹中添加该包的依赖：

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

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

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

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

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

这将为您提供一个易于扩展的身份验证系统，同时集成了 login、logout、register 和 forgot password 功能。

配置

express-passport-boilerplate 默认使用以下配置：

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

如果需要修改配置，可以按照以下的格式添加到已有配置中：

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

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

登录

系统自带了 google、facebook、twitter 和 local 四个身份验证策略，可根据项目需求自行选择。

1.### Google 登录

  • 在 Google Cloud Console 的 APIs & Services 中添加 OAuth 2.0 客户端 ID。

  • 将 userInfo 添加到 Google Cloud Console 中的访问类型。

  • 修改以下 google-auth 配置项：

-------------- -
  --------- ---------------
  ------------- -------------------
  ------------ ------------------
--
  • 创建以下路由：
----------------------- ------------------------------- - ------ --------- ---------- ----

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

  1. Facebook 登录

  • 在 Facebook Developers 中创建一个应用程序。

  • 内部重定向 URI 要与 “回调 URL” 的值相同。

  • 将以下字段添加到“客户端 OAuth 配置”中：email、public_profile 和 user_friends。

  • 修改以下 facebook-auth 配置项：

---------------- -
  --------- ---------------
  ------------- -------------------
  ------------ ------------------
--
  • 创建以下路由：
------------------------- --------------------------------- - ------ --------- ----------------- ----

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

3.### Twitter 登录

  • 在 Twitter Developer 中创建一个应用程序。

  • 将以下字段添加到“应用程序设置”中：公钥和私钥。

  • 修改以下 twitter-auth 配置项：

--------------- -
  ------------ ------------------
  --------------- ---------------------
  ------------ ------------------
--
  • 创建以下路由：
------------------------ ----------------------------------

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

4.### 本地登录

  • 修改以下 local-auth 配置项：
------------- -
  -------------- --------
  -------------- -----------
  ------------------ ------
--
  • 创建以下路由：
----------------- ----- ---- -- ---------------------

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用

添加完以上路由之后，您现在可以使用以下路由：

  • /login
  • /register
  • /forgot-password
  • /reset-password
  • /auth/google
  • /auth/google/callback
  • /auth/facebook
  • /auth/facebook/callback
  • /auth/twitter
  • /auth/twitter/callback
  • /auth/local/login
  • /auth/local/register
  • /auth/local/forgot-password
  • /auth/local/reset-password

您还可以在自己的路由中使用 req.user 访问当前登录用户的信息。

结语

express-passport-boilerplate 为 Web 应用程序提供了一个易于扩展的身份验证系统，能够有效保护用户隐私和安全，并且可以方便地进行二次开发和定制。我们希望这篇文章对于正在寻找身份验证系统的前端开发人员有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 @ineentho/react-rangeslider 使用教程

    介绍 在前端开发中，使用拖动滑块来选择某个值的需求非常常见。@ineentho/react-rangeslider 是一个使用 React 实现的滑块组件库，提供了强大而易于使用的滑块功能。

    3 年前
  • npm 包 @indream/skygear-core 使用教程

    在前端开发中，我们经常需要通过调用后端接口来获取数据和完成业务逻辑。而使用 npm 包 @indream/skygear-core 可以轻松地实现前端与后端之间的数据传输和同步。

    3 年前
  • 包含 @hypersprite/react-geolocation-hoc 的前端应用

    在现代的 Web 应用程序中，地理定位是非常重要的功能。可以实现很多有趣的功能，比如定制化的个性化服务、针对特定区域的广告、距离感知和导航等等。Node Package Manager (npm) 提...

    3 年前
  • npm 包 char.min.js 使用教程

    在前端开发中，文字在页面中经常扮演重要角色。而 char.min.js 是一个小巧而功能强大的 npm 包，它可以提供各种方便的文字处理方法。在本文中，我将详细介绍 char.min.js 的使用方法...

    3 年前
  • npm 包 channel.min.js 使用教程

    前言 在前端开发中，经常需要实现页面之间的通信。如果是简单的单向通信，可以使用事件机制实现。但是如果是复杂的双向通信，就需要借助一些工具。其中， channel.min.js 就是一款非常实用的 np...

    3 年前
  • npm 包 @hyperdrives/classtab 使用教程

    介绍 在前端开发中，我们时常需要使用标签页来展示不同的内容。@hyperdrives/classtab 是一个高度可定制的标签页组件，它允许我们根据自己的需求设置不同的样式和效果，并支持多种交互方式。

    3 年前
  • npm 包 @hyperdrives/webassembly.org 使用教程

    在前端开发中，使用 WebAssembly 技术可以加速代码的执行速度，提高用户体验。而 @hyperdrives/webassembly.org 是一个为前端开发者打造的 WebAssembly 处...

    3 年前
  • npm 包 @hypersprite/material-ui-dropins 使用教程

    简介 @hypersprite/material-ui-dropins 是一个为前端提供精美 UI 组件的 npm 包，其中包括了一些很有用的组件，例如拖拽文件上传组件、动态表格组件、搜索框组件等等。

    3 年前
  • npm 包 @hysryt/kariga 使用教程

    前言 npm 是一个很方便的包管理工具，让我们能够很好地管理我们的项目依赖。在前端开发中，经常会使用各种 npm 包来辅助开发工作。今天我们要介绍的是一个在前端图形化开发中非常实用的 npm 包 @h...

    3 年前
  • npm 包 @hypersprite/react-vignette 使用教程

    介绍 @hypersprite/react-vignette 是一个 React 组件，可以将图片等媒体内容显示为漂亮的画框式效果，提供了丰富的自定义选项，适合用于相册、全屏图片查看等场景。

    3 年前
  • npm 包 @hysryt/sukusho 使用教程

    介绍 @hysryt/sukusho 是一款为前端开发者提供的轻量级的框架，用于实现自定义样式的选择器，以便更高效地构建网站页面。本文介绍了如何使用该 npm 包，并提供了一些示例代码供参考。

    3 年前
  • npm 包 console.min.js 使用教程

    在前端开发中，我们经常需要使用 console 来进行输出调试信息。但是，由于在生产环境中使用 console 仍存在一些问题，因此我们需要一个可以帮助我们解决这些问题的工具。

    3 年前
  • npm 包 booting.min.js 使用教程

    简介 booting.min.js 是一个小而强大的 JavaScript 库，可以用于实现网站 loaded/ready 时的动画效果。它的特色是体积小（压缩后只有 2KB）且易用。

    3 年前
  • npm 包 @infctr/bem-cn 使用教程

    BEM 是面向组件的 CSS 架构风格，它的核心是将页面分解成不同的组件，并使用块、元素、修饰器的方式来定义 CSS 样式。而 @infctr/bem-cn 是一个 npm 包，旨在提供一种更加灵活和...

    3 年前
  • npm 包 @infektweb/conventions 使用教程

    前言 在开发前端项目的过程中，我们经常需要在不同页面或组件之间共享数据或者使用某些第三方插件等。为了解决这些问题，我们通常需要使用一些规范或者命名约定来统一管理我们的代码。

    3 年前
  • npm 包 chat.min.js 使用教程

    简介 chat.min.js 是一个轻量级的 JavaScript 库，用于在前端实现在线聊天功能。它可以帮助前端开发者快速地集成聊天系统，优雅地展示聊天记录并实现即时通讯。

    3 年前
  • npm包@ifiske/cordova-plugin-fcm使用教程

    在现代移动应用程序中，推送通知成为了通信和发布的主要方式。Firebase Cloud Messaging（FCM）是Google提供的一项免费服务，为开发人员提供了在移动应用程序中发送“云消息”（以...

    3 年前
  • npm 包 chart.min.js 使用教程

    前言 在前端开发中，图表是很常见的需求。为了方便地实现图表的绘制，许多前端开发者都采用了 chart.min.js 这个优秀的 npm 包。本文将着重介绍如何使用 chart.min.js ，并附上详...

    3 年前
  • npm包@ifours/react-native-page-view使用教程

    简介 @ifours/react-native-page-view是一种React Native组件，可以用于创建水平页面视图，用户可以在这些页面间滑动。 安装 要安装@ifours/react-na...

    3 年前
  • npm 包 @influitive/icons 使用教程

    在前端开发中，图标设计是一个非常重要的部分。随着项目越来越复杂，手动维护图标库变得不可行，因此使用第三方图标库来管理图标变得非常实用。@influitive/icons 是一个非常实用的图标库，能够帮...

    3 年前

相关推荐

    暂无文章