Dodawanie użytkowników

6

procent przetłumaczone

W tym rozdziale dowiesz się:

  • o kontach użytkowników w Meteorze.
  • jak dodać wszystkie potrzebne poświadczenia tożsamości do Microscope.
  • jak użyć wbudowanego pakietu accounts-ui aby natychmiastowo otrzymać interfejs użytkownika potrzebny do zalogowania.
  • Do tej pory zdołaliśmy w miarę sensownie utworzyć i wyświetlić trochę statycznych danych początkowych i połączyć wszystko razem w prosty prototyp aplikacji.

    Widzieliśmy nawet jak nasz UI reaguje na żywo na zmiany danych i wstawione czy zmienione dane pojawiają się natychmiastowo. Nadal jednak nasza strona jest sparaliżowana przez fakt, że nie możemy wstawiać danych. Faktycznie, nawet nie mamy żadnych użytkowników!

    Sprawdźmy jak można to naprawić.

    Konta: proste podejście do użytkowników

    W większości frameworków webowych dodawanie kont użytkowników jest znajomą przeszkodą. Na pewno trzeba to robić prawie w każdym projekcie, ale nigdy nie jest to tak łatwe jak powinno być. Co więcej, kiedy tylko musisz pracować z OAuth lub jakimkolwiek innym schematem logowania, sprawy szybko się komplikują.

    Na szczęście Metor troszczy się o to wszystko. Dzięki temu, że pakiety Meteora mogą dodać kod zarówno po stronie serwera (JavaScript) i klienta (JavaScript, HTML i CSS), możemy dostać system logowania prawie za darmo.

    Mógłbyś po prostu użyć wbudowanego w Meteorze UI dla kont użytkowników (za pomocą mrt add accounts-ui), ale ponieważ zbudowaliśmy całą aplikację za pomocą Bootstrap, użyjemy zamiast tego pakiet accounts-ui-bootstrap-dropdown (nie martw się, jedyna różnica to styl UI). Wpisz w linii komend:

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

    Te dwie komendy dają nam dostęp do specjalnych szablonów dla kont użytkowników; możemy dołączyć je do naszej strony za pomocą helpera {{> loginButtons}}. Przydatna wskazówka: możesz kontrolować, po której stronie ekranu pokaże się przyciski do logowania używając atrybutu align (na przykład {{> loginButtons align="right"}}).

    Dodamy przyciski do naszego nagłówka. Ponieważ nasz nagłówek zaczyna się rozrastać, dajmy mu trochę więcej miejsca we własnym szablonie (wstawimy go do client/views/includes/). Użyjemy także trochę markup'u i klas Bootstrap aby upewnić się, że wszystko ładnie wygląda:

    <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

    Teraz, gdy otwieramy naszą aplikację w oknie przeglądarki, widzimy przyciski do logowania w górnym prawym rogu naszej strony.

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

    Możemy ich użyć do dodania konta, zalogowania się, zapytania o zmianę hasła i wszystkiego potrzebnego tej prostej stronie dla kont użytkowników opartych na hasłach.

    Aby przekazać naszemu systemowi kont, że chcemy aby użytkownik logował się za pomocą nazwy użytkownika, dodajemy po prostu blok konfiguracji Accounts.ui w nowym pliku config.js w folderze client/helpers/:

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

    Zatwierdź 6-1

    Added accounts and added template to the header

    Dodanie pierwszego użytkownika

    Spróbuj dodać konto użytkownika: przycisk “Sign in” zmieni się i pokaże twoją nazwę użytkownika. Potwierdza to, że konto użytkownika zostało dla Ciebie utworzone. Ale skąd pochodzą dane konta użytkownika?

    Przez dodanie pakietu accounts Meteor utworzył specjalną kolekcję, do której można mieć dostęp przez Meteor.users. Aby ją zobaczyć, otwórz konsolę przeglądarki i wpisz:

     Meteor.users.findOne();
    
    Konsola przeglądarki

    Konsola powinna zwrócić obiekt reprezentujący twojego użytkownika; jeżeli przyjrzysz mu się bliżej, zauważysz że jest tam obecna twoja nazwa użytkownika jak i _id, które jest twoim unikatowym identyfikatorem. Zauważ, że możesz również otrzymać akutalnie zalogowanego użytkownika wołająć Meteor.user().

    Teraz wyloguj się i ponownie utwórz konto z inną nazwą użytkownika. Meteor.user() powinno zwrócić teraz drugiego użytkownika. Ale poczekaj, zawołajmy:

     Meteor.users.find().count();
    1
    
    Konsola przeglądarkiu

    Konsola zwraca wartość 1. Czy nie powinna mieć wartości 2? Czy pierwszy użytkownik został usunięty? Jeżeli spróbujesz zalogować się jako pierwszy użytkownik, zobaczysz, że tak się nie stało.

    Upewnijmy się i sprawdźmy w kanonicznym magazynie danych, czyli bazie danych Mongo. Zalogujemy się do Mongo (meteor mongo w terminalu) i sprawdzimy:

    > db.users.count()
    2
    
    Konsola Mongo

    Zdecydowanie jest dwóch użytkowników w bazie. Dlaczego więc widzimy jednego w przeglądarce?

    Tajemnicza publikacja!

    Jeżeli wrócisz w myślach do rozdziału 4, możesz pamiętać, że przez wyłączenie autopublish zablokowaliśmy automatyczne wysyłanie wszystkich danych przez kolekcje z serwera do każdego podłączonego klienta i jego lokalnej wersji kolekcji. Potrzebowaliśmy stworzyć parę, publikację i subskrypcję, aby przesyłać dane przez kanał klient-serwer.

    Nie ustawialiśmy jednak żadnej publikacji dla użytkownika. Dlaczego zatem widzimy jakiekolwiek dane użytkownika?

    Odpowiedź jest taka, że pakiet accounts automatycznie przeprowadza auto-publish aktualnie zalogowanego użytkownika, bez względu na inne ustawienia. Jeżeli by tego nie robił, użytkownik nie mógłby się nigdy zalogować na stronę!

    Pakiet accounts publikuje wyłącznie bieżącego użytkownika. Wyjaśnia to, dlaczego użytkownik nie może widzieć szczegółów kont innych użytkowników.

    Publikacja zatem publikuje wyłącznie jeden obiekt użytkownika dla każdego zalogowanego użytkownika (i nie publikuje żadnego, gdy nie jesteś zalogowany).

    Co więcej, dokumenty w naszej kolekcji użytkownika nie zawierają tych samych pól po stronie klienta i serwera. W Mongo, użytkownik posiada wiele danych. Aby to zobaczyć, wróc do terminala Mongo i wpisz:

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

    Z drugiej strony, w przeglądarce obiekt użytkownika o wiele bardziej zredukowany, co możesz sprawdzić przez wpisanie równorzędnej komendy:

     Meteor.users.findOne();
    Object {_id: "kYdBd9hr3fWPGPcii", username: "tmeasday"}
    
    Konsola przeglądarki

    Powyższy przykład pokazuje jak lokalna kolekcja może być bezpiecznym podzbiorem prawdziwej bazy danych. Zalogowany użytkownik widzi wyłącznie tyle prawdziwego zbioru danych, ile potrzebuje (w tym przypadku do zalogowania). Jest to użyteczny wzorzec do zapamiętania, jak zobaczymy później.

    Nie oznacza to, że nie możesz sprawić, aby większa część danych użytkownika była publiczna, jeżeli tylko chcesz. Możesz odnieść się do Dokumentacji Meteora aby sprawdzić jak opcjonalnie publikować więcej pól w kolekcji Meteor.users().