ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

MonacaアプリでWebAssembly版NCMBを使うには

f:id:mbaasdevrel:20181009171043p:plain

Monacaはハイブリッドアプリ開発PFであり、開発はHTML/JavaScript/CSSで行います。そのため、アプリはストアでリリースされたものであってもソースが閲覧できる状態になっています。防ぐためにはエンタープライズプランで提供されるアプリのロジック暗号化プラグインやtkyaji/cordova-plugin-crypt-fileを導入する必要があります(独自プラグインの導入はプロプラン以上でなければいけません)。

万一コードを見られても安全でいられるために、WebAssembly版のJavaScript SDKを使いましょう。この方法であればフリープランでも使えますし、クライアントキーが漏洩する訳ではありません。

WebAssembly版JavaScript SDKを作る

WebAssemblyはRustで書かれたコードをコンパイルしなければなりません。そのためRustの開発環境またはDockerを使います。今回はより手軽なDocker版を紹介します。

Dockerの準備

Dockerはすでにインストールされていることとします。そして下記コマンドでビルド環境ができあがります。

git clone git@github.com:pjama/rust-wasm-docker.git
cd rust-wasm-docker
docker build -t ubuntu-wasm docker/

WebAssembly版の準備

次に別なディレクトリでWebAssembly版の準備をします。

git clone git@github.com:NCMBMania/wasm.git
cd wasm

そして src/lib.rsYOUR_CLIENT_KEY と書かれている部分を自分のクライアントキーに書き換えます。書き換えたらビルドを実行します。

sh build.sh

終わると ncmb.wasm というファイルができあがっています。他に必要なファイルとしては下記があります。

  • ncmb.min.js(WebAssembly版を使うように修正されたもの)
  • builder.js(WebAssemblyを使いやすくするライブラリ)

Monacaで利用する

では修正したJavaScript SDKとWebAssemblyをMonacaアプリにアップロードします。今回は以下のようにアップロードします。

  • ncmb.min.js -> www/vendors/ncmb/
  • ncmb.wasm -> www/vendors/ncmb/
  • builder.js -> www/vendors/wasm/

f:id:mbaasdevrel:20181009171043p:plain

そしてHTMLファイルで読み込みます。

<script src="www/vendors/wasm/builder.js"></script>
<script src="www/vendors/ncmb/ncmb.min.js"></script>

プログラミングを書くJavaScriptファイル(app.jsなど)では以下のように実行します。ncmb.wasmのパスは環境に応じて書き換えてください。また、YOUR_APPLICATION_KEYはあなたのアプリケーションキーと書き換えてください。

let ncmb;
window.onload = async () => {
  window.exports = {};
  const mod = await fetchAndInstantiate('./vendors/ncmb.wasm')
  const exports = mod.exports;
  window.wasm_sign = s => {
    let outptr = exports.to_sign(newString(exports, s));
    return copyCStr(exports, outptr);
  };
  const applicationKey = 'YOUR_APPLICATION_KEY';
  ncmb = new NCMB(applicationKey, 'dummy');
};

wasm_sign という関数があるかどうかでWebAssembly版を使うかどうかが判別されます。JavaScript SDKの初期化のタイミングは特に関係ないのですが、wasm_signを定義してから実行すれば、常にwasm_signを使って署名処理を行うようになります。

注意点

WebAssembly版ではクライアントキーの隠蔽化が行われるので、クライアントキーは漏洩しなくなります。ただしJavaScript自体のコードは隠蔽化されないのでロジックは見えてしまうでしょう。データの安全性のためにはログインユーザごとの権限設定や、クラスごとの権限設定を正しく行うようにしましょう。

まとめ

WebAssembly版はごく簡単に導入ができます。クライアントキーを隠蔽化するためにぜひ利用してください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。