Neutrinoで働くブロックチェーンエンジニアのブログ

渋谷の専門特化コワークNeutrinoに入居してブロックチェーンエンジニアとして働いています。元丸の内。(Neutrino運営企業とは直接関係ありません)

Ethereum上のKYCツール「uPort」を使って分散型ログイン機能を実装する

Blockchain EXE様とConsenSys様が共催のuPortを使うハッカソンにでるという事で、EthereumのKYCツールであるuPortを利用してみます。 uPortの仕組みはこちらのブログが詳しいです。

zoom-blc.com

ざっくりいうと、ETHアドレスに名前や電話番号などの付帯情報をつける事で、ログイン処理の一元化、分散管理化を行います。1つの企業が個人情報のほとんどを持つのではなく、暗号化して分散化されたある種のワールドデータベースに保存し、個人で管理するという事だと理解しています。

きっちりとしたKYCというよりは、ETHアドレスに個人の属性を追加する事でログイン管理、ユーザー利用体験の向上に紐づけるという様に感じました。現状ETHアドレス同士の通貨交換では16進数の数字しか表示されないところを、uPortを用いて相手の名前やメールアドレスなども確認する事で、誤送信の防止などにも繋げられるかもしれません。

基本的には、こちらのチュートリアルに沿って実施していきます。

developer.uport.me

この記事の環境では、

を利用しています。

uPort周りの環境構築

uPort周りの環境構築をする必要があります。チュートリアルを実施するにあたって、nakajoさんのブログで素晴らしいトライアルが実施されていて、参考にさせていただきました。 こちらによくまとまっているので、こちらを参考ください。

y-nakajo.hatenablog.com

以下の順序で実施します。

  1. uPort Mobile Appのインストール
  2. IPFSへの登録の確認
  3. uPort AppManagerでアプリを作成する
  4. 自作アプリを作成する

の順番で実施します。2,3については登録までに相当時間がかかるので気をつけてください。

react-uportのインストール

こちらに沿って、uportのtruffle boxをインストールします。 truffleのboxをダウンロードして、解凍する事で簡単に体験できます。

truffleframework.com

Setup React Truffle Box

# gオプションでtruffleをインストールします。
npm install -g truffle

# Download the box. This also takes care of installing the necessary dependencies.
truffle unbox react-uport

react-uportをdownloadできます。

box-img-lg.png       migrations      public          truffle-config.js
box-img-sm.png      node_modules        scripts         truffle.js
config          package-lock.json   src
contracts       package.json        test

truffleの開発コンソールを実行します。

# Run the development console.
 truffle develop

コンソールを打つと、下層のEthereumネットワーク上でアカウントと秘密鍵が出てきます。

Truffle Develop started at http://127.0.0.1:9545/

Accounts:
(0) 0x627306090abab3a6e1400e9345bc60c78a8bef57
(1) 0xf17f52151ebef6c7334fad080c5704d77216b732
(2) 0xc5fdf4076b8f3a5357c5e395ab970b5b54098fef
(3) 0x821aea9a577a9b44299b9c15c88cf3087f3b5544
(4) 0x0d1d4e623d10f9fba5db95830f7d3839406c6af2
(5) 0x2932b7a2355d6fecc4b5c0b6bd44cc31df247a2e
(6) 0x2191ef87e392377ec08e7c08eb105ef5448eced5
(7) 0x0f4f2ac550a1b4e2280d04c21cea7ebd822934b5
(8) 0x6330a553fc93768f612722bb8c2ec78ac90b3bbc
(9) 0x5aeda56215b167893e80b4fe645ba6d5bab767de

Private Keys:
(略)
Mnemonic:
Mnemonic: candy maple cake sugar pudding cream honey rich smooth crumble sweet treat

開発コンソール内でコンパイルします。開発コンソール内では「truffle」コマンドを前につける必要がありません。

compile

migrateコマンドを打つと、contractが仮想チェーン上にデプロイされます。

migrate 
#Running migration: 1_initial_migration.js
#Running migration: 2_deploy_contracts.js

testコマンドで実施ができます。

test
Using network 'test'.

Compiling ./contracts/SimpleStorage.sol...
Compiling ./test/TestSimpleStorage.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...


  TestSimpleStorage
    ✓ testItStoresAValue (81ms)

  Contract: SimpleStorage
    ✓ ...should store the value 89. (44ms)


  2 passing (809ms)

Truffleの開発画面から抜けて、ローカルでサーバー、アプリを起動します。

npm run start

uPortの接続設定をする

connectors.jsの設定をします。connectors.jsで、uPortのオブジェクトを作成します。 こちらでclientID,signing keyをappManagerで登録した内容から記載します。

import { Connect, SimpleSigner } from 'uport-connect'

export const uport = new Connect('Nao\'s new app', {
  clientId: "your client ID", #自分のclientIDを設定する
  network: 'rinkeby', #現在uPortはrinkebyがデフォルトの模様
  signer: SimpleSigner("your signing key") # 自分のsign key
})

動きとしては、LoginButtonAction.jsでconnectors.jsのuportオブジェクトを呼び出してログイン処理を実施します。

ログインしてみる

3000番ポートでhttpログインをしてみます。

http://127.0.0.1:3000/

f:id:naomasabit:20180715204846p:plain

右上のログインボタン(Login With uPort)を押すと、ログイン処理が発生して、QRコードが出てきますので、自分のスマホのuPortアプリで、QR読み取りを行います。

アプリ設定していない方は「uPort周りの環境構築」に戻って設定してみてください。

f:id:naomasabit:20180715204908p:plain

QRコードの読み取りで、「Confirm」を押せばDashBoardに入れます!

f:id:naomasabit:20180715204917p:plain

uPortでは、

  • uPortで登録した情報(名前、国籍、電話番号その他)を利用する事
  • アンケート回答に利用するモジュールの作成

なども実施できます。 こちらはハッカソンが終わった後にまた書いていこうと思います。

参考

developer.uport.me

medium.com