はじめに
2014年8月からベータ版として公開されていたMilkcococaがこの度2015年5月8日から正式バージョンアップしました。それに伴い前バージョンからの変更点がいくつかあるのですが、
今回のゴール
Milkcocoaの認証機能を使って、
ちなみに、
![図1 10 minutes Tutorial 図1 10 minutes Tutorial](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_001.jpg)
新しくなったMilkcocoaの認証機能でログインしてみよう
新バージョンMilkcocoaの機能詳細などについては次回説明したいと思います。新バージョンMilkcocoaのサイトはこちらです。トップページにドット絵でお絵描きが出来きますが、
![図2 同時に操作している人の操作がリアルタイムに共有される(サムネイルでは表示が崩れます。ご了承ください。) 図2 同時に操作している人の操作がリアルタイムに共有される(サムネイルでは表示が崩れます。ご了承ください。)](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_002.gif)
JSON Web Token(JWT)対応したMilkcocoa
今後MilkcocoaではAuth0やAuthrocketと言ったJWT対応の認証サービスを使った認証機能を提供します。
ベータ版を利用していた方もいると思いますが、
認証機能のチュートリアルもあるので確認しましょう。
Milkcocoaのシークレットキーの確認
まだMilkcocoaのアカウントを作成していない人は、
とは言え、
![図3 アプリ作成画面からボタンを押すだけ(サムネイルでは表示が崩れます。ご了承ください。) 図3 アプリ作成画面からボタンを押すだけ(サムネイルでは表示が崩れます。ご了承ください。)](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH400_003.gif)
アプリを作成すると以下のような管理画面になります。
![図4 管理画面 図4 管理画面](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_004.jpg)
xxxxxxxx.
などというドメインが設定されます。このxxxxxxxx
の部分はアプリケーション毎に異なります。このMilkcocoaのアプリドメインは後で使います。
以下のアプリ管理画面の認証タブからAuth0用のシークレットキー
を確認しましょう。後ほど利用します。
![図5 Auth0用のシークレットキーを確認 図5 Auth0用のシークレットキーを確認](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_005.jpg)
Auth0のクライアントID
とドメイン
を取得する
Auth0は認証周りの機能に特化したJWT対応のBaaSです。今回はAuth0のJWTを使った認証機能の紹介をします。
アカウント登録
トップページからCREATE FREE ACCOUNTを押してアカウントを作成しましょう。
![図6 トップページからCREATE FREE ACCOUNTを押してアカウントを作成 図6 トップページからCREATE FREE ACCOUNTを押してアカウントを作成](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_006.jpg)
メールアドレスによる登録の他にGithub、
![図7 メールアドレスの他に各種アカウントでも登録が可能 図7 メールアドレスの他に各種アカウントでも登録が可能](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_007.jpg)
アカウント作成ができると、n0bisuke.
が私のauth0ドメインになります。これは後ほど利用します。
![図8 Regionとdomainの設定画面 図8 Regionとdomainの設定画面](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_008.jpg)
DATABASE項目の
![図9 DATABASE項目の「Username-Password-Authentication」のみチェックをしてSAVE 図9 DATABASE項目の「Username-Password-Authentication」のみチェックをしてSAVE](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_009.jpg)
アカウントが作成が完了するとダッシュボードが確認できます。
![図10 ダッシュボードを確認できる 図10 ダッシュボードを確認できる](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_010.jpg)
アプリ作成
ダッシュボードのNEW APP/
![図11 アプリケーション名を入力してアプリ作成 図11 アプリケーション名を入力してアプリ作成](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_011.jpg)
アプリが作成されるとApps / APIs > Settingsに情報が表示されます。
![図12 アプリが作成されると情報が表示される 図12 アプリが作成されると情報が表示される](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_012.jpg)
ここの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.
![図13 このような画面が表示される 図13 このような画面が表示される](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_013.jpg)
このときのURLとドメインを確認しておきます。筆者の環境の場合はhttp://
に作成しています。
こちらのドキュメントにもあるようにMilkcocoaの管理画面の設定からブラウザ
今回の場合はドメインがlocalhost
なので許可Originにlocalhost
と記述しましょうexample.
でMilkcocoaを使う場合はexample.
をここに記述します。
![図14 ブラウザ(許可Origin)の設定 図14 ブラウザ(許可Origin)の設定](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_014.jpg)
Auth0のCallback URLとOriginの設定
Auth0のアプリケーション管理画面に戻りAllowed Callback URLsに先ほどのURLを、localhost
を指定していますが、
![図15 Allowed Callback URLsとAllowed Origins (CORS)を指定して設定を保存 図15 Allowed Callback URLsとAllowed Origins (CORS)を指定して設定を保存](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_015.jpg)
新規登録を試す
この状態でユーザー情報取得を押しても
![図16 ログイン前の状態 図16 ログイン前の状態](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH400_016.jpg)
新規登録ボタンを押すと、
![図17 ユーザ登録フォームが表示される 図17 ユーザ登録フォームが表示される](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH400_017.jpg)
メールアドレスとパスワードを入力して、
![図18 アカウントが表示されるので選択する 図18 アカウントが表示されるので選択する](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH400_018.jpg)
ユーザー情報確認を押すと以下のように情報が確認できます。これでユーザログインの完成です。
![図19 ユーザログインの完成 図19 ユーザログインの完成](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_019.jpg)
Auth0の管理画面でユーザが追加されていることが確認できます。
![図20 Auth0の管理画面でユーザが追加されていることが確認できる 図20 Auth0の管理画面でユーザが追加されていることが確認できる](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_020.jpg)
Milkcocoaの機能をユーザ毎に権限を付与してみよう
ここまではAuth0の使い方の説明が主でしたが、
セキュリティルール
Milkcocoaの管理画面でセキュリティルールという項目があります。
![図21 セキュリティルール 図21 セキュリティルール](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_021.jpg)
セキュリティルールについてはこちらのドキュメントも参考にしましょう。
例えば、
memo {
permit : send;
rule : account.sub == "user_b_id";
}
memo {
permit : all;
rule : account.sub == "user_a_id";
}
ユーザIDの確認
Auth0のユーザ管理画面からユーザのNameを選択すると各ユーザの詳細ページを見ることができます。
![図22 各ユーザの詳細ページを見ることができる 図22 各ユーザの詳細ページを見ることができる](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_022.jpg)
詳細ページの下のほうにuser_
![図23 詳細ページの下のほうにuser_idと言う項目があるのでこの値を利用 図23 詳細ページの下のほうにuser_idと言う項目があるのでこの値を利用](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_023.jpg)
ユーザ毎の権限をセキュリティルールで変更
先ほどのユーザIDを利用して、
例えば、
chat {
permit : on(push);
rule : account.sub == "auth0|5544d266f34d12ee638ac599";
}
chat {
permit : all;
rule : account.sub == "auth0|5544a2450bc285dd63aabeb5";
}
ログイン機能付きチャットサンプル
このセキュリティルールを利用したログイン機能付きチャットサンプルがMilkcocoa公式で用意されています。
セキュリティルールによって管理者のみ投稿可能になります。
![図24 セキュリティルールによって管理者のみ投稿可能 図24 セキュリティルールによって管理者のみ投稿可能](/assets/images/dev/feature/01/milkcocoa-baas/0010/thumb/TH800_024.jpg)
まとめ
いかがでしたでしょうか。今回はMilkcocoaの認証機能について紹介しました。
Milkcocoaを使うことで、
新バージョンのMilkcocoaではJWTに対応して、
皆さんも是非、