Benutzer hinzufügen

6

Zu ...% übersetzt

In diesem Kapitel wirst du:

  • Etwas über Benutzerkonten in Meteor lernen.
  • Authentifizierung für Microscope einrichten.
  • Das accounts-ui package für das UI einsetzen.
  • Bisher haben wir es geschafft, statische fixture Daten zu kreieren und anzuzeigen und diese in Form eines einfachen Prototypen zusammenzubauen.

    Wir haben auch gesehen, dass unser UI sich reaktiv gegenüber Datenänderungen verhält und wie eingefügte or geänderte Daten sofort erscheinen. Weil wir selber aber keine Daten einfügen können, ist unsere Site mehrheitlich nutzlos.

    Lass uns sehen wie wir das Problem lösen können.

    Accounts: Benutzerkonten einfach gemacht

    In den meisten Web Frameworks ist das Hinzufügen von Benutzerkonten ein mühseliger Vorgang, der jedoch in fast jedem Projekt von Nöten ist. Sobald man sich mit OAuth oder anderen Authentifizierungs-Methoden auseindandersetzen muss, findet man sich schnell im Chaos wieder.

    Zum Glück hält Meteor hierfür eine Lösung parat. Dank der Art und Weise wie Meteor packages dem Server (JavaScript) und dem Client (Javascript, HTML und CSS) Code zur Verfügung stellt, erhalten wir ein Benutzerkonten-Sytem zum Nulltarif.

    Wir könnten hierfür Meteor’s hausgeigenes UI für Benutzerkonten einsetzen (meteor add accounts-ui), aber da wir unsere ganze App mit Bootstrap aufgebaut haben, werden wir das accounts-ui-bootstrap-deopdown package dafür verwenden. (Keine Bange, der einzige Unterschied ist das unterschiedliche Styling). In der Kommandozeile gebe Folgendes ein:

    $ meteor add accounts-ui-bootstrap-dropdown
    $ meteor add accounts-password
    
    Terminal

    Diese zwei Befehle stellen uns die Benutzerkonten Templates zur Verfügung. Wir können diese in userer Site mit dem {{loginButtons}} helper einfügen. Dazu ein nützlicher Tipp: Du kannst kontrollieren, auf welcher Seite das Log-in Dropdown angezeigt wird, nämlich indem du das align Attribut dem helper mitgibst. (Zum Beispiel: {{loginButtons align="right"}})

    Wir fügen die Buttons in unseren Header ein. Da dieser immer grösser wird, lagern wir ihn in sein eigenes Template aus (client/views/includes). Weiter benutzen wir zusätzlichen Markup und ein paar Bootstrap Klassen um alles schön anschaubar zu machen.

    <template name="layout">
      <div class="container">
        {{>header}}
        <div id="main" class="row-fluid">
          {{yield}}
        </div>
      </div>
    </template>
    
    client/views/application/layout.html
    <template name="header">
      <header class="navbar">
        <div class="navbar-inner">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="{{pathFor 'postsList'}}">Microscope</a>
          <div class="nav-collapse collapse">
            <ul class="nav pull-right">
              <li>{{loginButtons}}</li>
            </ul>
          </div>
        </div>
      </header>
    </template>
    
    client/views/includes/header.html

    Wenn wir jetzt zu unserer App browsen sehen wir die Login-Buttons in der oberen rechten Ecke unserer Site erscheinen.

    Meteor's built-in accounts UI
    Meteor’s built-in accounts UI

    Wir können sie für folgende Aktionen benutzen: Anmelden, Einloggen, Passwortänderung und alles was eine einfache Site für Benutzerauthentifizierung braucht.

    Um unser Benutzersystem so zu konfigurieren, dass Benutzer sich mit einem Benutzernamen auf unserer Site anmelden müssen, brauchen wir einen Accounts.ui Konfigurationsblock in die Datei config.js (client/helpers/) einzufügen:

    Accounts.ui.config({
      passwordSignupFields: 'USERNAME_ONLY'
    });
    
    client/helpers/config.js

    Commit 6-1

    Added accounts and added template to the header

    Unseren ersten Benutzer erstellen

    Melde nun ein neues Benutzerkonto an: Sobald erfolgt, ändert der Button und zeigt deinen Benutzernamen. Das zeigt auf, dass ein Benutzer für dich angelegt wurde. Aber woher kommt dieses Benutzerkonto?

    Mit dem Hinzufügen des accounts packages, hat Meteor eine neue spezielle Collection erzeugt, welche mit Meteor.users aufgerufen werden kann. Um diese zu überprüfen, öffne die Browser-Konsole und tippe:

     Meteor.users.findOne();
    
    Browser console

    Die Konsole sollte ein Objekt mit deinem User enthaltend zurückgeben. Wenn du näher hinschaust, kannst du sehen dass sowohl dein Benutzernamen, als auch eine _id zur eindeutigen Identifizierung darin enthalten sind. Den gegenwärtig eingeloggten User kannst du auch mit dem Befehl Meteor.user() ermitteln.

    Logge dich aus und melde ein zweites Benutzerkonto mit einem anderem Benutzernamen an. Meteor.user() sollte jetzt einen zweiten Benutzer zurückgeben. Lass uns das überprüfen:

     Meteor.users.find().count();
    1
    
    Browser console

    Die Konsole gibt 1 zurück. Sollten das nicht 2 sein? Wurde der erste Benutzer etwa gelöscht? Wenn du versuchst mit dem ersten Benutzer einzuloggen, siehst du das dies nicht der Fall ist.

    Lass uns das verifizieren, indem wir den anerkannten Datenspeicher, die Mongo DB anschauen. Wir loggen in die Mongo DB ein (meteor mongo in der Konsole) und überprüfen:

    > db.users.count()
    2
    
    Mongo console

    Es sind also tatsächlich zwei Benutzer vorhanden. Weshalb können wir im Browser dann nur Einen zur selben Zeit sehen?

    Eine “Mystery Publication”!

    Wenn du zurück an Kapitel 4 denkst, erinnerst du dich vielleicht daran, dass wir mit dem Ausschalten von autopublish allen Collections mitteilten, dass sie aufhören sollen automatisch alle Daten vom Server an jeden verbundenen Client in dessen lokale Version der Collection zu senden. Wir mussten eine Publication und eine Subscription erstellen um den Datenaustausch aufrecht zu erhalten.

    Doch die Tatsache dass wir nie eine Benutzer Publication erstellt haben, wirft die Frage auf, wie wir dann Benutzerdaten empfangen und darstellen können?

    Die Antwort hierfür liegt im accounts package versteckt. Dieses macht eine “Auto-Publikation” des aktuell eingeloggten Benutzers. Würde es dies nicht tun, könnte der Benutzer sich gar nicht erst einloggen.

    Das accounts package publiziert allerdings nur den aktuell eingeloggten Benutzer. Das erklärt, wieso ein eingeloggter Benutzer nicht Benutzerkonten-Details eines anderen Benutzers einsehen kann.

    Die Publication publiziert also nur ein Benutzer-Objekt (und nichts, wenn du nicht eingeloggt bist).

    Weiter noch: Dokumente in unserer Benutzer Collection scheinen nicht dieselben Felder auf dem Server, wie auf dem Client zu beinhalten. In der Mongo-DB hat ein Benutzer viele Datenfelder, welche dem Benutzer-Objekt auf dem Client fehlen. Um dies zu sehen gehe zurück in das Mongo Terminal und tippe:

    > db.users.findOne()
    {
      "createdAt" : 1365649830922,
      "_id" : "kYdBd9hr3fWPGPcii",
      "services" : {
        "password" : {
          "srp" : {
            "identity" : "qyFCnw4MmRbmGyBdN",
            "salt" : "YcBjRa7ArXn5tdCdE",
            "verifier" : "df2c001edadf4e475e703fa8cd093abd4b63afccbca48fad1d2a0986ff2bcfba920d3f122d358c4af0c287f8eaf9690a2c7e376d701ab2fe1acd53a5bc3e843905d5dcaf2f1c47c25bf5dd87764d1f58c8c01e4539872a9765d2b27c700dcdedadf5ac82521467356d3f91dbeaf9848158987c6d359c5423e6b9cabf34fa0b45"
          }
        },
        "resume" : {
          "loginTokens" : [
            {
              "token" : "BMHipQqjfLoPz7gru",
              "when" : 1365649830922
            }
          ]
        }
      },
      "username" : "tmeasday"
    }
    
    Mongo console

    Auf dem Client im Browser ist das Benutzer-Objekt aufs Wesentliche gekürzt. Gib folgende ein:

     Meteor.users.findOne();
    Object {_id: "kYdBd9hr3fWPGPcii", username: "tmeasday"}
    
    Browser console

    Dieses Beispiel zeigt uns wie eine lokale Collection ein sicheres Subset einer Datenbank Collection sein kann. Der eingeloggt Benutzer sieht gerade genug Daten seines gesamten Datensets, um eine Aktion auszuführen (in diesem Fall das Einloggen). Wie wir später noch sehen werden, ist dies ein nützliches Muster von dem du noch viel Lernen kannst.

    Dies heisst allerdings nicht, dass es unmöglich ist mehr Benutzerdaten zu publizieren, sofern du das möchtest. Konsultiere die Meteor docs um zu sehen wie du zusätzliche Felder aus der Meteor.users Collection publizieren kannst.