Web3.0なONT IDの簡単お試し用キットを作ってみる - Tech 4 Mine :-)　忘れぬ先のテックメモ

Overview

Ontologyというブロックチェーン企業が押し出しているWeb3.0基準のIdentityサービス、ONT IDでは、QRコードで複数のサービスの認証を紐づけたりユーザの証明が出来るようです。
ONT ID：https://ontid.ont.io/

そこで、ちょっとしたご縁もあったので認証のために使ってみたら、意外ととりあえず動かす（HelloWorld的な）のが大変だったので、Dockerを利用してぽんぽーんとお試し出来るようにしてみました。

この記事の内容はこちらｰ> https://github.com/Mine9999/ontlogin-sample-docker

実行環境

docker v20.10.11
docker-compose 1.25.0
ubuntu 20.04.3 LTS on wsl2（互換のLinuxコンソールならなんでも）
＋ネット環境
＋ONTOアプリ (https://onto.app/)
フロントはVue.js、バックエンドはGolangで構成されています。（今回はコード自体はいじりません）

実行方法

まずは実行方法から言っちゃいましょう、必要なものは↑に書いたものと、そのまま実行するのであればローカルホストの3000番と8080番ポートを利用します。

※ここからはLinuxコンソール（Docker,Docker-compose インストール済み想定）でお送りします。

最初にやることはリポジトリのクローンですね。

$ git clone https://github.com/Mine9999/ontlogin-sample-docker.git

クローンがおわったら、出来たディレクトリに移動します。

$ cd ontlogin_sample_docker

クローンしたフォルダの中に、biuld.shがあるのでそれを実行します。

$ ./build.sh

go: downloading github.com/go-chi/cors v1.2.0
go: downloading github.com/go-chi/chi/v5 v5.0.3
...
patch-package 6.4.7
Applying patches...
ontlogin@0.0.8 ✔
## ここまででバックエンドのGoのビルド完了
...
vite v2.5.0 building for production...
transforming...
✓ 15 modules transformed.
rendering chunks...
dist/index.html                  0.38 KiB
dist/assets/index.c2ecea99.js    1.71 KiB / brotli: 0.74 KiB
dist/assets/vendor.c94fb908.js   65.01 KiB / brotli: 22.47 KiB
## ここまででフロント側vue.jsのビルド完了

ビルドが完了すると、それぞれ実行ファイルが生成されるので、準備完了です。
コンテナを立ち上げてアクセス出来るようになります。

$ docker-compose up -d
Creating network "ontlogin-sample-docker_default" with the default driver
Creating ontlogin-sample-docker_backend_1 ... done
Creating ontlogin-sample-docker_web_1     ... done

それでは http://localhost:8080 にアクセスしてみましょう。

ボタンが表示されるのでSing in with ONT LOGINを押します。

そしてでてきたQRコードをONTOのアプリで読み込みます。

認証が成功すると読み取ったウォレットのアドレス（ONT ID）が表示されます。

利用シーンや注意点など

他にもメールアドレスや、色々と必要な認証情報がセット出来るようですが、デモではIDのみ取得するようにしています。
※ QRコードを読むときは、ONTOアプリをアイデンティティーモードにして置く必要があります。　アンドロイドの場合プロフィール　→　システム設定　→　アイデンティティーモードをON

実際には、フロント側のコードを既存のページに埋め込んだり、リダイレクト先を指定したりして使うことになりそうですね。
認証時にアプリ側に出てくる情報や、実際に認証しに行くチェーンは↓で設定されています。
https://github.com/Mine9999/ontlogin-sample-docker/blob/main/backend/service/service.go

また、結果を受けてONT IDを表示しているところは↓です、ここを書き換えて特定のページにリダイレクトしたり、取得した認証情報が登録済みかなどの検証を行うイメージでしょうか。 https://github.com/Mine9999/ontlogin-sample-docker/blob/3cdb44b651adebbadc4640b2c0650566bcf3f7fb/frontend/src/App.vue#L45

参考にさせて頂いた元コードなど

バックエンドの実装
https://github.com/ontology-tech/ontlogin-sample-go

フロントエンドの実装
https://github.com/ontology-tech/ontlogin-sdk-js/tree/main/example/vue-demo