このサービス開発者のらいうです。
みなさんもモナレッジのように、mpurseを使ったサービス作ってみませんか？
mpurse使うためのノウハウ系は意外と無いのでここでまとめておきます。
今回は環境構築までを紹介！
前提
とりあえず、フロントエンドからいきます
今回の想定はVueですが、原理的にはreactとかでも似た感じになるはず
mpurseがインストールされているブラウザだと、jsコンテキストにmpurseインスタンスがインジェクトされます。
なので、jsとかからフロントで
window.mpurse
が使えるというわけですね～
ただ、条件があってhttps通信環境下でしかこれは動かないのでシンプルにvueとかでlocalhost立てただけだとlocalhost:8080などhttp通信環境になるので動かないのです。
目的
上にあげたような原因のために開発環境をhttps化する必要があります。その手法をまとめます
方法1 : vueのデフォの機能を使う
フロントのサーバ起動時にvueであれば
yarn serveとかを使うと思うのですがこのときに
yarn serve --https trueとしてあげることでお手軽にlocalhostをhttps化できます。
ブラウザでアクセスしたら警告が出ると思いますが、まぁ自分の環境なのでよしなにｗ
この状態でF12とかで開発者コンソールから
await window.mpurse.getAddress()
とかを入力すると動かせるはずです。
もちろんこの状態でVue側から実行することも可能です
使える関数などはgithubを参考に
https://github.com/tadajam/mpurse
手法2 : オレオレ証明書
結構やっている人が多いのでリンクの紹介にとどめます
https://qiita.com/suin/items/37313aee4543c5d01285
証明書をブラウザにimportする方法なら、OS依存が無いので共通で使えるノウハウかも
firefox: https://jp.globalsign.com/support/faq/559.html
chrome : https://jp.globalsign.com/support/faq/558.html
この状態になったら、このプロジェクトのルードディレクトリ(package.jsonとかがあるところ)にvue.config.jsを作成します。nuxtならnuxt.config.jsを編集します
const fs = require('fs');
module.exports = {
devServer: {
https: {
key: fs.readFileSync('[さっきの作業したパス]/localhost.key'),
cert: fs.readFileSync('[さっきの作業したパス]/localhost.crt'),
ca: fs.readFileSync('[さっきの作業したパス]/myCA.pem'),
}
}
}
ちなみにconfigはいろいろ設定できるので気になる人はここを参考にするといいかも
https://webpack.js.org/configuration/dev-server/#devserver-https
方法3:クラウドを使う
crypto junkeyさんが教えてくれた方法です！
https://qiita.com/cryptcoin-junkey/items/21e69e0eb9f5c5c5a5ee
よいmpurseライフを！
次回あたりから、実際にVueで動くものを作る記事とか書こうかなぁ
