SteemConnectのログイン機能をApplicationに実装する。完全最新版
こんにちは、 @shogoです。
https://developers.steem.io/tutorials-javascript/steemconnect
上記のSteemConnectに関する資料は古くなっていますので、今回は最新版のSteemConnect設定方法をご紹介したいと思います。
アプリケーション用のアカウント作成
まず最初に、アプリケーション用のSteemアカウントを作成します。
RCsでも作成することができますが、SteemConnectのアカウント作成サービスを利用するのも良いです。
https://v2.steemconnect.com/accounts/create
新しく作成したいアカウント名を入力し、パスワードを確実に保存します。
あとは費用(3STEEM)を支払うアカウントでログインし、アカウント作成は完了です。
※SteemConnectでアカウントを作成した場合、作成したアカウントにリカバリが必要になった時は、自力でリカバリする必要があります。
プロフィールの更新
アカウント作成が完了したら、次はプロフィールの更新です。
https://beta.steemconnect.com/developers
上記サイトにアクセスし、Add new appの欄からEnable appをクリックします。
ログイン画面が現れるので、先ほど作成したアカウントでログインします。
自分のコンピュータにパスワードやアカウント名を保存しておきたい場合は、新しくパスワードを設定します。
ログインが完了すると、プロフィールの編集画面が現れます。
プロフィールを入力していくのですが、大切なのは、Account typeとRedirect URIsの2つです。
Account typeはApplicationを選択します。
私は作成したアプリケーションをlocalhostで試したいだけなので、Redirect URIsには http://localhost:8080 を入力しました。
Redirect URIsについては、後ほど詳しくご説明いたします。
入力が完了したら、Continueを押して保存します。
コードを書いていくよ！
プロフィール更新が完了したらコードを書いていくのですが、SteemConnectのデモがとても参考になります。
https://github.com/bonustrack/steemconnect.js/blob/master/docs/index.html
SteemConnectの実装はとても簡単で、以下のようなほんの数行でできてしまいます。
var api = new steemconnect.Client({
app: 'account-name',
callbackURL: 'http://localhost:8080',
scope: ['vote', 'comment']
});
appには作成したSteemアカウント名を入力します。
callbackURLは、先ほどプロフィールを設定したRedirect URIsと完全に一致する必要があります。
localhostで試したい場合は、http://localhost:8080 などを入力します。
独自ドメインなどで動かしたい場合は、https://www.steem-recipe.com などをcallbackURLとRedirect URIsに追加します。
(Redirect URIsには、リンクを複数設定できます。)
上記のコードだけでは少し足りませんが、分からないこと等がありましたら、ある程度の事はお答えできると思います。
Steemアプリケーションに関する記事はいくつか書いていますので、少し参考になるかもしれません。
・TypeError: crypto.randomBytes is not a function
