第10回　JWT（JSON Web Token）に対応したMilkcocoaの認証機能を使ってみよう

はじめに

2014年8月からベータ版として公開されていたMilkcococaがこの度2015年5月8日から正式バージョンアップしました。それに伴い前バージョンからの変更点がいくつかあるのですが、今回はその中でも認証機能に絞って紹介したいと思います。

今回のゴール

Milkcocoaの認証機能を使って、サイトにユーザ登録／ログイン機能を実装してみます。応用的な内容として、セキュリティルールを使ってユーザ毎に権限を変える実装についても触れますので、余裕のある方はチャレンジしていただきたいです。

ちなみに、まだMilkcocoaを触ったことが無い人はチュートリアルでチャットを作ってみることをお勧めします。ものすごく簡単にチャットが作れる感動を体験しましょう。

新しくなったMilkcocoaの認証機能でログインしてみよう

新バージョンMilkcocoaの機能詳細などについては次回説明したいと思います。新バージョンMilkcocoaのサイトはこちらです。トップページにドット絵でお絵描きが出来きますが、同時に操作している人の操作がリアルタイムに共有される仕組みになっています。

JSON Web Token（JWT）対応したMilkcocoa

今後MilkcocoaではAuth0やAuthrocketと言ったJWT対応の認証サービスを使った認証機能を提供します。

ベータ版を利用していた方もいると思いますが、今後はauth0またはauthrocketと連携することでアカウント機能を実現します。Milkcocoaに新しくauthWithToken関数が追加されています。authWithToken関数では、JWT（JSON Web Token）を利用してログインを実現します。これにより、他のサービスと連携して認証機能を実現することが出来ます。

認証機能のチュートリアルもあるので確認しましょう。

Milkcocoaのシークレットキーの確認

まだMilkcocoaのアカウントを作成していない人は、第2回の記事などを参考に、アプリを作成しましょう。

とは言え、アプリ作成画面からボタンを押すだけです。

アプリを作成すると以下のような管理画面になります。

xxxxxxxx.mlkcca.comなどというドメインが設定されます。このxxxxxxxxの部分はアプリケーション毎に異なります。このMilkcocoaのアプリドメインは後で使います。

以下のアプリ管理画面の認証タブからAuth0用のシークレットキーを確認しましょう。後ほど利用します。

Auth0の`クライアントID`と`ドメイン`を取得する

Auth0は認証周りの機能に特化したJWT対応のBaaSです。今回はAuth0のJWTを使った認証機能の紹介をします。

アカウント登録

トップページからCREATE FREE ACCOUNTを押してアカウントを作成しましょう。

メールアドレスによる登録の他にGithub、Google、Microsoftアカウントなどでも登録が可能です。

アカウント作成ができると、Regionとdomainの設定画面になります。Regionは現時点（2015年5月）ではアメリカ西海岸とヨーロッパしかないので、デフォルトの「US West」のままにしておきます。domainは任意の文字列を設定しましょう。私はn0bisukeで設定しましたので、n0bisuke.auth0.comが私のauth0ドメインになります。これは後ほど利用します。

DATABASE項目の「Username-Password-Authentication」のみチェックをしてSAVEしましょう。

アカウントが作成が完了するとダッシュボードが確認できます。

アプリ作成

ダッシュボードのNEW APP/APIを選択し、アプリケーション名を入力してアプリ作成をしましょう。

アプリが作成されるとApps / APIs > Settingsに情報が表示されます。

ここのClient Secretに先ほどのMilkcocoaのシークレットキーを入力してSAVE CHANGESで保存しましょう。

この画面のClient IDと、先ほど設定したDomainを記録しましょう。

コーディング

Auth0Lockという認証UIを提供してくれるライブラリを使用します。Auth0Lockのドキュメントはこちらになります。

以下のソースコードに

Auth0のClient ID
Auth0のドメイン
Milkcocoaのアプリドメイン

の項目を適宜入れ込んでください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta property="og:title" content="milkcocoaを利用した認証のサンプル" />
  <title>milkcocoaを利用した認証のサンプル</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
  <script src="https://cdn.auth0.com/js/lock-6.js"></script>
  <!-- Setting the right viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script>
  $(function() {
    var lock = new Auth0Lock(
      'ここにAuth0のアプリケーションのClient ID',
      'ここにAuth0のドメイン 例)n0bisuke.auth0.com'
    );

    
    var milkcocoa = new MilkCocoa("ここにMilkcocoaのアプリドメイン");

    //ユーザー登録
    $("#add").click(function() {
      lock.showSignup();
      console.log(1);
    });

    //ログイン
    $("#login").click(function() {
      lock.showSignin(function(err, profile, token) {
        if (err) return;

        console.log(err, profile, token);
        milkcocoa.authWithToken(token, function(err, user){console.log(user);});
      });
    });

    //ユーザー情報
    $("#user").click(function() {
      milkcocoa.user(function(err, user) {
        if(user)
            $("#output").html("ログイン済み" + JSON.stringify(user));
        else
            $("#output").html("ログインしてください。");
      });
    });

  });

  

  </script>
</head>

<body>
    <button id="add">新規登録</button>
    <button id="login">ログイン</button>
    <button id="user">ユーザ情報取得</button>
    <div id="output"></div>
    <p class="footer"><strong>Powered by <a href="http://mlkcca.com/">Milkcocoa</a></strong></p>
</body>
</html>

MilkcocoaのOrigin設定

先ほど作成したindex.htmlにブラウザからHTTPアクセスしましょう。以下のような画面が表示されると思います。

このときのURLとドメインを確認しておきます。筆者の環境の場合はhttp://localhost/lab/milkcocoa-node/new/index.htmlに作成しています。

こちらのドキュメントにもあるようにMilkcocoaの管理画面の設定からブラウザ（許可Origin）にドメインが正しく設定されていることを確認しましょう。

今回の場合はドメインがlocalhostなので許可Originにlocalhostと記述しましょう（デフォルトで記述されているはずです⁠）⁠。example.comでMilkcocoaを使う場合はexample.comをここに記述します。

Auth0のCallback URLとOriginの設定

Auth0のアプリケーション管理画面に戻りAllowed Callback URLsに先ほどのURLを、Allowed Origins (CORS)に先ほどのURLのドメイン部分を指定して設定を保存しましょう。MilkcococoのOrigin設定同様に、今回はローカル開発なのでlocalhostを指定していますが、環境に合わせてここの設定を変更しましょう。

新規登録を試す

この状態でユーザー情報取得を押しても「ログインして下さい。」と表示されることを確認しましょう。これがログイン前の状態です。

新規登録ボタンを押すと、ユーザ登録フォームが表示されます。

メールアドレスとパスワードを入力して、SIGN UPを押すとユーザ登録が出来ます。その後ログインボタンを押すと先ほど登録したユーザー名（メールアドレス）のアカウントが表示されるので選択します。

ユーザー情報確認を押すと以下のように情報が確認できます。これでユーザログインの完成です。

Auth0の管理画面でユーザが追加されていることが確認できます。

Milkcocoaの機能をユーザ毎に権限を付与してみよう

ここまではAuth0の使い方の説明が主でしたが、ここからはAuth0経由で登録したアカウントをMilkcocoaの機能として利用します。

セキュリティルール

Milkcocoaの管理画面でセキュリティルールという項目があります。

セキュリティルールについてはこちらのドキュメントも参考にしましょう。

例えば、memoデータストアに対して、ユーザAは全ての操作を行えて、ユーザBはsendだけを行えるようにする場合、以下のように記述します。

memo {
  permit : send;
  rule : account.sub == "user_b_id";
}
memo {
  permit : all;
  rule : account.sub == "user_a_id";
}

ユーザIDの確認

Auth0のユーザ管理画面からユーザのNameを選択すると各ユーザの詳細ページを見ることができます。

詳細ページの下のほうにuser_idと言う項目があるので、その値を利用します。

ユーザ毎の権限をセキュリティルールで変更

先ほどのユーザIDを利用して、Milkcocoa管理画面のセキュリティルールに貼り付けます。

例えば、ユーザA（auth0|5544d266f34d12ee638ac599）は他のユーザのpushイベントの受け取りのみ、ユーザB（auth0|5544a2450bc285dd63aabeb5）は全ての操作を可能にする場合は以下のような書き方になります。

chat {
  permit : on(push);
  rule : account.sub == "auth0|5544d266f34d12ee638ac599";
}
chat {
  permit : all;
  rule : account.sub == "auth0|5544a2450bc285dd63aabeb5";
}

ログイン機能付きチャットサンプル

このセキュリティルールを利用したログイン機能付きチャットサンプルがMilkcocoa公式で用意されています。

セキュリティルールによって管理者のみ投稿可能になります。

まとめ

いかがでしたでしょうか。今回はMilkcocoaの認証機能について紹介しました。

Milkcocoaを使うことで、バックエンドのプログラムやデータベースと言ったものを意識せずとも、ユーザ認証や管理を簡単に行えることがわかったと思います。

新バージョンのMilkcocoaではJWTに対応して、Auth0やAuthrocketなどのサービスと組み合わせて認証機能を作る方式になりましたので、Auth0やAuthrocket側のサービスの使い方やAPIについても目を通したほうが良いでしょう。

皆さんも是非、認証機能を使ったアプリケーションを作ってみてください。