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

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

WebAssembly版署名処理をJavaScript SDKで利用する

f:id:mbaasdevrel:20180319115225p:plain

ようやくできあがったWebAssemblyによるNCMBの署名処理をJavaScript SDKに組み込んでみたいと思います。なるべく現状のJavaScript SDKを変えない方法を紹介します。

使い方

コードはNCMBMania/ncmb_js_wasm: JavaScriptの署名処理をWebAssemblyに置き換えたSDKです。にアップロードしてあります。

https://github.com/NCMBMania/ncmb_js_wasm/raw/master/ncmb.min.js

変更した点としては、to_signという関数があれば、それを使って署名処理を行うようになっています。

WebAssemblyのコンパイル

NCMBMania/wasmをダウンロードします。Rust/Cargoの環境は整っていることとします。 src/lib.rs を開いて、クライアントキーを編集します。

let key = "YOUR_CLIENT_KEY";

保存したらコンパイルします。

$ make all

ncmb.wasm というファイルができあがります。これがWebAssembly版の署名処理になります。

HTML

まずHTMLでは ncmb.min.js と bundle.js を読み込みます。bundle.jsはRustから提供されているWebAssemblyが使いやすくなるライブラリです。

HTMLと同じ階層に先ほど作った ncmb.wasm を配置してください。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <!--[if lt IE 9]>
    <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="" />

  </head>
  <body>
    <button onclick="save()">データ保存</button>
    <!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
    <script src="ncmb.min.js"></script>
    <script src="bundle.js"></script>
    <script src="app.js"></script>
  </body>
</html>

NCMBの初期化

今回はアプリケーション用として app.js を作成します。初期化は通常通りです。クライアントキーはダミーのものを与えます。

const applicationKey = 'd288714a5a801f4ccaaac99c87df41d35e38b5804a9ecbcd2026c1901e914fc0';
const dummyKey = 'aaa';
const ncmb = new NCMB(applicationKey, dummyKey);

WebAssemblyの読み込み

app.jsの中で WebAssemblyのファイルを読み込みます。そしてその結果を window.to_sign としてグローバスな関数として定義します。これで署名処理に WebAssemblyを採用するようになります。

window.onload = function() {
  fetchAndInstantiate('ncmb.wasm')
  .then(mod => {
    exports = mod.exports;
    window.to_sign = s => {
      let outptr = exports.to_sign(newString(exports, s));
      return copyCStr(exports, outptr);
    };
  });
};

実行

後は普段使っているJavaScript SDKと同じように使えます。

const save = () => {
  const WebAssemblyData = ncmb.DataStore('WebAssemblyData');
  const item = new WebAssemblyData();
  item
    .set('msg', 'Hello NCMB')
    .save()
    .then((item) => {
      console.log(item);
    })
    .catch((err) => {
      console.error(err);
    })
}

まとめ

WebAssembly を使えば簡単にクライアントキーや署名処理を隠蔽化できます。ACLさえ正しく設定すれば、Webアプリケーションを作るのにも使えるでしょう。 wasmファイルを作るところが面倒ですが、これによってmBaaSの可能性が飛躍的に高まるでしょう。

NCMBMania/wasm

中津川 篤司

中津川 篤司

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