ほとんどの対話型インターネット アプリケーションでは、アプリケーションを使用するためにユーザーが最初に「登録」される必要があり、その後、ユーザーがアプリケーションを使用するたびに「ログオン」する必要があります。最初にユーザーを登録し、後でそのユーザーを認識してアクセスを許可するこのプロセスは、 と呼ばれることがあります。この記事では、  ユーザー認証システムの登録コンポーネントで使用されるコードとプロセスに焦点を当てます。 ユーザー認証 Authur デモの Logon Portal を使用すると、ユーザーは Storybook という名前の Web コミック ビルダー アプリケーションにアクセスできますが、ポータル自体は、Web アプリケーションを使用するために認証が必要な多くの状況で使用できます。 ログオン ポータル コード リポジトリ ここで説明するコード ベースは、  のパブリック リポジトリとして GitHub で入手できます。コメント、批判、提案はいつでも大歓迎です！ https://github.com/Bob-Wright/Authur-User-Registration-System ログオン ポータル ビルダー アプリケーションは、ビルダー自身が作成したコミック ブックのギャラリーから起動されます。アプリケーションの最初のページは、次の 2 つのスクリーンショットに示されているログオン ポータルのランディング ページです。このページは、Storybook フォルダー内の によって表示されます。  Portal.php メイン ダイアログ ボックスには 4 つのログオン オプションの選択肢が表示され、[   ] ボタンから使用できる各ログオン オプションを説明する基本的な説明ポップアップ モーダルが表示されます。 LOGIN OPTIONS EXPLAINED ログオン ダイアログ ボックスには、「 」のオプションも含まれています。これは、ユーザーがパスワードを変更したい理由としてよくあるのは、ログオンできるようにするためです。 パスワードの変更 ダイアログの最後の項目は、ユーザーとしてサインアップするための [ ] ボタンへの招待です。 サインアップ サインアップ この [ ] ボタンを選択すると、  プログラムが起動し、次の 3 つのスクリーンショットのダイアログが表示されます。このダイアログは、ユーザー プロファイル データベース エントリの作成に使用されるユーザー データ情報を要求します サインアップ signup.php ユーザー名と電子メール アドレスの情報を取得することに加えて、ダイアログはパスワードの入力を要求し、伝統に従って、大文字と小文字の英数字と少なくとも 1 つの記号文字の組み合わせを要求します。これらの文字パラメーターを要求する意図は、明らかに、パスワードを推測しにくくすることです。それがどれほどうまく機能するかは議論の余地があります。 ユーザー名、電子メール、およびパスワードのエントリに加えて、ダイアログは各ユーザーに関する特定のデータ項目も収集します。これらの項目には名目上、個人を特定できるデータは含まれていませんが、代わりに、後で検証プロセスで使用できるバイナリ (はい/いいえ) 要素の短いリストを提供するように考案されています。たとえば、特定のユーザーに「泳げますか?」と尋ねる場合があります。それらを識別する要因として。 これらのデータ項目が提供された後、画面下部の「 」ボタンをクリックして先に進むことができます。これにより、確認メールがユーザーに送信されたことを通知する次の画面が表示されます。  サインアップ ここに次に表示される電子メールは、確認のために新しいユーザーの電子メール アドレスに送信されます。  前述のサインアップ アクティビティはすべて、最初のポータル ダイアログに表示される最初の 3 つのログオン方法 (ユーザー名/パスワード、マジック リンク、およびワンタイム パスワード) をサポートする、完全に機能する電子メール/パスワード トークン交換ログオン システムにユーザーを効果的に登録します。 ゲートキーパーの画像選択 しかし、ユーザー登録用の画像ベースの MFA ログオン トークンを生成し続けると、コードはさらに興味深いものになります。電子メールの [Verify my email] ボタンをクリックすると、  フォルダにある プログラムによって、以下に示す次のブラウザ画面が開きます。 プログラムの Web ページは、最初にユーザーに電子メールが正常に検証されたことを通知し、続いて画像ギャラリーから「ゲートキーパー」のアバター画像を選択するようユーザーに要求します。  Storybook/Portal GateKeeper.php ゲートキーパー  GitHub のコード リポジトリに含まれているのは、   (リポジトリに含まれている を使用しない場合は  ) という名前のユーティリティ開発者プログラムで、  の定期的な表示を可能にします。プログラムが実行されるときの変数。これらの次の画像は、上記の GateKeeper.php プログラム ページに対して実行された dumpSession の結果であり、実行中の PHP プログラムのアクティビティをプロファイリングして、「追跡」できるようにします。  dumpSessionZ.php Zebra session2DB セッション データベース マネージャー dumpSession.php PHP $_SESSION  GateKeeper の機能の主な側面には、画面上の選択ギャラリーに入力するために使用する画像ファイルのいくつかの配列を操作することが含まれます。これらの策略の目的は、ページが読み込まれるたびにギャラリー画像の表示順序をランダムに再配置することです。  コードを見ると、特定のユーザー画像をギャラリーに含めるように指定できるように、表示する画像を選択するコードの上部セクションに例外トラップが挿入されていることがわかります。これにより、この画像をトラップ例外ユーザーのゲートキーパー アバターとして選択できることを確認できます。これには 2 つの影響があります。 GateKeeper.php まず、デモのウォークスルーに自分の顔写真を具体的に含めることができます  .第二に、特定のユーザーが特定の画像を利用できるようにするために使用できる shim を挿入する便利な場所を提供します。 ☺ しかし、続けて、ユーザーが上記の GateKeeper 画面で選択されたアバター画像をクリックしたと仮定しましょう。これにより、次に示す最初の ページが表示されます。このページの画像は、  プログラムによって フォルダーから読み込まれた 画像です。  マグショット情報 Storybook/Portal/mugshotChoice.php Storybook/Portal/ckimages JPEG これにより、さらにいくつかの値が PHP の $_SESSION データ配列に追加され、これを 表示を更新することで調べることができます。特筆すべきは、ユーザーの電子メール アドレス、姓名、およびここで次に示す要因値を含むユーザー データベースからの情報です。  dumpSession ゲートキーパーの画像をクリックしてユーザー登録を続行すると、このアクションにより、  から に対してフォーム POST リクエストが発行されます。ノード ターミナルは、このユーザーの PGP キー ペアを生成して保存し、次の API 要求を待機するときに、次の画面を表示します。  mugshotChoice.php ノード PGP API サーバー  API がキーの生成を完了すると、キーがデータベースに保存され、PGP API 完了通知メールによってユーザーがメイン アプリに戻ります。 次に示す Web ページ表示には、  をロードする方向が含まれています。インストールされている Node API サービスのコードは、  フォルダーのこの記事リポジトリに含まれており、この記事 (   ) とそれに関連する GitHub リポジトリ。    Storybook/Portal/showMugshotChoice.php Authur/openPGP https://medium.com/@itzbobwright/some-openpgp- crypto-functions-on-a-node-api-server このセットアップにより、ログオン アプリケーションから分離されたドメインにある API の使用が可能になり、  のこの GitHub リポジトリでフォークとして見つけることができる   リポジトリの使用が可能になります。   . https://github.com/Bob openPGPjs NodeJS -ライト/openpgpjs 活用できるこの分離のいくつかの側面を考えてみましょう。ログオン ポータルと同じサーバー上で PGP ノード サーバー API を実行することができます。もう 1 つの考慮事項は、プライベート IP または同様の分離スキームを介して PKC ノード サーバーをログオン アプリ サーバーに接続することです。インターネット DNS システムではなく、サーバーの IP アドレスを使用できます。 しかし、現在のスキームの議論を続けるには、ユーザーは指示に従って画像をクリックして をロードし、結果として次のページが表示されます。  showMugshotChoice.php このページで の更新を行うと、次に示すように、PHP の $_SESSION 配列変数にさらに 4 つのデータ値が追加されていることがわかります。この配列には、   、   、および キーの他の 3 つの値とともに、  の $_SESSION 配列キー値と共に格納される PGP スタイルの公開鍵の値が含まれています。  値、つまり は、ノード PGP API によって以前に書き込まれたキー データベースから取得されます。 dumpSession [coverImage] [stegoImge] [secretKey] [plaintext] [plaintext] PGP PUBLIC KEY BLOCK   プログラムはこれらの値を使用して、上の画面に示されている画像を生成しました。この画像は実際には、PGP PUBLIC KEY BLOCK 値を暗号的に埋め込むためにステガノグラフィーでエンコードされた、新しく保存された 形式の画像です。  showMugshotChoice.php PNG この時点で、ログオン ポータルの登録または登録部分を使用して、  で現在使用しているすべての情報を作成および保存しました ユーザーが指示どおりに画像をクリックすると、下の 2 つの画面に示すように、新しくクリアされた $_SESSION 配列を含む新しいログイン ポータル ページに戻り、Storybook Comic Book Builder へのログインに進むことができます。  Authur-An-Image-Based-MFA-User-Authentication-System 。  2 番目のマグショット情報画像をクリックする前に、$_SESSION 配列がまだ読み込まれている間に、デモ セットアップに含まれている別のプログラムを使用することに注意を向けることができます。  ページを参照すると、次の画面が表示されます。この画面には、このユーザーのステガノグラフィ的に埋め込まれ、暗号化された PUBLIC KEY BLOCK の概念の抽出が示されています。  Storybook/Portal/decodeStego.php まとめとして、これらの次の画像は、上記のページの完全な dumpSession キャプチャです。  結論 これで、  の または コンポーネントで使用されるコードの調査が完了しました。次に検討するコードの最後のセクションは コンポーネント関数です。ここでは、新しく登録されたユーザーがホストされた アプリケーションにアクセスできることを確認します。うまくいけば、すぐに来る記事を楽しみにしていてください。 Authur Image Based MFA User Authentication System Enrollment Sign Up Login Storybook の次の反復では、2 つの機能を追加する予定です。最初の機能は、生成されたステガノグラフィック イメージをプログラムで使用して、MFA トークン イメージとして使用する NFT イメージをミントまたは作成する方法を含めることです。ここで重要な考慮事項はコストであり、デモの場合、ミントにはガス料金がかからないようにする必要があります。 2 番目の機能では、たとえば従業員データベースから提供されたゲートキーパーのアバター画像をユーザーがアップロードして、ステガノグラフィック NFT 形式に変換できるようにします。 ユーザー認証システム この取り組みに親切に貢献してくれたすべての慈悲深いコーダーに、当然の叫び声と提案を提供させてください。最後に、最高のサポートをしてくれた神と私の家族に感謝します!!   こちらにも掲載しています。

2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Developer

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Download free Tech Leaders Productivity Report!

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

About Author

コメント

ラベル

この記事は

Related Stories

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

ワークフローを10倍に向上させる方法: 必須アプリ17選

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

ワークフローを10倍に向上させる方法: 必須アプリ17選

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

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