web-dev-qa-db-ja.com

HerokuのReactアプリの簡単なパスワード保護

単純なReactアプリ、create-react-appで作成されたもので、Heroku（またはどこか簡単な場所）にデプロイし、パスワードで保護したいのです。保護は非常に簡単です。単一のパスワードで十分です。

私はHTTP基本認証を調べ始めましたが、簡単な答えは見つかりませんでした。私が見つけた最も近いものは この投稿 でしたが、（a）アプリをイジェクトする必要があるという考えが好きではありません。（b）機能させることができませんでした。 Herokuプラグインが見つかると期待していましたが、そこにも運がありませんでした。

アプリをラップし、パスワードを表示する前に要求するコンポーネントを記述することはそれほど難しくありません。問題は、クライアント側で実行されることです。正しいパスワードをサーバー側（またはそのハッシュ）に保存し、アプリにパスワード試行をサーバーに送信させたい。

Create-react-appはNodeの上で動作するので、サーバー上で特定のものを実行および保存するように指示する簡単な方法があることを望んでいますが、おそらく私は間違っています。助言がありますか？

reactjsauthenticationherokupassword-protection
11
Dave Feldman

このcreate-react-appビルドパックはhttp基本認証をサポートしているようです：

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

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

5
Jed Richards

他の人があなたの資格情報であなたのデータベースにアクセスできないように、あなたの意図が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に入力した構成変数をリクエストできます。

3
Samsoedien

Nodeをバックエンドで使用する場合、 Passport Basic Auth を使用できます

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

ブラウザでページにアクセスするたびに、ユーザー名とパスワードを尋ねるポップアップが表示されます。

2
froston