it-swarm.com.de

Einfacher Passwortschutz für die React App auf Heroku

Ich habe eine einfache, mit create -react-app erstellte React-App, die ich bei Heroku (oder irgendwo einfach) und mit einem Kennwort schützen möchte. Der Schutz kann sehr einfach sein - nur ein einziges Passwort ist in Ordnung.

Ich begann mich mit HTTP basic auth zu beschäftigen, fand aber keine einfache Antwort. Das nächste, was ich gefunden habe, war in diesem Beitrag , aber (a) Ich liebe es nicht, meine App auswerfen zu müssen, und (b) ich konnte es nicht zum Laufen bringen. Ich hatte gehofft, ich könnte ein Heroku-Plugin finden, aber auch dort kein Glück.

Es wäre nicht zu schwer, eine Komponente zu schreiben, die meine App einschließt und ein Kennwort anfordert, bevor sie angezeigt wird. Das Problem ist, dass es clientseitig ausgeführt wird. Ich möchte das richtige Kennwort serverseitig (oder einen Hash davon) speichern und die App dazu veranlassen, Kennwortversuche an den Server zu senden.

Da Create-React-App über Node läuft, hoffe ich, dass es eine einfache Möglichkeit gibt, bestimmte Dinge auf dem Server auszuführen und zu speichern, aber vielleicht irre ich mich. Irgendwelche Vorschläge?

8
Dave Feldman
4
Jed Richards

Ich gehe davon aus, dass Ihre Absicht darin besteht, die Konfig-Variablen in Heroku zu schützen, damit andere Personen nicht mit Ihren Anmeldeinformationen auf Ihre Datenbank zugreifen können.

Die Art und Weise, wie ich meine Bereitstellung für Heroku mit einem Kennwort geschützt habe, besteht darin, eine keys_prod.js-Datei zu erstellen, die die Heroku-Konfigurationsvariablen meiner mLab-Datenbank in meinem Backend enthält, und zwar mit express und mongoDB:

datei keys_prod.js:

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

keys.js-Datei:

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

in meiner server.js-Datei habe ich hinzugefügt:

// 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'));
  });
}

Auf diese Weise können Sie die von Ihnen in heroku ausgefüllten Konfigurationsdaten anfordern, ohne sie in Ihr Repo aufzunehmen.

3
Samsoedien

Wenn Sie Node im Backend verwenden, können Sie Passport Basic Auth verwenden.

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

Bei jedem Zugriff auf die Seite im Browser wird ein Popup angezeigt, in dem Sie nach Benutzername und Kennwort gefragt werden.

2
froston