JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る （基本編）
俺はログインしたいんだ！！
何に？
Meteor.jsは、 Webアプリづくりを楽しくする フレームワークです。
さて、サっとプロトタイピングするにはとても便利なMeteorですが、なかなか1.0がでませんね。。。
あまりに遅いので、寄り道してMax（スパゲッティ型プログラミング言語）などで遊んでるうちに、すっかりご無沙汰してしまって、危うく使い方忘れそうになりました。
これはイカン！というわけで、久々に触ってみることに。
今回は、ログイン画面を作るのに挑戦です！（なぜ？w）
準備。プロジェクトを作っておこう
最初にupdate
今回は、7/24現在の最新バージョンである v0.8.2をベースに話を進めます。
Meteorのバージョンを、念のため、
meteor update
で、最新にしておきます。
プロジェクトの作成
次にプロジェクトを作ります。
コマンドラインから、
> meteor create <プロジェクト名>
と入力すればプロジェクトが作れます。
今回は、logintest というプロジェクトを作ることで話を進めます。
> meteor create logintest
カレントディレクトリを移動しておいてください。
> cd logintest
accounts-uiを追加する
Webアプリにユーザーアカウントを作ってログインする機能を追加するには、Meteorアドオンの accounts-ui を使います。
さっそくアドオンを追加してみましょう。
コマンドラインから下記のように入力します。
> meteor add accounts-password accounts-ui
これでMeteor標準のログイン画面が用意されます。
一応、追加したアドオンの内容を紹介しておくと↓な感じです。
accounts-password
Password support for accounts
accounts-passwordはWebアプリに保存したアカウントとパスワードを使ってログインするUIを表示するためのアドオンです。
アカウント作成とログインを1つのダイアログボックスから行えるようになります。
accounts-ui
Simple templates to add login widgets to an app
accounts-uiは、その名の通りログイン画面を追加するアドオンです。
htmlに {{> loginButtons}} を追加する
アドオンを追加することで、ログイン画面の実装は終わりです。
次は、ログイン画面を呼び出す部分をつくってみましょう。
先ほど作ったプロジェクト logintest フォルダの中を見ると、
> ls
logintest.css
logintest.html
logintest.js
と、3つのファイルが作成されているはずです。
まず最初に、この中の logintest.html に、{{> loginButtons}} を追加しましょう。
<head>
<title>logintest</title>
</head>
<body>
<div>{{> loginButtons}}</div>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
早速、実行してみます。
> meteor
下記のように、ログインのためのボタン（？）が出てきました。
loginButtonsなのに、なぜか「Sign In」ですが。
さっそくボタンをクリックすると
こんな感じでログイン画面が表示されます。
つかってみる
最初は、アカウントがありませんので、アカウントを作成します。
メールアドレスとパスワードを入力してアカウントを作ります。
メールアドレスを入れる、といっても、これだけでは メールが届いて認証するところまでは実装されません 。
適当なアカウントを作ってみてください。
はい。ログインできました！
ログイン後の処理を書いてみる
それでは、いよいよログインを使ったプログラムを書いてみましょう。
ログイン後に何かするプログラムを書くには、下記を把握する必要があります。
- ログインしてるかどうかの判定方法
- アカウント情報の構造
- ログイン/ログアウトのタイミングの取得方法
それぞれ見てみましょう。
1. ログインしてるしてるかどうかを判定する（Meteor.user()）
「ログインしてるの？してないの？」は、Meteor.user() で判定することができます。
リファレンスから、
-
Meteor.user()の戻り値がnullのときは未ログイン -
Meteor.user()の戻り値がnull以外のときは、ログイン済。アカウント情報のレコードが返却される
とあります。
これを使いましょう。
2. アカウント情報の構造
Meteor.user()でログイン済のときに返却されるアカウント情報は、Meteor.users というCollectionに全ユーザー分保存されていて、そのうち、今ログインしているユーザーのレコードだけ返してくれるようです。
取得できるのは、下記のような情報です。
上記から、._id がユーザーID、 .emails[0].address が、先ほどアカウント作成時に入力したメールアドレスになるようです。
詳細は下記リファレンスも参考にしてください。
3. ログイン/ログアウトのタイミングを取得する（Deps.autorun()）
最後は、ログイン・ログアウトの瞬間を取得する方法です。
Meteor.usersはCollectionの一種ですが、MeteorにはCollectionが変更されたタイミングで通知を受け取る仕組みがあります。
Depsという機能です。その中でも、今回は、Deps.autorun()を使います。
リファレンスには下記のような説明があります。
Deps.autorun allows you to run a function that depends on reactive data sources, in such a way that if there are changes to the data later, the function will be rerun.
Deps.autorun()は、パラメータに関数を指定でき、指定された関数は、一度実行され、その中で利用される「リアクティブデータソース」が変化したときに指定した関数を再度呼び出してくれる、ということのようです。
「リアクティブデータソース」については Deps の説明に下記のような記載があります。
Meteor has a simple dependency tracking system which allows it to automatically rerun templates and other computations whenever Session variables, database queries, and other data sources change.
さて、前置きが長くなりましたが、今回変化したタイミングが知りたい対象はユーザーのログインの有無になります。
Meteor.user() で取得できるオブジェクトから ._id を見ても良いですが、Meteor.userId() を使う方が簡単でしょう。
Deps.autorun()に指定する関数内で、Meteor.userId()を判定して振り分ける処理を書けば良い、ということになります。
1.2.3.を組み合わせてログイン後の処理を書いてみる
これまでの内容を組み合わせると、下記のようになります。
if (Meteor.isClient) {
:
:
//
Deps.autorun(function(){
if(Meteor.userId()) {
console.log('ログインしてる');
var userobj = Meteor.user();
console.log(Meteor.userId()); // UserID
console.log(userobj.emails[0].address); // メールアドレス
}else{
console.log('ログインしてない');
}
});
:
:
}
説明長かったですが、コードは短いですね！w (説明ドへたくそで申し訳ないです)
まとめ。。。られなかった！（いろいろあって時間切れ）
今回はログインの基本編として accounts-ui と accounts-password で導入できる、メールアドレスとパスワードだけのログイン機能を見てみました。
今回書いたコードは全部で10行！
しかし、既にお気づきと思いますが、実際これだけだと、まだ使えませんよね。。
ひきつづき、
- メールアドレスとは別にユーザーアカウント（ID）を作って、そちらでログインするにはどうすんの？
- 表示をカスタマイズするには？
- Twitterなど別のアカウントでログインできないの？
について見ていきたいと思います。
つづく！（こんなんばっか！w）
バックナンバーと続き
下記もよろしくお願いします！
JavaScript超初心者向け Meteor メモ (1)
JavaScript超初心者向け Meteor メモ (2) v0.8.0でのテンプレートエンジンの変更について
JavaScript超初心者向け Meteor メモ (3) シンプルなチャットを作ってみる
JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る （Google/Twitterアカウント編）
JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる
JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる