Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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」ですが。

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

標準ログインUI

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

つかってみる

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

アカウントをつくる

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

ログインできた!

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

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

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

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

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

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

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

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

Meteor.user()のリファレンス

リファレンスから、

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

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

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

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

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

Meteor.user()で取得できるオブジェクト

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

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

Meteor.usersのリファレンス

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

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

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-uiaccounts-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) テンプレートを使ってみる

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away