Heroku 上 React 应用的简单密码保护答案

【问题标题】：Simple password-protection for React app on HerokuHeroku 上 React 应用的简单密码保护
【发布时间】：2019-01-30 02:18:08
【问题描述】：

我有一个使用 create-react-app 创建的简单 React 应用程序，我想将其部署到 Heroku（或其他简单的地方）并使用密码保护。保护非常简单——只需一个密码即可。

我开始研究 HTTP 基本身份验证，但没有找到简单的答案。我找到的最接近的是this post，但是（a）我不喜欢不得不弹出我的应用程序的想法，并且（b）我无法让它工作。我希望我能找到一个 Heroku 插件，但也没有运气。

编写一个包装我的应用程序并在显示之前请求密码的组件并不难。问题是它在客户端执行。我想在服务器端存储正确的密码（或其哈希），并让应用程序将密码尝试发送到服务器。

由于 create-react-app 在 Node 之上运行，我希望有一种简单的方法可以告诉它在服务器上执行和存储某些东西，但也许我错了。有什么建议吗？

【问题讨论】：

澄清一下：回到 Apache/PHP 时代，我只需调整我的 httpd 配置以启用基本身份验证，无论我的应用程序在做什么，它都不会加载，直到用户通过密码提示。我基本上只是想在 Heroku/React 世界中这样做。
您能否提供有关您的应用如何在 Heroku 上运行的信息？你使用serve 或其他静态服务器吗？
你有后台吗？你使用数据库吗？未来内容会发生变化吗？以后密码会变吗？内容应该被简单地隐藏还是同时受到保护？

标签： reactjs authentication heroku password-protection

【解决方案1】：

这个 create-react-app buildpack 似乎支持 http 基本身份验证：

https://github.com/substantial/create-react-app-buildpack

https://elements.heroku.com/buildpacks/substantial/heroku-buildpack-static

【讨论】：

【解决方案2】：

我假设您的意图是保护 heroku 中的配置变量，以便其他人无法使用您的凭据访问您的数据库。

我使用密码保护部署到 heroku 的方式是使用 express 和 mongoDB 在我的后端创建一个包含我的 mLab 数据库的 Heroku 配置变量的 keys_prod.js 文件：

keys_prod.js 文件：

module.exports = {
  mongoURI: process.env.MONGO_URI,
  secretOrKey: process.env.SECRET_OR_KEY
};

keys.js 文件：

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./keys_prod');
} else {
  module.exports = require('./keys_dev');
}

在我添加的 server.js 文件中：

// DB Config
const db = require('./config/keys').mongoURI;

// Server static assets if in production
if (process.env.NODE_ENV === 'production') {
  // Set static folder
  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

这允许您请求您在 heroku 中填写的配置变量，而无需将其包含在您的存储库中。

【讨论】：

我认为您正在考虑一些不同的东西——这是针对最终用户的。当有人在她的浏览器中打开我的应用程序时，我想要在她被允许使用之前提示密码。基本上是一个非常简单的登录。
哦，我的错，以为您的问题与保护您在 Heroku 构建中的凭据有关。我没有简单的解决方案，但是您是否研究过 passport.js 和 json webtoken？您需要一些样板才能使其正常工作，但最后您可以使用以下命令将您的快速路由设为私有：router.get('/', passport.authenticate('jwt', { session: false }), (req, res) => { 基本上，通过填写登录信息，您可以为用户提供一个 webtoken，让他们在预定的时间内访问该页面。如果他们有一段时间不活动，它将自动使会话过期。

【解决方案3】：

如果你在后端使用 Node，你可以使用Passport Basic Auth

app.get('*', passport.authenticate('basic', { session: false }), (req, res) => {
  res.sendFile(path.join(`${__dirname}/../build/index.html`))
})

每次您在浏览器中访问该页面时，都会出现一个弹出窗口，询问您的用户名和密码。

【讨论】：

这在 create-react-app 范围内是否可行，还是需要我弹出并进一步配置？
不需要弹出