Hydro Client Raindrop 2FA(WordPress Plugin)を試してみよう 後編(WordPress実装編)

HYDRO プロダクツ 解説

ワードプレスにブログを移行したからには、Hydro Raindrop を実装してみたい!こんにちは、ノリヒロです。Hydroの事をもっと多くのユーザーさんにお伝えするべく、今回はRaindrop実装後編、ワードプレス実装編です。まだHydroID等を取得していない方は下準備が必要となります。

第1回前編【ワードプレスなしでも体験できる仮想Raindrop(下準備編)】を参照ください!テキスト、画像どちらのリンクからでもお進みいただけます。

Hydro Client Raindrop 2FA(WordPress Plugin)を試してみよう 前編(下準備編)
ワードプレスにブログを移行したからには、Hydro Raindrop を実装してみたい!こんにちは、ノリヒロです。Hydroの事をもっと多くのユーザーさんにお伝えするべく、今回は第1フェーズ、Raindropの体験方法をお伝えします。記事は...
Raindrop 2FAを試してみよう後編(Wordpress 実装編)

①Raindropを簡単におさらい(再掲)

Project-Hydroの6フェーズの第1弾Raindrop(雨だれ)。特徴は【認証】です。なお、Raindropには2種類あります。Client Raindrop と Server Side Raindrop です。どちらとも2FAに変わりはありませんが、保護すべき対象、使用者、コストの有無など仕様に違いがあり全くの別プロトコルです。ざっくりとClient Raindropはユーザーが使用する、Server Side Raindropは取引所や銀行等企業が使用する…という認識てOKです。私たちが”Raindrop”の話題をする時は、たいていは”Client Raindrop”の事を話していますし、今回の紹介もこのClient Raindropになります。(以後RaindropはClient Raindropを指します)。

取引所を利用している方なら、1度はスマホにインストールするgoogle authenticator(Google 2段階認証、2FA)を使ったことがあると思います。一定時間でパスワードが変化していくあれですね。Raindropも同種の2FAです。それではGoogle 2FAとは何が違うのでしょうか?Hydrogen公式にアップされているRaindropの紹介動画から抜粋です。

動画の全訳はこちらからどうぞ。

HYDRO Raindrop 2FAを理解してみよう!
HYDRO Raindrop 2FAを理解してみよう!こんにちは、ノリヒロです。HYDROのYoutubeチャンネルに各プロジェクトを説明した動画があります。非常にかわいらしく、わかりやすいので日本語訳をつけてみました。本当は字幕にしたかっ...

Google認証とRaindrop認証の流れを纏めてみました。

違い①:パスワードの作成・管理方法

Google2FAは、【サーバー(ログインサイト)から Google 2FAを インストール時にランダムに生成された秘密鍵(QRコード)+現在時刻】を特定のアルゴリズムで変換した数字6桁です。サーバー保管の秘密鍵とQR等でインストールした秘密鍵が同じなので、同時刻であれば同じパスワードが生成されて、認証可能となるという仕組みですね。あとは、サーバーが保持するQRコードを同時に複数の端末(スマホ)にダウンロードすれば、予備も作れます。パスワードはサイトが作成・管理しているということになりますね。
Hydro Raindropでは、パスワードのキーとなるのは、Hydro Appをダウンロードした際に付与されるHydro IDです。端末を識別するHydro専用のIDで、ブロックチェーン上に記録され、端末と紐づけされています。ログインするサイトではそのIDを登録します。すると、ログインするたびにHydroID専用のパスワードがサイトに表示されます。ユーザーはそのパスワードをHydro Appに入力。HydroAPI経由でブロックチェーン上に情報が伝達されます。ブロックチェーン内では、送信された情報を基に正誤を判定してAPI経由でサイトにアクセスのOKを出します。パスワードはアプリ(が作成したHydro ID、ざっくりいえばユーザー)が作成・管理していることになります。サイト管理とユーザー管理、この違いは大きいですね。

違い②:どこで認証を行うか

Google 2FAでは認証を行うのはサイト自身です。一方Hydro Raindropは認証を行うのはHydr API+ブロックチェーン部分です。①、②とも、Google 2FAはサイトに重心が置かれていますね。

さて、ハッカー君が取引所の暗号通貨を狙っているとします。フィッシングサイト(偽サイト)も作りました。Google 2FAとHydro Raindropはフィッシング対策ができるのでしょうか。

Google 2FAの場合:ID、パスワード、2FAを偽サイトに入力してしまいました。偽サイトでは「ログインOK」という文字が出ますが、もちろん架空のログインです。ハッカーは手に入れた情報をサイトに間髪入れずに入力します。当然サイトの持っている情報と一致しますので…本人としてログイン出来てしまいました。哀れ、Google 2FAはセキュリティを突破されてしまうのでありました。
Hydro Raindropの場合:ID、パスワード、2FA用Hydro IDをフィッシングサイトに入力してしまいました。しめしめ。ハッカー君は本サイトにアクセスしHydro IDを入力します。ここでハッカー君、焦っています。そうです。IDに紐づいたパスワードは6桁、ランダム発行です。当たる確率は10の6乗で100万分の1。しかもHydro IDを発行した端末でしか入力する効力がないのです。結局のところ、ハッカー君が成功させるためには、ログインをしたいサイト、HydroApp、Hydroサイトに同時にアクセスできるようになる必要があります。これは厳しい!ハッカー君は諦めました。Raindropの勝利です!

サイトに管理が集中するGoogle2FAはフィッシング対策には不十分ですね。一方のRaindropはHydro ID(及びその端末)がトリガーとなっており、紐づけはHydroAPI(Hydroサイト)で行います。両方を同時にアクセスできるのは、真正な保有者以外考えにくいですね。Hydro Raindrop の素晴らしさが目立つ結果となりました。

また、スマホの紛失、故障時にも対応ができるのがHydro 2FAの強みです。先ほども申し上げましたが、Google 2FAではバックアップの際には秘密鍵(かそれをQRコードにしたもの)が必要となります。しかもそのキーはダウンロードする際に1回こっきりの表示です。ダウンロード時のチャンスを逃したら一度削除後、再ダウンロードをしなければなりません。しかも取引所ごとに違うわけです。これは大変ですね。

一方Hydro 2FAでは、必要なものはシードワード(英単語12個)とHydro IDのみ。この2つをメモっておけば紛失、故障時にもすぐに復元が出来ます。シードワードはHydro Appでいつでも確認できるのでメモるのは簡単。この点でも優れているといえるのではないでしょうか。

最後に1点。Raindropは単体での機能ではありません。Hydro 【ID】 と言えば…そうです、第2フェーズに予定されているSnowflake(ID管理)に、Raindropは統合されます。詳細は別の機会にしますが、Hydro IDを EINというイーサリアム専用の個別IDに紐づけをしてDappのID管理をまとめちゃおう…という構想です。アプリっていちいちログインするの、面倒ですよね。これからDappは増えていくと思います。そんなDappのID管理が簡単に出来たら素晴らしいと思いませんか?

 

なお、実装までの手順に関してはWordpress記事を参考にしています。

WP Hydro Raindrop
Enables Hydro Raindrop Multi Factor Authentication on your WordPress Website.

具体的には

・Hydrogen Webサイトでアカウント作成、アプリでID作成、及び連携(前編で対応)
・GitHubのアカウント作成(あらかじめ準備お願いします)
Client ID, Client secret, Application ID(以降3フレーズと記載)の作成
3フレーズの確認&ワードプレス側での仮設定
本番用の3フレーズの確認&ワードプレス側での本設定
⑤実際にどう動くのか、試してみよう

となります。それでは行ってみましょう!

②Client ID, Client secret, Application IDの作成

 


Hydrogen のWebサイトにログインします。TOP画面です。API AcessのHydroのRequest access(赤枠部分)を選択します。

 


GitHubアカウントを登録します。下の【Project Details】は開発しているAppやプロジェクトがあれば記入します。ノリヒロは特に記入しなかったように思います。記憶が定かではありません…。スミマセン。

 

署名欄です。Mikeのサインが見れますね!こちらに記入します。
Company Name:企業名です。ノリヒロは 展開しているECショップ名を記載しました
Company Address:住所です。
Incorporated in:国+県ですかね。
Your Name:英字で。
Title:役職ですね。ノリヒロはないので “None”としました。
SIGN HERE(黄色の部分)直筆のサインを行います。筆記体、英字で行いました。これが一番難しかった(笑

全て記入したら送信をします。これでひとまずユーザー側の対応は完了です。あとは…Hydrogenチームが認証をしてくれるまで待ちます!アナウンスでは1週間以内には返信がある…とのことでしたが、ノリヒロは確認も含めてHydrogenチームに問い合わせをしたため、少しせかしてしまいました。問い合わせ後約2日で承認されました。承認されると登録したメールアドレスにHydrogenplatform.comからメールが届きます。

③仮の3フレーズの確認&ワードプレス側での仮設定

無事認証がされました。再度Hydrogenのサイトにログインします。
Dashboardを選択。①で【Request access】となっていた部分が【Approved(承認済)】になっていますね。まずはSandbox(テスト環境)でテストします。【Create Credentials】(上の赤枠部分)を選択します。

 


するとテスト用の【Client ID】と【Client Secret】が発行されます。Client Secret は秘密キーとなりますので絶対に他人に教えないようにしましょう!Client Secretは画面では******担っていますが、Unlockの鍵マークを押すと英数字の確認ができます。これでClient IDとClient Secretは入手できました。次に上部のHydroタグ(赤枠)を選択します。

 

Application IDを取得するためにSandboxタブを選択し、【+ Add New】(画像した部分)を選択。必要箇所に記入します。
Name:Raindropを使うアプリ名ですね。今回は WordPress としました。
Application ID:アプリを認識するIDです。自動で英数字が割り振られます。
これで3フレーズが確認できました。これをWordpressに設定します。

 




Wordpressで WP Hydro Raindrop pluginをインストールします。ダッシュボードに【Hydro Raindrop】が追加されます。まずは【System Requirements】を確認しましょう。チェックがついていればOKです。基本的には問題ないと思いますが、環境によっては修正が必要な場合があります。
次に【API Settings】タブを選択します。
Application ID:先ほど取得したIDを入力します。
Client ID:先ほど取得したIDを入力します。
Client Secret:先ほど取得したパスを入力します。
Environment:SandBoxとProductionがあります。今回はSandboxを選択します。
全て記入後変更を保存します。さて、仮設定がすべて完了しました。再度HydrogenのHPに戻ります。

 


Dashboardから【API Credentials】のProduction, Client IDの下にある【Contact us】を選択します。本番環境にしてください!というお願いをSupport ticketから飛ばす形になります。
subject:Other を選択
Message:画像のように記載いただければよいと思います。
My app(wordpress) has been completed in Sandbox, please review and approbe it.

StatusがSendになったらユーザー側でできることはひと段落。あとは運営が認証してくれるのを待ちます。前回同様こちらも1週間程度かかるようです。

 

④本番用の3フレーズの確認&ワードプレス側での本設定

 

今回は認証完了のメールが届いた記憶はないのですが、届くでしょう(笑。Dashボードを確認するとAPI CredentialsのProductionの部分に【Client ID】【Client Secret】が付与されていますね。これで認証されたという事なります。

 


次にHydroタブに進みます。先ほどはSandboxでApplication IDを取得しましたが、今度はProductionタブ⇒Raindrop Applicationを選択します。+Add Newを行います。
Name:先ほどと同じように WordPressとします
Application ID:自動的に付与されます
これで本番環境用の3フレーズが取得できました。次にワードプレスに進みます。

 


プラグインからHydro Raindrop ⇒ SPI Setting と進み、本番用の3コードをそれぞれ入力します。その後【Environment】を【Production】に変更し、変更を保存します。ちなみに3つ目のタブ【Customization】は特に変更する必要はないと思います。これですべての設定は終了です。さあ、どのように動くのでしょうか。

 

⑤実際にどう動くか、試してみよう

それでは実際に試してみます。
まずワードプレス用のログインを行います。


設定後初めてのログイン時にはHydroIDが聞かれますので、ここに自分のHydroID(アプリで確認ができます)を入力してSUBMITを押します。次にHydro Appに進みます。

Add New Accountを選択、continueを2回押すと、全ての処理が終了していれば画像のように【Word Press】がLinkedになります。その後Wordpressに戻るとRaindrop用の6桁のコードが発行されますので、それをHydro AppのWordpress Linkを押して入力します。Wordpressに戻り確定を押します。正常にコードが認識されていれば、ダッシュボードが表示されます!

2回目以降のログイン時は、ワードプレスログイン⇒Raindrop用の6桁コードが発行⇒Appで入力して送信⇒ワードプレス用で確認⇒ログイン完了 という流れになります。わかりやすいですね~。ちなみに②のSandboxを使った仮設定は必要ないかもしれません。あくまでノリヒロが実践した手順を記載しておりますのでご了承ください。また、疑問点、ここ間違ってるよ~って箇所等がありましたらTwitter、コメント等でご連絡いただけば助かります。

 

いかがでしたでしょうか。APIの確認を取るところが少し時間がかかりますが、それ以外は非常に実装しやすいと感じました。Wordpressを使っているユーザーさん、ぜひ試してみてはいかがでしょうか。Durpalも同じような原理だと思われます。こちらも実装できたらまた記事にします。

 

コメント