ユーザアカウントを使う

Meteorにはアカウントシステムとドロップインログインユーザーインターフェイスがあり、マルチユーザー機能を数分でアプリケーションに追加できる。アカウントシステムとUIを有効にするには、関連するパッケージを追加する必要がある。次のコマンドを実行： meteor add accounts-ui accounts-password

HTMLに次のコードを追加してログインプルダウンを追加。 {{> loginButtons}}

次に、JavaScriptで、電子メールアドレスの代わりにユーザー名を使用するようにアカウントUIを構成する次のコードを追加。

import { Accounts } from 'meteor/accounts-base';

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

これで、ユーザーはアカウントを作成してアプリにログインできる。

でもまだログインとログアウトの差がないため、 2つの関数を追加する：

ログインしたユーザーにのみ新しいタスク入力フィールドを表示する
どのユーザーが各タスクを作成したかを表示する

これを行うために、2つの新しいフィールドをタスクコレクションに追加する。

owner - タスクを作成したユーザの_id。
username - タスクを作成したユーザーのユーザー名をタスクオブジェクトに直接保存する(ので、タスクを表示するたびにユーザーを参照する必要はない。)

タスクの構造にユーザ情報も追加

Tasks.insert({
      text,
      createdAt: new Date(), // current time
      owner: Meteor.userId(),
      username: Meteor.user().username,
    });

HTMLでは、#ifブロックヘルパーを追加して、ログインしているユーザーがいる場合にのみフォームを表示する設定にする

{{#if currentUser}}
        <form class="new-task">
          <input type="text" name="text" placeholder="Type to add new tasks" />
        </form>
      {{/if}}

<span class="text"><strong>{{username}}</strong> - {{text}}</span>

これで、ユーザーはログインでき、各タスクがどのユーザーに属しているかを追跡できる。

自動アカウントUI

アプリにaccounts-uiパッケージがある場合、ログインドロップダウンを追加するために必要なのは、{{> loginButtons}}を持つloginButtonsテンプレートだけ。このドロップダウンは、どのログインメソッドがアプリに追加されたかを検出し、適切なコントロールを表示する。今回の場合、有効なログイン方法はaccounts-passwordだけなので、ドロップダウンにはパスワードフィールドが表示される。

accounts-facebookパッケージを追加することでアプリにFacebookのログインを使うこともできる。 - Facebookボタンが自動的にドロップダウンに現れる。

ログインしているユーザーに関する情報の取得

HTMLでは、組み込みの{{currentUser}}ヘルパーを使用して、ユーザーがログインしているかどうかを確認し、そのユーザーに関する情報を取得できる。たとえば、{{currentUser.username}}はログインしたユーザーのユーザー名を表示します。 JavaScriptコードでは、Meteor.userId（）を使用して現在のユーザーの_idを取得するか、Meteor.user（）を使用してユーザーの全ドキュメントを取得できる。

10 では、クライアントではなくサーバ上ですべてのデータ検証を行うことで、アプリをより安全にする方法を学習する

canpaku / study_record

Meteorチュートリアル〜ユーザアカウント〜 #9

ユーザアカウントを使う

自動アカウントUI

ログインしているユーザーに関する情報の取得

10 では、クライアントではなくサーバ上ですべてのデータ検証を行うことで、アプリをより安全にする方法を学習する