Waves Signer の概要

“Getting Started with Waves Signer” の日本語訳です。Waves Signerを使用することにより、ブラウザのエクステンションをインストールする必要がなくなり、dAppを使用するための障壁が低くなり利用者が増加することが期待されています。また、様々なサービスがユーザ認証等でSignerを使用することにより、ユーザーは一つの署名プロバイダーのみで利用することが可能になります。これまでのWebサービスの様に、一つのサービスにつき一つのアカウント＆パスワードが必要になり管理しきれなくなるという状況も変えることができるのでは

Author
Getting Started with Waves Signer

Author

Vladimir Zhuravlev (Twitter)

How to use Waves Signer?

We're launching #Waves Signer, a new tool for developers that enables in-app authorization using a signature provider. Want to learn how the @Waves_Exchange team implemented it? See the article below: https://t.co/5C3M1fWkbl pic.twitter.com/2Q7lTEAhCB
— Waves Platform (@wavesplatform) December 26, 2019

Getting Started with Waves Signer

Waves Signerベースのアプリケーションの実際のデモは、https://vlzhr.github.io/waves-signer-example/src/ で見ることができます。この技術記事では、簡単な紹介の後、作成プロセスを段階を追って説明します。公式のWaves Signerのドキュメントはこちらから入手できます。

問題は何ですか？

ユーザーエクスペリエンスは、dApps開発の最も難しい部分の1つです。私の意見では、テクノロジーの採用が行われていない主な理由の1つは、最初の障壁が非常に高いことです。ブロックチェーンを使い始めるのは難しいです！その原因の一部は、不便なユーザー認証アプローチです。

長い間、開発者がWavesベースのWebアプリケーションに承認を実装する唯一のトラストレスな方法は、ブラウザーエクステンション（Waves Keeper）でした。

https://wavesplatform.com/technology/keeper

Waves Keeperは、ユーザーがアカウントデータを保存し、それをサードパーティアプリケーションでトランザクションの作成と承認をするために使用するのを支援する技術です。安全ですが、重要な欠点もあります。使用する前にエクステンションをインストールする必要があります。

つまり、Waves Keeperがインストールされていない場合、dAppのすべての機能をWebサイトの訪問者に提供することはできないのです。ブロックチェーンへのエントリーレベルがマスアダプションを引き起こすには高すぎると言うのに、これは正当な理由と言えるのではないでしょうか？ 🙂

Waves Signerとは何ですか？

Waves Signerと呼ばれる新プロダクトは、Wavesエコシステムの問題を部分的に解決し、ユーザーの障壁を取り除くために作られました。 🎉

これからは、開発者はWaves Signer機能を使用して、ユーザーが任意の方法（任意の署名プロバイダーを使用して）で承認できるようにすることができます。

以下のプロダクトをプロバイダーとして使用可能です：

Waves.Exchange Client
Waves Desktop Client
Waves Keeper
Ledger … またはその他の秘密鍵ストレージ

今のところ、Waves.Exchangeプロバイダーは準備ができています。つまり、ユーザーはブラウザエクステンションをダウンロードすることなく、任意のブラウザーでWaves.Exchangeアカウントを使用してサードパーティアプリケーションで認証を行うことができます。

次のスクリーンショットの後に、開発者がdAppにこの機能を実装するために必要な手順を説明します。

Waves Signer // transaction confirmation window

Waves Signerの使用方法

開発者がWaves Signerを使用してdAppに実装できる機能を見ていきましょう。簡単なJSアプリケーションを段階的に構築していきます。この例はgithubでも公開されています。

以下の通り進めます：

環境のセットアップ
シンプルなUI（ユーザーインターフェイス）の作成
スムーズな統合のためのWaves Signerの準備
Waves Signerのすべての機能を使用する💥

コーディングしていきましょう!!!

環境

Webpack bundlerとともにシンプルなJavaScriptを使用します。環境を設定するために以下のことを行います：

webpack.configファイルを準備します
npmを使用してsignerとproviderライブラリをインストールします
npm i @waves/signer @waves.exchange/provider-web

ユーザーインターフェース

UIを作成からコーディングを始めましょう。特別なものはなく、4つのボタンを持つ単純なHTMLページ：index.html

後でこれらの4つのボタンにハンドラーを追加します。

Waves Signerの準備

次に、Waves SignerライブラリとWaves.Exchange Providerライブラリを使用して、新しいJSファイルにWavesオブジェクトを作成します。：index.js

SEEDプロバイダーは別のプロバイダーオプションです。あなたのプロジェクトで使用する方法は次のとおりです：

現在、Waves.Exchangeプロファイルを使用してトランザクションを作成および署名するために使用できるWavesオブジェクトをもっています。ボタンのハンドラーにいくつかの基本的な機能を追加しましょう！ 😃

ユーザー認証

Waves Signerを使用して、Waves.Exchangeクライアントからアクティブなユーザーアカウントのパブリックデータを取得できます。

この機能の結果として、アカウントのアドレスがボタンに表示されます。 Waves.Exchangeは、秘密鍵やアカウント所有者のシードを明らかにすることなく、この情報を提供します。

プロバイダーはシードフレーズを使用してトランザクションに署名することもできるため、Waves Signerにトランザクションを送信させることができます！ 👍

Invoke Script トランザクション

Invoke Scriptトランザクションは、Rideを使用して作成されたスマートコントラクトを呼び出すために使用されます。アクティブなアカウントの残高を補充する(top upする)蛇口スクリプトを呼び出す関数を追加しましょう。

wavesオブジェクトには、invokeトランザクションを作成するinvoke()メソッドがあることがわかります。そのinvokeトランザクションはbroadcast()メソッドを使用してブロックチェーンに送信されます。 broadcast()は、通常通り取り扱うことのできるpromiseを返します。

ちなみに、新しいWaves Signerライブラリの大きな利点は、開発者が手数料の値をトランザクションオブジェクトに追加する必要がないことです：最低手数料はデフォルトでカウントされます。

スクリプトがユーザーによって正常に呼び出されると、ユーザーのアカウントの残高はゼロより多くなります。つまり、ユーザーは手数料を支払い、さらにトランザクションをブロードキャストできるようになります。

データトランザクション

ブロックチェーンの目的の1つは、最初はユーザーデータを保存することでした。 Waves Signerはこのプロセスを簡単にします。開発者は、送信データをブロックチェーン機能に非常に簡単な方法で追加できます。

このハンドラーの結果として、現在時刻がブロックチェーンに送信されます。

前の関数と比較してコードで唯一変更されたのはメソッド名です。 waves.data() を使用して、データトランザクションオブジェクトを作成できます。

Transfer トランザクション

最後のボタンは、Transfer トランザクションを使用してハードコードされたアドレスに最小量のトークンを送信するために使用されます。

非常に簡単で予測可能なコードですよね？ 🙂

レポジトリの完全なJSファイルをご覧ください：https://github.com/vlzhr/waves-signer-example/blob/master/src/index.js

結論

Waves Signerは、Wavesエコシステムユーザーの参入障壁を取り除くために構築された新しいプロダクトで、プロバイダーを介した認証をはるかに簡単にします。現在、2つのプロバイダーがあります-シードプロバイダー（テスト用）とWaves Exchangeクライアントのプロバイダーですが、将来、他の多くのプロバイダーが追加されます。

サードパーティの開発者にとって、Waves Signer機能の実装は非常に簡単です。この記事が実装プロセスの基本的な理解に役立つことを願っています！ 👏