Meteorで初めてのユーザアカウント

本記事は公式チュートリアル9の内容に沿って説明するものです。

チュートリアルの目次

Meteorに標準で用意されているユーザアカウント機能

Meteorには標準ですぐに使えるアカウント機能が組み込まれています。現状では、下記のパッケージが用意されています。

accounts-password
accounts-facebook
accounts-github
accounts-google
accounts-meetup
accounts-twitter
accounts-weibo

これらのパッケージを使うと、例えばFacebookの認証に対応したWebアプリを簡単に作ることができます。今回のチュートリアルでは外部システムと連携不要なaccounts-passwordを使います。accounts-passwordはhttpで用いるとパスワードが平文で流れるため、production環境で用いるにはhttpsが前提になるでしょう。テスト環境で使う分にはとても手軽です。

accounts-passwordパッケージを追加する

まずパッケージを追加しましょう。meteorは起動したままで大丈夫です。

meteor add accounts-ui accounts-password

を実行してください。これで関係する依存パッケージも自動で追加されます。

ログインボタンを配置する

次にログインボタンを表示するためのコードを追加します。sample-app.htmlの<form class="new-task">のすぐ上に下記のコードを追加してください。

1	{{> loginButtons}}

これだけでログインボタン(リンク)が表示されるはずです。ブラウザで確認しましょう。

デフォルトではログインのアカウント作成時に電子メールアドレスとパスワードの入力を求めます。テスト時は電子メールアドレスでなくても問題ないので、次のコードをsample-app.jsのif (Meteor.isClient) {}ブロック内の最後に追加してください。

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

これにより電子メールアドレスではなく単なるユーザ名を指定するようになります。

ログイン動作の確認

ログインボタンを押すとログインダイアログが表示され、そこにアカウント作成のリンクもあります。まずは、新規にアカウントを作成しましょう。その後、ログインやログアウトの機能がどのように動くかを確認しましょう。

ログインによる機能拡張

さて、ログイン自体はできましたが、このままでは特に機能に変化はありません。そこで、ログインによって次の2つの機能を実現します。

ログインしている場合のみ新規タスク追加のフォームを表示する
タスクに作成者を設定してログインユーザを作成者にする

1つ目の機能のためには、sample-app.htmlの<form class="new-task">のブロック全体を次のようにifブロックで囲みます。

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

currentUserはログインしているユーザの情報を格納しているオブジェクトで、ログインしていない状態では空(null)になるのでifブロックで表示の制御ができます。

2つ目の機能のためには、DBに追加するドキュメント(データ)にプロパティを追加します。具体的には、sample-app.jsのTasks.insert()文を次のように変更します。

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

Meteor.userId()はログインユーザのIDを返します。Meteor.user()はログインユーザのオブジェクトを返すもので、HTMLで用いるhelperのcurrentUserと同等の情報が格納されます。usernameプロパティでユーザ名を取り出すことができます。_idプロパティがユーザIDであり、Meteor.user()._idとMeteor.userId()は基本的に同じ意味になります。

ところで、このownerとusernameを両方指定する手法は非正規化と言ってJOINのないMongoDBではしばしば使われるようです。そもそもユーザIDが分かればユーザ名は一意に決まるはずなので冗長なのですが、ユーザ名も合わせて格納することで高速化できます。

最後に、DBに追加したユーザ名を表示するようにします。sample-app.htmlの

1	<span class="text">{{text}}</span>

を

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

に変更しましょう。

今回の以上の修正で変更した後のファイルは、こちらのJavaScriptファイルとこちらのHTMLファイルと同じようになっているはずなので必要応じて確認してください。

動作確認

実際に想定通りに動くか確認しましょう。可能であれば複数のアカウントを作成してそれぞれでタスクを追加してみるとよいです。以前に追加したタスクにはusernameプロパティはないのでユーザ名は表示されないことに注意しましょう。

確認項目

ログインボタンが表示されていること
ログインボタンが機能すること

まとめと次のステップ

今回はパスワード認証のパッケージを用いましたが、OAuthなどの外の認証機構を用いることもできます。これらを使い込なすことでよりアプリ開発が楽になるでしょう。次回はデータの書き込み権限に関する改善について学びます。

Menu

Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト