Meteor adds users

Add a user

So far, we've created and displayed some static data in a more reasonable way and connected it to a simple data prototype.

Although our interface responds instantly to changing data, real-time insertion or change of data is reflected in the interface. H owever, our website does not appear to provide a page for users to modify the data. In fact, we don't even have users!

Let's see how to solve this problem.

Accounts: Make it easy for users

In most web frameworks, adding user accounts is a familiar and cumbersome task. H owever, almost every project you do needs to be used, but it doesn't make it easy for us. Even when you're dealing with open authorization (OAuth) or other third-party authentication, these things tend to get more disgusting and complicated.

Fortunately, Meteor can help you solve it easily. Because the meteor package's code can run on both the server (JavaScript) and the client (JavaScript, HTML, and CSS), we can easily get an account system.

We can use Meteor's meteor add accounts-ui but since we've already built the app with the Bootstrap package, accounts-ui-bootstrap-3 the only difference is that the style is different inside). We enter at the terminal:

meteor add ian:accounts-ui-bootstrap-3
meteor add accounts-password

The effect of these two commands is to provide some special account templates to our project, which can then be used on our website through the helper of the {{loginButtons}} Tip: You can control the alignment direction of the drop-down menu in the login box by adding its align property (ex: s {{loginButtons align="right"}}

We add buttons to our header template. S o the head will contain more and more content, so let's make more room for it (we'll put it client/templates/includes/ At the same time, we use some additional tags and class please refer to Bootstrap to make the interface look better:

<template name="layout">
  <div class="container">
    {{> header}}
    <div id="main" class="row-fluid">
      {{> yield}}
    </div>
  </div>
</template>

<template name="header">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="{{pathFor 'postsList'}}">Microscope</a>
      </div>
      <div class="collapse navbar-collapse" id="navigation">
        <ul class="nav navbar-nav navbar-right">
          {{> loginButtons}}
        </ul>
      </div>
    </div>
  </nav>
</template>

Now, go browse our app and we'll see the account login button appear in the top right corner of the website.

Meteor's built-in account interface

This way we can use it to register, log in, change your password, and it has the same account system features as all other websites.

How do I tell our account system that users need to sign in with a username password? Simply configure an Accounts.ui module into a file config.js and put the file client/helpers/

Accounts.ui.config({
  passwordSignupFields: 'USERNAME_ONLY'
});

Add an account and its template-to-head template

Create our first user

Next, sign up for an account: then the Sign in button turns into a userna name that shows you. T his indicates that a user account has been created successfully. But where does the user account's data come from?

After adding accounts package, Meteor has created a new collection that can be Meteor.users To verify it, open your browser console and enter:

❯ Meteor.users.findOne();

Browser console

The console should return a user object, and if you take a closer look, you can find your userna name, as well as the user name that _id Note that you can also Meteor.user()

Now let's log out and register a different userna name again. Meteor.user() now return a second registered user. But wait a minute, let's take a look at the first run:

❯ Meteor.users.find().count();
1

Browser console

Does the console return 1? I sn't it 2? W as the first user deleted? If you log in to the first user again, you will find that it has not been deleted.

Let's check it out in the Mongo database. Enter the following code by entering the meteor mongo at the terminal):

> db.users.count()
2

Determines that there are two users. But why do we just see one in the browser?

Release the mystery!

If you look back on Chapter 4, you may remember that we autopublish and we prevented the collection from automatically sending all data from the server to each accessed client. Then we created a publishing and subscription method to implement the transfer of data.

But we haven't set up any user publishing methods. So why can we still see the user's data?

The answer is that the account package does "automatically publish" the basic account information of the currently logged-in user. If not, the user will not be able to log on to the site!

However, the account package only publishes users who are currently logged in. This explains why one user can't see the details of another account.

So it's only the user object that's currently logged in to the user (and it's not there when you log off).

What's more, our user collection doesn't seem to contain exactly the same fields in the server and client. I n the Mongo database, users have a large amount of data. To test, go back to your Mongo terminal and enter:

> db.users.find()
{
  "_id": "H5kKyxtbkLhmPgtqs",
  "createdAt": ISODate("2015-02-10T08:26:48.196Z"),
  "profile": {},
  "services": {
    "password": {
      "bcrypt": "$2a$10$yGPywo3/53IHsdffdwe766roZviT03YBGltJ0UG"
    },
    "resume": {
      "loginTokens": [{
        "when": ISODate("2015-02-10T08:26:48.203Z"),
        "hashedToken": "npxGH7Rmkuxcv098wzz+qR0/jHl0EAGWr0D9ZpOw="
      }]
    }
  },
  "username": "sacha"
}

However, in the browser, the user object has fewer fields and can be seen by entering such a command:

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

This example shows us how a local collection becomes a secure subset of database data. T he logged-in user can only see collection properties that are sufficient to work with the client (ex: login). You'll know later that this is a very learning model.

But that doesn't mean you can't publish more user data. You can refer to the Meteor documentation to see how the Meteor.users collection selectively publishes more fields.