JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る （基本編）

# JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る （基本編）

# 俺はログインしたいんだ！！

何に？

[Meteor.js](https://www.meteor.com/)は、 **Webアプリづくりを楽しくする** フレームワークです。

<a href="https://www.meteor.com/"><img src="http://img.dfm.lrv.jp/meteor1/meteorlogo.jpg"></a>

さて、サっとプロトタイピングするにはとても便利なMeteorですが、なかなか1.0がでませんね。。。

あまりに遅いので、寄り道して[Max](http://cycling74.com/products/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}}` を追加しましょう。

```html
<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 

```

下記のように、ログインのためのボタン（？）が出てきました。

![ログインボタン登場](http://img.dfm.lrv.jp/meteor4/code1.png)

`loginButtons`なのに、なぜか「Sign In」ですが。

さっそくボタンをクリックすると

![標準ログインUI](http://img.dfm.lrv.jp/meteor4/standardloginui.png)

こんな感じでログイン画面が表示されます。

## つかってみる

最初は、アカウントがありませんので、アカウントを作成します。

![アカウントをつくる](http://img.dfm.lrv.jp/meteor4/CreateAccountWin.png)

メールアドレスとパスワードを入力してアカウントを作ります。
メールアドレスを入れる、といっても、これだけでは **メールが届いて認証するところまでは実装されません** 。
適当なアカウントを作ってみてください。

![ログインできた！](http://img.dfm.lrv.jp/meteor4/loggingin.png)

はい。ログインできました！

## ログイン後の処理を書いてみる

それでは、いよいよログインを使ったプログラムを書いてみましょう。

ログイン後に何かするプログラムを書くには、下記を把握する必要があります。

1. ログインしてるかどうかの判定方法
2. アカウント情報の構造
3. ログイン/ログアウトのタイミングの取得方法 

それぞれ見てみましょう。

### 1. ログインしてるしてるかどうかを判定する（`Meteor.user()`）

「ログインしてるの？してないの？」は、`Meteor.user()` で判定することができます。

[Meteor.user()のリファレンス](http://docs.meteor.com/#meteor_user)

リファレンスから、

- `Meteor.user()` の戻り値が `null` のときは未ログイン
- `Meteor.user()` の戻り値が `null` 以外のときは、ログイン済。アカウント情報のレコードが返却される

とあります。
これを使いましょう。

### 2. アカウント情報の構造

Meteor.user()でログイン済のときに返却されるアカウント情報は、`Meteor.users` というCollectionに全ユーザー分保存されていて、そのうち、今ログインしているユーザーのレコードだけ返してくれるようです。

取得できるのは、下記のような情報です。

![Meteor.user()で取得できるオブジェクト](http://img.dfm.lrv.jp/meteor4/UserObject.png)

上記から、`._id` がユーザーID、 `.emails[0].address` が、先ほどアカウント作成時に入力したメールアドレスになるようです。

詳細は下記リファレンスも参考にしてください。

[Meteor.usersのリファレンス](http://docs.meteor.com/#meteor_users)

### 3. ログイン/ログアウトのタイミングを取得する（`Deps.autorun()`）

最後は、ログイン・ログアウトの瞬間を取得する方法です。
Meteor.usersはCollectionの一種ですが、MeteorにはCollectionが変更されたタイミングで通知を受け取る仕組みがあります。
`Deps`という機能です。その中でも、今回は、`Deps.autorun()`を使います。

[Deps.autorunのリファレンス](http://docs.meteor.com/#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.を組み合わせてログイン後の処理を書いてみる

これまでの内容を組み合わせると、下記のようになります。

```js
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)](http://qiita.com/tadfmac/items/a63bb85e5cfb12bbbfc8)
[JavaScript超初心者向け Meteor メモ (2) v0.8.0でのテンプレートエンジンの変更について](http://qiita.com/tadfmac/items/823fd909bf3af2f6c7b7)
[JavaScript超初心者向け Meteor メモ (3) シンプルなチャットを作ってみる](http://qiita.com/tadfmac/items/e7e0d95b2affcf2438a9)
[JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る （Google/Twitterアカウント編）](http://qiita.com/tadfmac/items/5bfe73f181f9b45abe71)
[JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる](http://qiita.com/tadfmac/items/48d160ecba779237c771)
[JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる](http://qiita.com/tadfmac/items/2b5e111e8986fc98f6f8)