既存のWebアプリケーションのバックエンドをmBaaSに置き換えてみる連載になります。一つずつ順番に紹介していきますので、同じようなシステムのリプレイスで参考にしてもらえるはずです。
前回はタスクのインポート、エクスポートに対応しましたので、今回は新しい機能として認証を追加したいと思います。認証を追加することで不特定多数の人たちに操作させるのではなく、認証したチームメンバーだけ使えるようになります。
立ち上げ時にセッションを確認する
まず表示した際にログインできているかどうかを確認します。この結果はグローバルな user という変数に入れておきます。ログインしているかどうかは ncmb.User.getCurrentUser() で確認できますが、セッションが切れている可能性がありますのでテストで書き込みを行って成功するか否かを判定基準に加えます。
var user = ncmb.User.getCurrentUser(); if (user) { user .set('sessionTest', new Date()) .set('authData', {}) .update() .then(() => { loginMenu(); }) .catch((err) => { user = null; loginMenu(); }); }
loginMenuはログイン、ログアウト項目の表示制御を行います。
function loginMenu() { if (user) { $('#login').hide(); $('#logout').show(); } else { $('#login').show(); $('#logout').hide(); } }
ログイン処理
ログイン処理はまず、メニューからログインを選んだ時点でモーダルを表示します。
function onShowLoginModal() { showModal("modalLogin"); }
このモーダルの内容はHTMLに定義しておきます。
<div id="modalLogin" class="modal"> <div style="padding: 24px; background: white"> <h2>Login or Sign up</h2> <label id="labelWorkspaceName">User name:</label> <input type="text" name="username" id="inputUsername" style="width: 100%"/> <br/> <br/> <label id="labelImportJson">Password:</label> <input type="password" name="password" id="inputPassword" style="width: 100%"/> <br/> <div style="text-align: right; margin-top: 12px"> <button id="btnLoginCancel" type="button" class="btn btn-default" aria-label="Cancel"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Cancel </button> <button id="btnLogin" type="button" class="btn btn-default" aria-label="Ok"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Login or Sign up </button> </div> </div> </div>
ログインは新規登録も兼ねて処理されます。まずログイン処理を行い、失敗した場合はユーザが存在しなかったと判断して同じID、パスワードで新規登録します。そしてその直後にログイン処理を行います。
function onLogin() { var username = $('#inputUsername').val(); var password = $('#inputPassword').val(); ncmb.User .login(username, password) .then((result) => { user = result; loginMenu(); }) .catch(() => { User = new ncmb.User(); return User .set("userName", username) .set("password", password) .signUpByAccount() }) .then((user) => role.addUser(user).update()) .then(() => ncmb.User.login(username, password)) .then(result => { user = result; loginMenu(); }) .catch(err => console.log(err)); hideModals(); }
新規登録時には Member というロールにユーザを追加します。このロールはあらかじめ管理画面で作成しておいた後、Webブラウザで表示した時点で読み込んでおきます。
var role; ncmb.Role .equalTo("roleName","Member") .fetch() .then(result => { role = result; })
データ登録時の変更
後は必要に応じて user という変数の有無によって処理を変更します。タスクの追加はログイン必須とする場合は次のように処理を追加します。
if (!user) { alert('You need to login before add task.'); return false; }
また、未ログイン時には表示だけはできるようにパーミッションを付与しつつ、更新や削除はログインユーザ（Memberグループに所属しているユーザ）のみできるようにACLを設定します。
var t = new Task; t.set('acl', acl);
このACLはワークスペース、タスクで共通になりますので、あらかじめグローバルに定義しておきます。
var acl = new ncmb.Acl(); acl .setPublicReadAccess(true) .setRoleWriteAccess("Member", true);
まとめ
認証機能と、それに伴うデータのアクセス制御はこれだけの修正で完了します。アプリケーションキー、クライアントキーが見えてしまいますのでインターネット上に公開するのには不向きですが、社内のチーム内で利用するには十分でしょう。特に一つのHTTPサーバにアクセスする必要もなく、全員の開発用HTTPサーバでも使えて、データが共有できるというのは便利です。
