イメージを使用した MFA ユーザー認証システム (登録コンポーネント コード) の構築

ほとんどの対話型インターネット アプリケーションでは、アプリケーションを使用するためにユーザーが最初に「登録」される必要があり、その後、ユーザーがアプリケーションを使用するたびに「ログオン」する必要があります。最初にユーザーを登録し、後でそのユーザーを認識してアクセスを許可するこのプロセスは、ユーザー認証と呼ばれることがあります。この記事では、 Authurユーザー認証システムの登録コンポーネントで使用されるコードとプロセスに焦点を当てます。

デモの Logon Portal を使用すると、ユーザーは Storybook という名前の Web コミック ビルダー アプリケーションにアクセスできますが、ポータル自体は、Web アプリケーションを使用するために認証が必要な多くの状況で使用できます。

ログオン ポータル コード リポジトリ

ここで説明するコード ベースは、 https://github.com/Bob-Wright/Authur-User-Registration-Systemのパブリック リポジトリとして GitHub で入手できます。コメント、批判、提案はいつでも大歓迎です！

ログオン ポータル

ビルダー アプリケーションは、ビルダー自身が作成したコミック ブックのギャラリーから起動されます。アプリケーションの最初のページは、次の 2 つのスクリーンショットに示されているログオン ポータルのランディング ページです。このページは、Storybook フォルダー内のPortal.phpによって表示されます。

メイン ダイアログ ボックスには 4 つのログオン オプションの選択肢が表示され、[ LOGIN OPTIONS EXPLAINED ] ボタンから使用できる各ログオン オプションを説明する基本的な説明ポップアップ モーダルが表示されます。

ログオン ダイアログ ボックスには、「パスワードの変更」のオプションも含まれています。これは、ユーザーがパスワードを変更したい理由としてよくあるのは、ログオンできるようにするためです。

ダイアログの最後の項目は、ユーザーとしてサインアップするための [サインアップ] ボタンへの招待です。

サインアップ

この [サインアップ] ボタンを選択すると、 signup.phpプログラムが起動し、次の 3 つのスクリーンショットのダイアログが表示されます。このダイアログは、ユーザー プロファイル データベース エントリの作成に使用されるユーザー データ情報を要求します

ユーザー名と電子メール アドレスの情報を取得することに加えて、ダイアログはパスワードの入力を要求し、伝統に従って、大文字と小文字の英数字と少なくとも 1 つの記号文字の組み合わせを要求します。これらの文字パラメーターを要求する意図は、明らかに、パスワードを推測しにくくすることです。それがどれほどうまく機能するかは議論の余地があります。

ユーザー名、電子メール、およびパスワードのエントリに加えて、ダイアログは各ユーザーに関する特定のデータ項目も収集します。これらの項目には名目上、個人を特定できるデータは含まれていませんが、代わりに、後で検証プロセスで使用できるバイナリ (はい/いいえ) 要素の短いリストを提供するように考案されています。たとえば、特定のユーザーに「泳げますか?」と尋ねる場合があります。それらを識別する要因として。

これらのデータ項目が提供された後、画面下部の「サインアップ」ボタンをクリックして先に進むことができます。これにより、確認メールがユーザーに送信されたことを通知する次の画面が表示されます。

ここに次に表示される電子メールは、確認のために新しいユーザーの電子メール アドレスに送信されます。

前述のサインアップ アクティビティはすべて、最初のポータル ダイアログに表示される最初の 3 つのログオン方法 (ユーザー名/パスワード、マジック リンク、およびワンタイム パスワード) をサポートする、完全に機能する電子メール/パスワード トークン交換ログオン システムにユーザーを効果的に登録します。

ゲートキーパーの画像選択

しかし、ユーザー登録用の画像ベースの MFA ログオン トークンを生成し続けると、コードはさらに興味深いものになります。電子メールの [Verify my email] ボタンをクリックすると、 Storybook/PortalフォルダにあるGateKeeper.phpプログラムによって、以下に示す次のブラウザ画面が開きます。ゲートキーパープログラムの Web ページは、最初にユーザーに電子メールが正常に検証されたことを通知し、続いて画像ギャラリーから「ゲートキーパー」のアバター画像を選択するようユーザーに要求します。

GitHub のコード リポジトリに含まれているのは、 dumpSessionZ.php (リポジトリに含まれているZebra session2DB セッション データベース マネージャーを使用しない場合はdumpSession.php ) という名前のユーティリティ開発者プログラムで、 PHP $_SESSIONの定期的な表示を可能にします。プログラムが実行されるときの変数。これらの次の画像は、上記の GateKeeper.php プログラム ページに対して実行された dumpSession の結果であり、実行中の PHP プログラムのアクティビティをプロファイリングして、「追跡」できるようにします。

GateKeeper の機能の主な側面には、画面上の選択ギャラリーに入力するために使用する画像ファイルのいくつかの配列を操作することが含まれます。これらの策略の目的は、ページが読み込まれるたびにギャラリー画像の表示順序をランダムに再配置することです。 GateKeeper.phpコードを見ると、特定のユーザー画像をギャラリーに含めるように指定できるように、表示する画像を選択するコードの上部セクションに例外トラップが挿入されていることがわかります。これにより、この画像をトラップ例外ユーザーのゲートキーパー アバターとして選択できることを確認できます。これには 2 つの影響があります。

まず、デモのウォークスルーに自分の顔写真を具体的に含めることができます☺ .第二に、特定のユーザーが特定の画像を利用できるようにするために使用できる shim を挿入する便利な場所を提供します。

しかし、続けて、ユーザーが上記の GateKeeper 画面で選択されたアバター画像をクリックしたと仮定しましょう。これにより、次に示す最初のマグショット情報ページが表示されます。このページの画像は、 Storybook/Portal/mugshotChoice.phpプログラムによってStorybook/Portal/ckimagesフォルダーから読み込まれたJPEG画像です。

これにより、さらにいくつかの値が PHP の $_SESSION データ配列に追加され、これをdumpSession表示を更新することで調べることができます。特筆すべきは、ユーザーの電子メール アドレス、姓名、およびここで次に示す要因値を含むユーザー データベースからの情報です。

ゲートキーパーの画像をクリックしてユーザー登録を続行すると、このアクションにより、 mugshotChoice.phpからノード PGP API サーバーに対してフォーム POST リクエストが発行されます。ノード ターミナルは、このユーザーの PGP キー ペアを生成して保存し、次の API 要求を待機するときに、次の画面を表示します。

API がキーの生成を完了すると、キーがデータベースに保存され、PGP API 完了通知メールによってユーザーがメイン アプリに戻ります。 次に示す Web ページ表示には、 Storybook/Portal/showMugshotChoice.phpをロードする方向が含まれています。インストールされている Node API サービスのコードは、 Authur/openPGPフォルダーのこの記事リポジトリに含まれており、この記事 ( https://medium.com/@itzbobwright/some-openpgp- crypto-functions-on-a-node-api-server ) とそれに関連する GitHub リポジトリ。

このセットアップにより、ログオン アプリケーションから分離されたドメインにある API の使用が可能になり、 https://github.com/Bobのこの GitHub リポジトリでフォークとして見つけることができるopenPGPjs NodeJSリポジトリの使用が可能になります。 -ライト/openpgpjs .

活用できるこの分離のいくつかの側面を考えてみましょう。ログオン ポータルと同じサーバー上で PGP ノード サーバー API を実行することができます。もう 1 つの考慮事項は、プライベート IP または同様の分離スキームを介して PKC ノード サーバーをログオン アプリ サーバーに接続することです。インターネット DNS システムではなく、サーバーの IP アドレスを使用できます。

しかし、現在のスキームの議論を続けるには、ユーザーは指示に従って画像をクリックしてshowMugshotChoice.phpをロードし、結果として次のページが表示されます。

このページでdumpSessionの更新を行うと、次に示すように、PHP の $_SESSION 配列変数にさらに 4 つのデータ値が追加されていることがわかります。この配列には、 [coverImage] 、 [stegoImge] 、および[secretKey]キーの他の 3 つの値とともに、 [plaintext]の $_SESSION 配列キー値と共に格納される PGP スタイルの公開鍵の値が含まれています。 [plaintext]値、つまりPGP PUBLIC KEY BLOCKは、ノード PGP API によって以前に書き込まれたキー データベースから取得されます。

showMugshotChoice.phpプログラムはこれらの値を使用して、上の画面に示されている画像を生成しました。この画像は実際には、PGP PUBLIC KEY BLOCK 値を暗号的に埋め込むためにステガノグラフィーでエンコードされた、新しく保存されたPNG形式の画像です。

この時点で、ログオン ポータルの登録または登録部分を使用して、 Authur-An-Image-Based-MFA-User-Authentication-Systemで現在使用しているすべての情報を作成および保存しました。ユーザーが指示どおりに画像をクリックすると、下の 2 つの画面に示すように、新しくクリアされた $_SESSION 配列を含む新しいログイン ポータル ページに戻り、Storybook Comic Book Builder へのログインに進むことができます。

2 番目のマグショット情報画像をクリックする前に、$_SESSION 配列がまだ読み込まれている間に、デモ セットアップに含まれている別のプログラムを使用することに注意を向けることができます。 Storybook/Portal/decodeStego.phpページを参照すると、次の画面が表示されます。この画面には、このユーザーのステガノグラフィ的に埋め込まれ、暗号化された PUBLIC KEY BLOCK の概念の抽出が示されています。

まとめとして、これらの次の画像は、上記のページの完全な dumpSession キャプチャです。

結論

これで、 Authur Image Based MFA User Authentication SystemのEnrollmentまたはSign Upコンポーネントで使用されるコードの調査が完了しました。次に検討するコードの最後のセクションはLoginコンポーネント関数です。ここでは、新しく登録されたユーザーがホストされたStorybookアプリケーションにアクセスできることを確認します。うまくいけば、すぐに来る記事を楽しみにしていてください。

ユーザー認証システムの次の反復では、2 つの機能を追加する予定です。最初の機能は、生成されたステガノグラフィック イメージをプログラムで使用して、MFA トークン イメージとして使用する NFT イメージをミントまたは作成する方法を含めることです。ここで重要な考慮事項はコストであり、デモの場合、ミントにはガス料金がかからないようにする必要があります。 2 番目の機能では、たとえば従業員データベースから提供されたゲートキーパーのアバター画像をユーザーがアップロードして、ステガノグラフィック NFT 形式に変換できるようにします。

この取り組みに親切に貢献してくれたすべての慈悲深いコーダーに、当然の叫び声と提案を提供させてください。最後に、最高のサポートをしてくれた神と私の家族に感謝します!!

こちらにも掲載しています。