WebAssemblyはコンパイルしたコードを実行するWeb技術です。コンパイルされていますので、中のコードを読むことはできません。この技術はJavaScriptと異なり、コードが見られませんので、キーの隠蔽に用いることができます。
以前、WebAssembly版は紹介したのですが、自分でビルドしようと思うと以下の手順が必要でした。
- Rustの開発環境構築
- JavaScript SDKの更新
- JavaScript SDKのビルド
- Rust用のコード追加
これはとても面倒です。そこで、これらの手順を簡素化する方法を考えましたので紹介します。
Rustの開発環境構築
これはDockerを使うことで解消します。pjama/rust-wasm-dockerを使うと簡単です。
git clone git@github.com:pjama/rust-wasm-docker.git cd rust-wasm-docker docker build -t ubuntu-wasm docker/
これで準備完了です。
WebAssemblyのコンパイル
これはNCMBMania/wasmを使います。
git clone git@github.com:NCMBMania/wasm.git cd wasm
そして src/lib.rs の YOUR_CLIENT_KEY と書かれている部分を自分のクライアントキーに書き換えます。
コンパイルはDockerに対してコマンドを実行するだけです。
docker run --rm -v $PWD/:/var/workspace ubuntu-wasm /bin/bash -c 'cargo +nightly build --target wasm32-unknown-unknown --release'
これで target/wasm32-unknown-unknown/release/ncmb.wasm にファイルができあがります。
JavaScript SDKの更新
これはWebAssembly版があれば、そちらを使うように変更します。ncmb_js/signature.js at master · NIFCloud-mbaas/ncmb_jsの var sig = crypto の上にコードを追加します。
// 追加 if (window.wasm_sign) return window.wasm_sign(sigStr); var sig = crypto
これでJavaScript SDKを再度ビルドすれば完了です。
npm run build
ここまでの手順を一まとめにしました。
Dockerイメージの準備だけできたら、後はコマンドだけで完了できるようにしました。 build.sh を実行すれば、WebAssemblyによるコンパイル、JavaScript SDKの更新は自動的に行います。
# Dockerの準備 git clone git@github.com:pjama/rust-wasm-docker.git cd rust-wasm-docker docker build -t ubuntu-wasm docker/ # その他一切の処理 git clone git@github.com:NCMBMania/wasm.git cd wasm sh build.sh
使い方
app.js の APPLICATION_KEY となっている部分を書き換えてください。その後、index.html を開くと、クラス名を入力するようになっています。クラス名を入力して取得を実行すると、そのデータをテキストエリアに出力します。クライアントキーは dummy となっており、使われていないのが分かるでしょう。WebAssembly版を使う上で必ず必要なのは以下の処理です。
window.onload = async () => { window.exports = {}; const mod = await fetchAndInstantiate('./ncmb.wasm') const exports = mod.exports; window.wasm_sign = s => { let outptr = exports.to_sign(newString(exports, s)); return copyCStr(exports, outptr); }; };
これさえ行ってしまえば、後は通常のJavaScript SDKと変わらない使い方になります。
まとめ
WebAssembly版が簡単に作れるようになりましたので、WebアプリケーションでmBaaSを使うのも問題ないでしょう。セキュリティ的にもクライアントキーが漏洩しないのが安心です。ぜひ積極的に使ってください。
