アルゴリズムとかオーダーとか

仕事で勉強したことなどをまとめてます

uPortでmyAppを作ってみた

uPort Ethereum

Hi-Etherで少し話題に出ていたuPortを実際に触ってみました。
uPort Developer Portal

uPortの説明についての説明はこちらのブログが綺麗にまとまってますのでご参照ください。
zoom-blc.com

今回はuPort AppManagerを使ってUport Appを自作する手順についてまとめました。


作業手順としては下記の公式ドキュメントを見ながら進めました。
http://developer.uport.me/guides.html

1. uPort Mobile Appのインストール

まずはお手持ちのスマホ(Android / iOS)にuPortアプリをインストールします。uPortではEOAではなくユーザにIDを割り当てる方針のため、何らかのdeviceを通じてIdentityを取得する方針のようです。uPort IDを生成するためにはSMSを受け取れる電話番号が必要となります。

これはまぁ電話回線の契約を確認することで”人”を区別するみたなイメージでしょうか？ちなみに１つの電話番号で複数のIDを取得できます。なのでアカウント制限に使ってるわけではなさそうです。

個人情報の登録

モバイルアプリのTop画面から My Information -> 右上にあるEIDT　を押下で個人情報を追加登録できます。

この処理は必須ではありません。
編集画面ではemailやavater等の情報も登録できます。が、Android版のアプリだとここの入力フィールドが壊れてるようで、入力中の文字が表示されません（汗　登録自体はできるんですけどね。

2. IPFSへの登録の確認

uPort Identityを作成するとIPFSにユーザ情報がアップロードされるようです。
medium.com

IPFSへの登録が完了したかどうかは、モバイルアプリの右上のボタンからメニュを開いて、 Advanced -> uPort IDを開くと確認できます。

IPFS Profile に何らかの文字列が記録されていればIPFSへの記録が完了しています。

ちなみに、IPFSへ記録されていないとアプリ連携やRequest Credentials（ログイン的な機能）が使えません。連携するアプリが開示された情報を検証するためにIPFS上に記録された公開鍵を使っているためだと思われます。（この辺の仕組みはまだ詳しく調べ切れてないので間違っているかも）
IPFSへの記録は多分１日ぐらい待つと完了するかも？ちょっとよくわからないです。バックボーン側に問題があって今調査中的なIssueもありました。
github.com
僕は翌日にはIPFSへ記録されていました。

3. uPort AppManagerでアプリを作成する

uPortと連携するアプリを作成するためにはuPort AppManagerに必要事項を入力して、sign keyを生成してもらう必要があります。
つまり、sign keyの生成＝アプリの登録＆作成 です。
で、uPort AppManagerを使うためにはuPort Identityが必要となります。

AppManagerにログインする

uPort IDは取得済みですので、早速uPort AppManagerにログインします。以下のURLへアクセスしてください。この作業はPCで行ってもいいです。（分散環境！）以降はPC上でuPort AppManagerを開いている前提で書いています。
Uport App Manager


こんな画面が表示されます。

上の青いボタンを押下すると下記のようにQRコードが表示されますので、これをスマホのuPort Mobile Appでスキャンして認証します。

# スマホで開いてる場合はボタン押下でuPort Mobile Appが起動し、認証許可を求められると思います。

スマホアプリからQRコードをスキャンするにはTop画面の左上にあるQRコード画像のボタンを押下しカメラを起動させます。

QRコードをスキャンすると下記のようにuPort AppManagerが情報開示を要求してますよーっていう画面が出るので、右のContinueボタンを押下します。

ここで、いくら待ってもContinueボタンが有効化されない場合は、まだIPFSへの記録が完了していないためです。おとなしく待ちましょう。

AppManagerでアプリ情報を登録する

QRコードで認証し、AppManagerへの情報開示をacceptすると、PC側の画面がAppManagerのTop画面へ 自動的に切り替わります。

AppManagerにアプリの情報を入力してsign keyを発行する

App NameとDescriptionを記入して作成します。作成時に何度かuPort Mobile Appでの認証が求められます。Transactionへのsignの確認とかなので、多分、uPort-registerへの登録とかそういう処理が行われているっぽいです。

作成が完了すると下記のような画面が表示されます。

Click Here for your App Codeを押下してアプリのためのjavascriptコードを表示させ、コピー&ペーストしてこのコードを保存しておいてください。このコードが今AppManagerに登録し作成したアプリの基本的なコードとなります。

以上でuPort Appの作成と登録は完了です。次はここで発行されたコードを使ってuPortと連携する自作のアプリを作成していきます。

4. 自作アプリを作成する

uPort AppManagerで新しくアプリを登録したときに表示されたサンプルコードを元に実際にアプリを作っていきます。
uPortと連携をするためのライブラリであるuport-connectはnode moduleとして公開されているので、今回はJavascriptを使ってアプリを作成します。

今回作るアプリのイメージは

  1. アプリからuPortのアカウント情報の開示をリクエスト
  2. ユーザはモバイルアプリでQRコードを読み取って情報開示リクエストをacceptする
  3. アプリ側の画面でuPortのアカウント情報を表示

というものを作ります。ちなみにこの流れは他のwebアプリでいうところのログイン処理的なものに相当します。常に必要な処理であり、基本中の基本みたいなものです。

nodeのプロジェクトを作成

javascriptなアプリなのでまずはnodeプロジェクトを作成します。nodeの環境はあらかじめ用意しておいてください。

mkdir uport-sample
cd uport-sample
npm init

として、uport-sampleディレクトリ以下にnodeプロジェクトを作成します。プロジェクトの設定はデフォルトのままでOKです。

http-serverをインストール

とりあえず何かしらのhttpサーバを起動してアクセスしたいので、一番シンプルなhttp-serverモジュールを使います。
# 後で確認してみたら別にwebサーバ経由でアクセスする必要はなかったぽい。

npm i http-server

でインストールします。
起動は

node_module/.bin/http-server -p 3000

で3000版ポートで起動します。

画面とapp用のjsファイルを作成

uPort App Managerが提示したコードはimport式を使っていてこのままだと動かないので、import部分を編集します。
また、今回はuPortのアカウント情報開示要求だけしかしないので、attentCredentials部分はコメントアウトします。
で、いろいろいじって以下のようなindex.htmlとsample.jsを作成しました。
gist.github.com

uportと連携するためにはuport-connectモジュールが必要なのでindex.htmlでロードしています。
以上でアプリは完成です。実際に動かしてアカウント情報が取得できるか試してみてください。
3000版ポートでhttp-serverを起動して、以下のURLにアクセスすると表示されると思います。
http://127.0.0.1:3000/

まとめ

実際にアプリを作成する前は、QRコードの表示とユーザがacceptした後の画面の切り替え部分を作らないといけないからめんどくさそうだなぁと思っていたのですが、uport-connectモジュールがそれらの画面は全部自動で生成してくれるので全くめんどくさくありませんでした！！すごい！

サンプルアプリの作成を通じて改めて理解したのですが、uPortと連携する場合必ずユーザの承認が必要になります。これはまさに自己主権型のIDサービスだなと感じました。
また、サービスプロバイダ側から見ても、ユーザがアカウント情報を登録するのではなくあくまでuPortを介して取得しているので、ユーザー自身が自分の情報を状況に合わせて偽ることが非常に難しくなっているというのも大きな利点だと感じました。

今回はログインに相当するアカウント情報の開示処理部分の機能だけ物アプリの作り方について取り急ぎまとめました。引き続き、attentCredentialや自作のスマコンとの連携方法などを調査してまとめていこうと思います。

参考