リアルタイムなToDoアプリをMilkcocoaとJavaScriptで作る（認証編）

前回に引き続き、ToDoアプリを作成します。前回までのソースコード一式は以下です。

以下の流れで行っていますが、今回は3.と4.を実装します。

1. データを保存しないToDoアプリを作る（前回）
2. Milkcocoaでデータを保存＆リアルタイムに編集する（前回）
3. 認証機能利用の準備をする（今回）
4. 自分だけしか編集できないようにする（今回）
5. チームにしか編集できないようにする（次回）

認証機能利用の準備をする

認証機能にはAuth0というサービスを利用します。

認証機能を利用する前に、Milkcocoa・Auth0（認証サービス）・ソーシャルログインをしたいSNS間での「情報の教え合い」が必要です。

面倒ですが、各サービスに「この開発者（アプリ）にだけ利用可能で、他の人には勝手に使わせないよ」と保証するために必要なことなのでしっかりやります（この過程で出てくる長い文字列は人に見られないよう注意してください）。

Auth0の設定についてはこちらの記事も参考にしてください。事前にAuth0に登録して、アプリを作成しておいてください。

以下の図に沿って説明していきます。

ソーシャルログイン利用登録

Auth0に登録してアプリを作ったら、まず、先ほどの図の「1.ソーシャルログイン利用登録」を行います。ソーシャルログインを利用したいSNSの開発者向けサイトで、アプリを作成します。

・Twitter Appsでアプリを作成

Twitter Appsでアプリを作成します。Callback URLは「https://(Auth0のアカウント名).auth0.com/login/callback」に設定します。

英語ばかりでわからない場合は以下の記事を参考にして下さい。
Twitter APIで、アプリケーションを登録する方法

・Facebook Developersでアプリを作成

Facebook Developersでアプリを作成します。

英語ばかりでわからない場合は以下の記事を参考にして下さい。
Facebookアプリの開発者登録とアプリ作成手順

アプリを作成したら、「My Apps > Settings > Advanced」の「Client OAuth Login」を有効にして、「Valid OAuth redirect URIs」に「https://(Auth0のアカウント名).auth0.com/login/callback」を入力します。

また、Callbackの際に「許可されていません」という注意書きを出さないために、App Domainsに「(Auth0のアカウント名).auth0.com」を登録します。

また、他の人にも公開したい場合は、Contact Emailにメールアドレスを入力して、Statusの「Publicにしますか？」をYESに切り替えます。

・Auth0で利用登録

SNSでアプリを作成したら、Auth0側で利用登録をします。

Auth0のアプリの管理画面の「Connections > Social」でTwitterとFacebookにチェックを入れます。

チェックを入れたら、Twitter・Facebookのアイコンをクリックして、先ほどの「Twiiter Apps」や「Facebook Developers」で見ることが出来るID(Key)とSecretをそれぞれ入力します。

これでAuth0側が、TwitterログインとFacebookログインを利用可能になりました。

MilkcocoaのシークレットキーをAuth0に教える

次に、先ほどの図の「2.シークレットキーを教える」を行います。

Milkcocoaのアプリ固有のシークレットキー（暗号化を解く鍵みたいなもの）をAuth0に教えることで、Auth0とMilkcocoa間でユーザ情報が入ったトークンをやり取りできるようになります。

Milkcocoaのアプリの管理画面の「認証」でAuth0用のシークレットキーをコピーして、Auth0のアプリの管理画面の「Apps/API > Setting」のClient Secretに貼り付けます。

これで、MilkcocoaとAuth0が連携しました。

Allowed Callback URLに登録する・許可Originに登録する

最後に、先ほどの図の「3.Allowed Callback URLに登録する・許可Originに登録する」を行います。

Auth0のアプリの管理画面の「Apps/API > Setting」のAllowed Callback URLと、Milkcocoaのアプリの管理画面の「設定」の許可Originに、ToDoアプリを公開するURLを入力します（開発環境であればlocalhostを登録します）。

これで、ToDoアプリでAuth0とMilkcocoaによる認証が利用可能になりました。

自分だけしか編集できないようにする

準備が完了したので、ようやく実装に入ります。まずは「自分だけが編集できる」ToDoアプリを作ってみます。

Auth0のLockを利用する

LockとはAuth0で認証機能を利用するときに、ログインのUIも一緒にAuth0が提供してくれるものです。

以下のコードでAPIを利用開始できます。

var lock = new Auth0Lock(
  '{Auth0のアプリ固有のClient Id}',
  '{Auth0のアカウント名}.auth0.com'
);

userメソッド、authWithTokenメソッドを使ってユーザー情報を取得する

userメソッド、authWithTokenメソッドを使ってユーザー情報を取得するgetUser関数を作成します。getUser関数はユーザー情報を取得し、取得できなかった場合は再度ログインを行うように実装します（Milkcocoaのメソッドの意味が分からなければ、ドキュメントを参照下さい）。

注意すべきなのは、Auth0の関数が返す「ユーザー情報」のうちIDにあたるものは、(ユーザー情報が入った変数).subということです（詳しい仕様はこちらをご覧下さい）。

function getUser(callback) {
  // 現在ユーザーがログインしていたら'user'にユーザー情報を渡す
  milkcocoa.user(function(err, user) {

    // エラーが出たらストップ
    if (err) {
      callback(err);
      return;
    }

    // ログインしていたら
    if(user) {

      // ログイン後処理
      callback(null, user.sub);

    }
    // ログインしてなかったら
    else{

      // showはログイン画面を表示する関数。コールバックはユーザーがログインを行ったときに実行するもので、ユーザー情報を'profile（生データ）'と'token（トークン化されたもの）'に渡す。
      lock.show(function(err, profile, token) {

        if (err) {
          callback(err);
          return;
        }

        // デバッグ用
        console.log(err, profile, token);

        // tokenを使ってMilkcocoaでログイン
        milkcocoa.authWithToken(token, function(err, user) {

          if(err) {
            callback(err);
            return;
          }
          // ログイン後処理
          callback(null, user.sub);
        });
      });
    }
  });
}

ログイン後の処理は、push、stream、onに関しては前回のものをそのまま使います。dataStoreだけ、セキュリティルールを設定するために以下のようにします。

getUser(function(err, user_id) {

  var todoDataStore = milkcocoa.dataStore('todos').child(user_id);

  // stream, on, pushなど諸々割愛

});

自分のToDoだけを編集できるように、セキュリティルールを書く

自分のToDoだけを編集できるように、セキュリティルールを書きます。

セキュリティルールは、ユーザーがデータストアにアクセスできるかどうかを記述できる簡単な言語です。管理画面の「セキュリティルール」のエディタに記述します。詳しくはMilkcocoaのドキュメント内のセキュリティルールを参照下さい。

先ほども言ったように、Auth0の関数が返す「ユーザー情報」のうちIDにあたるものは(ユーザー情報 が入った変数).subです。

セキュリティルールでは、現在ログインしているユーザー情報をaccountで取得できるので、account.subがユーザーIDになります。

先ほど、データストアtodosの子階層にユーザーIDを名前にしたデータストアを作成しました。なので以下のようなルールを書けば、そのデータストアと同じ名前のユーザーIDを持っているユーザーだけがアクセスできるようになります。

todos/[userid] {
  permit : all;
  rule : account.sub == userid;
}

ここまでのソースコードとデモはこちらです（iframe内で動作しているためログイン後にウインドウが残りますが、本来は自動で閉じます）。

次回は特定のチームのみが編集できるようにします

今回は、Auth0の認証を使ったログイン方法と、セキュリティルールの簡単な使い方を紹介しました。

次回は応用編として、「特定のチームのみ」が利用可能なToDoアプリにする方法を紹介します。