Benutzerverwaltung für Webprojekt: Tipps für Anfänger

[Photon]

Hallo Community,

ich darf in den nächsten vier Monaten an einem Webprojekt arbeiten und es unter anderem um eine Benutzerverwaltung erweitern. Ich habe ein wenig (ziemlich wenig) Erfahrung mit JS (inkl. Node.JS) und PHP aber noch keine Erfahrung mit Datenbanken und speziell Nutzerverwaltungssystemen. Im Moment habe ich noch keine konkreten Fragen sondern wollte nur vorab sondieren, auf was ich mich da einlasse und wie die Sache am besten anzupacken ist.

Die Anforderungen sind nicht besonders groß: Der Nutzer soll sich registrieren und später an- und abmelden können, registrierte Nutzer sollen auf gewisse Daten, die bisher im Browser-Cache (localStorage) gespeichert werden, zugreifen können. Auf lange Sicht ist es denkbar so etwas wie ein kleines Nutzerkontrollzentrum dazuzubasteln, das hat aber zunächst keine hohe Priorität.

Ich frage mich nun, wie ich das Ganze am besten anpacken sollte. Gibt es da fertige Lösungen oder sollte ich lieber direkt damit anfangen die Sache from scratch selbst zu schreiben? Wie hoch ist der Aufwand so was zu schreiben? Gibt es irgendwelche Fallstricke (etwa in Sachen Sicherheit, Speichern von Nutzernamen und Passwörtern bzw. deren Hashes etc.), auf die man achten sollte?

Ich dachte an folgende Vorgehensweise: Eine Datenbanktabelle (z.B. SQL) für die Zugangsdaten erstellen, bei der Registrierung wird ein Eintrag mit Benutzername, Mailadresse und Passworthash gespeichert, bei der Anmeldung wird das eingegebene Passwort mit dem gespeicherten Hash abgeglichen; desweiteren eine Tabelle mit den Benutzerdaten erstellen, auf die dann der JS-Code der Webseite zugreift, um benutzerspezifische Inhalte anzuzeigen bzw. durch Benutzerinput erzeugte Daten dort wieder abzuspeichern. Ist das einigermaßen sinnvoll oder mache ich da beim Versuch das Rad neu zu erfinden ganz blöde Fehler?

Vielen Dank schon mal für jeden Input,
Photon

 

[benneq]

oder sollte ich lieber direkt damit anfangen die Sache from scratch selbst zu schreiben?

Nein, bloß nicht! Wenn man (fast) keine Ahnung der Thematik hat, dann sucht man sich eine fertige Lösung für alle sicherheitsrelevanten Dinge. (Man sieht ja, was bei z.B. Facebook und Knuddels passiert ist, auch wenn man denken sollte/würde, dass die seit Jahren im Geschäft sind und Ahnung von der Materie haben sollten)

Ist das einigermaßen sinnvoll oder mache ich da beim Versuch das Rad neu zu erfinden ganz blöde Fehler?

"Das Rad neu erfinden" ist in Sachen IT Sicherheit (fast) immer ein ganz großer Fehler

Zu deinen genannten Punkten kommen dann nach und nach sicherlich immer mehr "Problemchen", die gelöst werden müssen: Passwort-Vergessen Funktion, RBAC (oder sogar ACL), 2-Faktor-Auth, Schutzmaßnahmen für Brute Force Angriffe, etc. pp.

 

[Photon]

Hab ich mir fast gedacht. Meine einzige Entschuldigung dafür, dass ich das Selberschreiben in Betracht gezogen habe, ist dass es sich um ein kleines Projekt für den Einsatz im universitären Bereich handelt, es wird also sicher nicht irgendwo prominent auf der ersten Seite der Google-Suchergebnisse auftauchen und Hacker anlocken.

Gibt es ein gutes Suchstichwort, mit dem man eine Übersicht über vorhandene Systeme dieser Art schnell findet?

Danke für den Input!

 

[benneq]

Eine Übersicht wäre mir jetzt nicht bekannt - vielleicht kennt ja jemand anders so eine Liste. Aber auch da: Vorsicht! Die IT Landschaft wandelt sich sehr schnell, und bei allem was 3-4 Jahre alt ist, ist die Wahrscheinlichkeit hoch, dass es mit aktuellen Frameworks nicht mehr problemlos kompatibel ist.

Aber die Suchwörter kann ich dir nennen: Identity Management und Access Management.

Grundsätzlich würde ich aber von der anderen Seite herangehen: Such dir erst mal ein Framework, mit dem die Applikation schreiben willst, und dann schaust du was es dort für entsprechende Lösungen gibt.

Ansonsten gibt's natürlich auch externe Systeme für die Nutzerverwaltung, wie z.B. KeyCloak. Sowas setzt man aber eigentlich auch nur ein, wenn man mehrere Systeme miteinander integrieren will. Dementsprechend komplex ist es dann auch und wird dich viele Stunden oder Tage kosten, um es in dein Projekt zu integrieren.

"Wichtig" ist auf jeden Fall, dass du dir Frameworks und Plugins raussuchst, die 1. aktuell sind und weiterhin gepflegt werden, und 2. eine große Userbasis haben. Dadurch ist zu 99% sichergestellt, dass du eine gute Dokumentation vorfindest oder zumindest auf StackOverflow haufenweise Antworten zu deinen Fragen findest

 

[rocketworm]

Ich plane aktuell auch ein privates Projekt mit einem Raspberry. Die Konfiguration und Steuerung soll auch über PHP GUI mit einer DB dahinter erfolgen.
Ich wäre daher ebenfalls für Vorschläge zu fertigen SQL gestützten Benutzer und Gruppenverwaltungs Templates/Frameworks in PHP dankbar.

 

[Photon]

Hmm, ein Framework klingt irgendwie ziemlich bombastisch. Im Moment ist die Webapp eine simple HTML-Seite mit ein wenig JS im Code und Einbindung einer JIT-Visualisierung. Als ich mit dem Projekt angefangen habe, habe ich auch erst nach fertigen Plattformen gesucht, wo man so eine JIT-Visualisierung an geeigneter Stelle einbinden könnte, aber hab irgendwie den Eindruck gewonnen, dass solche Frameworks dafür nicht flexibel genug sind. Kann aber gut sein, dass das eine Fehleinschätzung war, ich war damals noch ein gutes Stück unerfahrener als ich es jetzt bin.

 

[benneq]

Ein paar bekannte Frameworks wären da:

• Symfony (PHP)
• Laravel (PHP)
• Django (Python)
• Ruby on Rails (Ruby)
• Spring (Java)

Out of the Box kommen die alle nur mit dem nötigsten: Also der Infrastruktur für Z.B. Templates, Dependency Injection, Events, Datenbankzugriff, etc.
Security wird dort im Normalfall nur in einer minimalistischen Form ohne konkrete Implementierung angeboten - oder man muss sogar dafür auf Drittanbieter Plugins zurückgreifen. Das liegt aber hauptsächlich daran, dass Security je nach Bedarf sehr einfach oder extrem komplex sein kann, und es keine 1-size-fits-all-Solution gibt.

Diese Frameworks sind hauptsächlich auf's Backend ausgelegt, aber können auch für Frontend Templates (im Stile von PHP) benutzt werden. Aber es ist natürlich auch problemlos möglich dort eine REST Schnittstelle (oder WebSockets, GraphQL, etc.) bereitzustellen, und eine SPA mit Angular/Vue/React oder reinem jQuery als Frontend zu verwenden.

@Photon Wenn du jetzt noch sagen könntest, wo es dir an Flexibilität gemangelt hat, ließe sich das noch besser einschätzen

 

[new Account()]

Ich wäre daher ebenfalls für Vorschläge zu fertigen SQL gestützten Benutzer und Gruppenverwaltungs Templates/Frameworks in PHP dankbar.

ProcessWire (PHP) kann das und hat eine Adminoberfläche dabei um das über ne GUI verwalten zu können.
Weiterhin ist das Framework sehr flexibel.
Die Frameworks von @benneque sind aber sicher auch nicht verkehrt.

 

[Photon]

@Photon Wenn du jetzt noch sagen könntest, wo es dir an Flexibilität gemangelt hat, ließe sich das noch besser einschätzen

Nun, vielleicht habe ich damals einfach an der falschen Stelle gesucht. Hinten rauskommen soll ein Interface, bei dem auf einer Seite die (Vorlesungs)Inhalte eingebettet sind, aktuell PDF-Dateien, und auf der anderen Seite eine JIT-Visualisierung als Navigation, wobei man Hyperlinks in den PDFs anklicken kann, die die JIT-Visualisierung an passender Stelle öffnen, und umgekehrt Hyperlinks in der Visualisierung, die passende PDFs öffnen. Kurz, es sollte sich so eine JIT-Visualisierung und eine PDF-Datei einbinden lassen und das Ganze mit JS steuern lassen.

Als ich mich nach Frameworks umgeschaut habe, hab ich eher bei Wiki-Plattformen so wie MediaWiki geschaut und gehofft die Visualisierung als Plugin einbauen zu können (dass die Inhalte als PDF-Dateien vorliegen werden, war zu dem Zeitpunkt noch nicht klar), bin aber an der Plugin-Schnittstelle gescheitert. Aber das sind wohl keine Frameworks, wie du sie im Sinn hattest. Letztere hatte ich da noch gar nicht auf dem Schirm gehabt.

 

[benneq]

... wenn ich jetzt noch genau wüsste, was du mit JIT Visualisierungen meinst

Insgesamt klingt das Projekt aber ziemlich winzig. Einzig das "Einbetten von PDF" und die Verlinkungen bereiten mir etwas Kopfschmerzen.
Grundsätzlich sind PDFs ja erst mal einfach nur "Dokumente", die ein Browser mithilfe eines (externen) Plugins anzeigt. Inzwischen gibt's allerdings auch PDF Viewer als JavaScript Plugin, wie z.B. pdf.js Soll heißen: Das bloße Anzeigen von PDFs innerhalb einer Webseite sollte kein Problem darstellen.
Bei den Verlinkungen bin ich mir aber noch nicht sicher. Wenn in den PDFs bereits der korrekte Link hinterlegt ist (also z.B. zu http://euerserver:1234/vorlesung/42 ) dann sollte das auch problemlos funktionieren. Anders sieht's aber aus, wenn du die Links aus der PDF "abfangen" willst, und dann den Link in deinem JS Code selbst erstellen / modifizieren willst. Das geht garantiert auch, aber ich kann dir nicht sagen wie einfach / kompliziert das wird.

Und ja, das Media Wiki ist ... ein Wiki Also dazu gedacht, um Inhalte in Wiki Form anzulegen und darzustellen. Sowas kannst du natürlich auch als Grundlage verwenden, und dann ein entsprechendes Plugin für's MediaWiki schreiben. Dazu kann ich dir allerdings überhaupt nichts sagen. Das einzige was ich bisher mit MediaWiki gemacht habe, war die Benutzerverwaltung und ein fertiges YouTube Plugin eingebunden
Mit den entsprechenden Plugins wirst du auch dort deine Visualisierung und PDF anzeigen können. Aber wenn's die nicht gibt, dann wird's auf jeden Fall schwierig.

Dann solltest du vielleicht noch einen Schritt rückwärts gehen, und erst mal schauen, für welche Frameworks es bereits entsprechende Plugins für deine Datenformate gibt, weil das dürfte mit hoher Wahrscheinlichkeit das komplexeste an deinem Projekt ausmachen.

 

[Photon]

Oh, Mist, ich dachte, ich hätte die Seite von JIT verlinkt, aber offenbar doch nicht. Hier ist es: https://philogb.github.io/jit/demos.html

Bisher binde ich die PDFs einfach als iframe ein, was bei Desktop-Browsern dank integrierten PDF-Viewern gut funktioniert, bei mobilen Browsern aber überhaupt nicht. Da wollte ich demnächst auch mal recherchieren, ob es PDF-Viewer gibt, die sich direkt in die Webseite einbinden lassen und auch in mobilen Browsern funktionieren, die keinen eigenen Viewer haben.

Das mit dem Links abfangen habe ich bisher mit einem Dirty Hack gelöst, es funktioniert also grundsätzlich.

Meinst du, so ein Framework wie die, die du weiter oben gepostet hast, wäre geeignet für das Projekt und der Mühe wert? Habe dafür 8 Wochenstunden für 4 Monate finanziert bekommen, werde bei Bedarf auch Überstunden reinstecken, aber ich müsste mich da from scratch in so ein Framework einarbeiten und wenn das die zur Verfügung stehende Zeit um Größenordnungen übersteigt, dann ... vielleicht doch lieber beim guten alten HTML bleiben?

 

[BeBur]

Du solltest alles was nicht mit der Kernaufgabe zu tun hat gar nicht anfassen bezgl. Code, sondern fertiges nehmen.
Diese seltsame Sache das mit dem localstorage statt normal mit einer db gearbeitet werden soll muss fallen gelassen werden, das ist quasi eine Konsequenz daraus.

Ich würde nicht einmal ein Web-Framework nehmen, sondern gleich ein CMS. Und dann eben nur diese eine spezielle View mit dem PDF mit JS realisieren.

Sonst bist du in 2 Monaten soweit, dass du nicht mehr 80% der Zeit gegen das Framework kämpfst und gar nicht vorwärts kommst. Das hast du schon gut erkannt.

Also ja, nimm z.B. ein Wiki her (wobei ein klassisches CMS eher geeignet sein könnte) und mach aus deinen Dirty Hack eine komplette produktiv nutzbare Lösung.

 

[benneq]

Oh, Mist, ich dachte, ich hätte die Seite von JIT verlinkt, aber offenbar doch nicht. Hier ist es: https://philogb.github.io/jit/demos.html

Das hatte ich bei meiner Suche auch schon gefunden, aber war beim Namen "InfoVis" dann etwas irritiert
Aber da würde ich mal sagen: Wunderbar, das liegt ja eh schon alles in JavaScript vor, mit Beispiel Code und Doku. Sollte also ein Kinderspiel werden.

Da wollte ich demnächst auch mal recherchieren, ob es PDF-Viewer gibt, die sich direkt in die Webseite einbinden lassen und auch in mobilen Browsern funktionieren, die keinen eigenen Viewer haben.

Wie gesagt: Mozillas pdf.js ist da ein guter Anlaufpunkt. Ist halt ein riesiges Plugin, aber damit muss man halt leben, wenn man die komplette PDF Spezifikation in JavaScript umsetzt

Das mit dem Links abfangen habe ich bisher mit einem Dirty Hack gelöst, es funktioniert also grundsätzlich.

Da wäre ich an Details interessiert

Meinst du, so ein Framework wie die, die du weiter oben gepostet hast, wäre geeignet für das Projekt und der Mühe wert? Habe dafür 8 Wochenstunden für 4 Monate finanziert bekommen, werde bei Bedarf auch Überstunden reinstecken, aber ich müsste mich da from scratch in so ein Framework einarbeiten und wenn das die zur Verfügung stehende Zeit um Größenordnungen übersteigt, dann ... vielleicht doch lieber beim guten alten HTML bleiben?

Grundsätzlich rate ich immer zur Verwendung von Frameworks. Ja, man muss sich natürlich einarbeiten. Aber dafür erleichtern sie dir auch ganz viel Kram, den man sonst von Hand schreiben müsste.
Ob die Zeitplanung hinkommt, kann ich dir leider nicht so wirklich sagen. Das sind ja gerade mal 144 Stunden, also nicht mal ein "normaler" Arbeitsmonat. Von dem was ich bisher weiß, würde ich schätzen, dass ich sowas in 40-80 Stunden umsetzen könnte. Aber ich muss mich halt auch nirgends einarbeiten

Es muss auch kein (ich sag mal) "leeres" Framework sein, wo man den Großteil selbst schreiben muss. Es gibt auch einen Mittelweg: Das CMS. Das beschränkt einen quasi auf das Erstellen und Anzeigen von "Inhalten", aber das ist ja genau das was du willst.
Da ist eine Userverwaltung im Normalfall schon voll funktionsfähig integriert. Dafür muss man sich dann halt mit den Plugins rumschlagen. Aber ich kann mir gut vorstellen, dass es für deine Anforderungen in den großen CMS bereits Lösungen dafür gibt.
Beispiele dafür wären: WordPress, Joomla, TYPO3 und Drupal.

 

[Photon]

Ok, das wird jetzt wahrscheinlich eine ziemlich doofe Frage, denn ich habe mit CMS noch nie gearbeitet: Ich habe mir ein CMS immer so vorgestellt, dass es quasi eine fertige Web-Plattform ist, wie etwa eine Blog-Plattform, wo man als Nutzer Inhalte einfügen kann und da auf einige vorgegebene Inhaltstypen beschränkt ist. Dass man also insbesondere nicht hergehen und eine JIT-Visualisierung einbauen kann oder ein PDF einbinden kann, dass da irgendwelche Header und Footer und Sidebars rumhängen, die die nutzbare Bildschirmfläche stark reduzieren. Also kurz gesagt, dass ein CMS eben nicht flexibel genug für das Vorhaben ist. Ist das eine völlige Fehlvorstellung oder ist da was dran?

Da wäre ich an Details interessiert

Wenn du magst, kann ich dir den Link zum aktuellen Stand des Projekts per PM schicken, ist leider momentan in einem eher desolaten Zustand, sonst hätt ich es schon längst öffentlich gepostet.

 

[benneq]

Also kurz gesagt, dass ein CMS eben nicht flexibel genug für das Vorhaben ist. Ist das eine völlige Fehlvorstellung oder ist da was dran?

Ja, jein und nein Ein CMS ist halt nur das Grundgerüst für deinen Content. In der Standardausführung bekommst du normalerweise so ein Zwischending aus Blog und Wiki mit Benutzerverwaltung und Datenbankanbindung.
Das Layout der Seite ist natürlich vorgegeben, aber ein ordentlich CMS ist so modular gestaltet, dass du alles mögliche anpassen kannst. Diese Layout Anpassungen reichen vom Farbschema bis hin zum Responsive Design. Man muss halt (am einfachsten) ein passendes Theme finden und einbinden.
Mit deinen Daten kommt so ein CMS von Haus aus natürlich nicht zurecht, aber durch die Modularität kann man entsprechende Plugins erstellen. Und wenn das CMS groß genug ist und du Glück hast, gibt's evtl. auch schon die passenden Plugins für dich.

Also grob zusammengefasst: Egal, wofür du dich entscheidest, du wirst dich irgendwo einarbeiten müssen

Bei Google findest du da vielleicht auch schon schnell Ergebnisse und Beispiele, wie z.B.
https://de.wordpress.org/plugins/tags/pdf-js/
https://www.drupal.org/project/pdfjs
Für die PDF Integration.

 

[BeBur]

Du wirst mit einem CMS ohne Erfahrung nicht schaffen, dass du 100% deiner Vorstellung umsetzen kannst. Insgesamt sind CMS aber sehr ausgereift und du kannst nur mit konfigurieren (zuweilen immer noch schwer genug) und ohne Coding extrem viel gutes machen.
Ich denke insgesamt traust du heutigen CMS zu wenig zu.

Was du da beschreibst klingt aber auch wie etwas, dass man zu großen Teilen rein mit CSS und JS umsetzen kann. Das geht dann sowieso nahezu komplett unabhängig vom CMS. Das CMS ist dann dafür, die nötigen Dokumente und Infos (wann wohin springen o.ä.) zu sammeln und dem JS Code zur Verfügung zu stellen.

Drupal ist meines Erachtens nach noch zu abstrakt, nimm lieber ein 'normales' CMS.

 

[Photon]

Was du da beschreibst klingt aber auch wie etwas, dass man gut rein mit CSS und JS umsetzen kann. Das geht dann sowieso nahezu komplett unabhängig vom CMS.

Wahrscheinlich bis auf die Benutzerverwaltung, oder? Denn das war ja die Stelle, wo reines JS vielleicht zu basal ist und wo ich beim Neuerfinden des Rads wohl in einen Haufen Schwierigkeiten laufen dürfte...

 

[BeBur]

Ja, unter anderem. Ich sprach da nur von dieser PDF-Geschichte was ja der Kern der Sache ist, wenn ich es richtig verstehe.

Der Grund warum es das Projekt gibt wird ja nicht eine Benutzerverwaltung sein. Das ist nur ein Randthema. Das eigentliche Thema sind die Funktionen, wegen denen es das Projekt gibt.

 

[Photon]

Ja, unter anderem. Ich sprach da nur von dieser PDF-Geschichte was ja der Kern der Sache ist, wenn ich es richtig verstehe.

Genau, PDF-Einbettung und Einbinden der JIT-Visualisierung. Hat ja auch mit von Hand gebasteltem "Drumherum" bisher ganz gut geklappt, wenn auch mit neueren Browser-Versionen immer mal wieder was kaputt ging, so wie auch jetzt gerade... Aber jetzt soll eben die Benutzerverwaltung dazu, damit die Benutzerdaten nicht im Browsercache rumhängen und von einem anderen Gerät nicht mehr zugreifbar sind. Und da ist eben die Frage, wie man das am besten anpackt, also besser bei der bisherigen Herangehensweise bleibt oder doch auf irgendwas Fertiges umsattelt...