MilkcocoaでBaaSを体験!~バックエンドの仕組みと使い方~

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

はじめに

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

今回のゴール

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

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

図1 10 minutes Tutorial
図1 10 minutes Tutorial

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

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

図2 同時に操作している人の操作がリアルタイムに共有される(サムネイルでは表示が崩れます。ご了承ください。)
図2 同時に操作している人の操作がリアルタイムに共有される(サムネイルでは表示が崩れます。ご了承ください。)

JSON Web Token(JWT)対応したMilkcocoa

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

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

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

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

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

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

図3 アプリ作成画面からボタンを押すだけ(サムネイルでは表示が崩れます。ご了承ください。)
図3 アプリ作成画面からボタンを押すだけ(サムネイルでは表示が崩れます。ご了承ください。)

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

図4 管理画面
図4 管理画面

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

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

図5 Auth0用のシークレットキーを確認
図5 Auth0用のシークレットキーを確認

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

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

アカウント登録

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

図6 トップページからCREATE FREE ACCOUNTを押してアカウントを作成
図6 トップページからCREATE FREE ACCOUNTを押してアカウントを作成

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

図7 メールアドレスの他に各種アカウントでも登録が可能
図7 メールアドレスの他に各種アカウントでも登録が可能

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

図8 Regionとdomainの設定画面
図8 Regionとdomainの設定画面

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

図9 DATABASE項目の「Username-Password-Authentication」のみチェックをしてSAVE
図9 DATABASE項目の「Username-Password-Authentication」のみチェックをしてSAVE

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

図10 ダッシュボードを確認できる
図10 ダッシュボードを確認できる

アプリ作成

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

図11 アプリケーション名を入力してアプリ作成
図11 アプリケーション名を入力してアプリ作成

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

図12 アプリが作成されると情報が表示される
図12 アプリが作成されると情報が表示される

ここの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アクセスしましょう。以下のような画面が表示されると思います。

図13 このような画面が表示される
図13 このような画面が表示される

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

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

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

図14 ブラウザ(許可Origin)の設定
図14 ブラウザ(許可Origin)の設定

Auth0のCallback URLとOriginの設定

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

図15 Allowed Callback URLsとAllowed Origins (CORS)を指定して設定を保存
図15 Allowed Callback URLsとAllowed Origins (CORS)を指定して設定を保存

新規登録を試す

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

図16 ログイン前の状態
図16 ログイン前の状態

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

図17 ユーザ登録フォームが表示される
図17 ユーザ登録フォームが表示される

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

図18 アカウントが表示されるので選択する
図18 アカウントが表示されるので選択する

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

図19 ユーザログインの完成
図19 ユーザログインの完成

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

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

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

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

セキュリティルール

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

図21 セキュリティルール
図21 セキュリティルール

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

例えば、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を選択すると各ユーザの詳細ページを見ることができます。

図22 各ユーザの詳細ページを見ることができる
図22 各ユーザの詳細ページを見ることができる

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

図23 詳細ページの下のほうにuser_idと言う項目があるのでこの値を利用
図23 詳細ページの下のほうに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公式で用意されています。

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

図24 セキュリティルールによって管理者のみ投稿可能
図24 セキュリティルールによって管理者のみ投稿可能

まとめ

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

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

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

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

おすすめ記事

記事・ニュース一覧