Meteor 1.3 React日本語チュートリアル (step08)
Meteorの日本語版のチュートリアルのstep08です。
目次
- 最初のアプリを作成する
- Reactコンポーネントでビューを定義する
- コレクションにタスクを格納する
- フォームを使ってタスクを追加する
- タスクにチェックマークをつける・削除する
- アプリをAndroidやiOSで動かす
- 一時的なUIデータをステートに格納する
- ユーザアカウントを追加する (本記事)
- メソッドによるセキュリティ
- パブリッシュとサブスクライブによるデータフィルタリング
- テストについて
- その後の学習法について
ユーザアカウントを追加する
Meteorはアカウントシステムとすぐ使えるログインUIを備えていて、数分でアプリにマルチユーザの機能を追加できます。
今のところ、そのUIはMeteor標準のUIエンジンであるBlazeで作られています。将来的には、React専用のコンポーネントも用意されるかもしれません。
アカウントシステムとそのUIを有効にするには、対応するパッケージが必要です。アプリディレクトリで下記のコマンドを実行してください。
|
|
BlazeコンポーネントをReactでラップする
accounts-uiパッケージに含まれるBlazeのUIコンポーネントを利用するには、それをReactコンポーネントでラップする必要があります。そのために、AccountsUIWrapperというコンポーネントを新しいファイルで作りましょう。次のようにファイルを作成してください。ファイル名はimports/ui/AccountsUIWrapper.jsxです。
新しく定義したコンポーネントを読み込みましょう。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
続いて、アカウントUIにおいて電子メールアドレスの代わりにユーザ名を使う設定を追加しましょう。次のようにファイルを作成してください。ファイル名はimports/startup/accounts-config.jsです。
この設定を読み込む必要があります。client/main.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
ユーザ関連の機能を追加する
ユーザがアカウントを作成してアプリにログインできるようになりました。しかし、ログインできただけでは大して便利でもありません。2つの機能を追加しましょう。
- 新しいタスクの入力フィールドをログインしたユーザにのみ見せる
- それぞれのタスクをだれが作成したか見せる
これを実現するために、tasksコレクションに2つのフィールドを追加します。
owner- そのタスクを作成したユーザの_id。username- そのタスクを作成したユーザのusername。ユーザ名を直接タスクオブジェクトに保存することで、表示する度にユーザ情報を検索する必要がなくなります。
はじめに、handleSubmitイベントハンドラでこれらのフィールドを保存するコードを追加しましょう。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
データコンテナを修正してログインしているユーザの情報を取得します。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
続いて、renderメソッドにおいて、ユーザがログインしているときのみ表示するように条件文を追加します。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
最後に、それぞれのタスクのテキストの直前にusernameフィールドを表示するようにします。imports/ui/Task.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
ブラウザで、タスクを追加してみて自分の名前が表示されることを確認してください。本ステップ以前に入力した古いタスクはユーザ名がついていません。気になるようなら削除してしまいましょう。
これで、ユーザがログインしてそれぞれのタスクが誰のものであるかを管理できるようになりました。以下では、今回用いた概念を少し解説します。
自動型アカウントUI
accounts-uiパッケージをアプリに導入すると、ログインドロップダウンを追加するのに必要なことはそのUIコンポーネントを表示することだけです。このドロップダウンUIはどのログインメソッドがアプリに導入されているかを検知し、自動で必要なコントロールUIを表示します。今回の例では、有効にされたログインメソッドはaccounts-passwordだけであったため、ドロップダウンUIはパスワードフィールドを表示しました。もし試したければ、Facebookログインを有効にするaccounts-facebookパッケージを追加してみましょう。ドロップダウンUIにFacebookボタンが自動で表示されるはずです。
ログインしているユーザの情報を取得する
データコンテナにおいて、ログインしているユーザの情報を取得するためにMeteor.user()を使うことができます。例えば、Meteor.user().usernameはログインしているユーザの名前を返します。また、Meteor.userId()を使うと単にログインしているユーザの_idを取得できます。
次のステップでは、データのバリデーションをサーバで行い、アプリをより安全にする方法を学びます。
次のステップへ
step09: メソッドによるセキュリティ