シンプルなパスワード強度チェッカーを構築します

インスタントフィードバックを提供することは今のところです。ユーザー名とメールアドレスのチェックに自分自身を制限するのはなぜですか？これを拡張して、ユーザーが入力しているパスワードの強度に関する視覚的なフィードバックを簡単に提供してみませんか？今日は、正規表現と単純なアルゴリズムを使用して単純なパスワード筋力チェッカーを作成する方法を見てみましょう。

ほとんどのセキュリティの専門家が言うように、ユーザーは常に最も弱いリンクです。ユーザーが非常に賢明なパスワードを選択した場合、最も安全なシステムでさえ脆弱です。それを念頭に置いて、最近の傾向は、ユーザーがパスワードをより安全にするためにパスワードを拡張または変更できるように、パスワードの強さに関するユーザーに迅速なフィードバックを提供しているようです。興味がある？すぐに始めましょう！今日私たちが構築しようとしているもののデモは次のとおりです。

この特定の機能の設計目標は比較的小さいです。これは、強度をテストするためにボタンをクリックしないことを意味します。

• トリガーイベントは、キーボードイベントのいずれかになる可能性があります。入力ボックスのkeyup
イベントを選択しました。
• イベントハンドラーに入力をチェックしますが、他のすべてを個々のヘルパーメソッドに委任させます。
• ヘルパーメソッドは、入力を解析し、複雑さを分析し、結果を分析し、結果を印刷することになります。無効なエントリにCPUサイクルを無駄にしないように。アルゴリズムは文字列を分析し、余分な長さのボーナスを与え、数字、シンボル、大文字、および文字または番号のみの入力のペナルティを使用します。これは記事の範囲から外れているため、辞書に対する入力をチェックすることを検討するつもりはありません。最初に、入力文字列の長さを確認します。最小長よりも大きい場合は、50のベーススコアを付けます。それ以外の場合は0になります。次に、文字列の各文字を反復し、シンボル、数字、または大文字であるかどうかを確認します。もしそうなら、それをメモしてください。

次に、推奨最小値よりも文字列がいくつの追加文字を持っているかを確認し、各文字にボーナスを許可します。また、文字列に大文字、数字、シンボル、または3つすべての組み合わせが含まれている場合は、ボーナスを許可します。それらのそれぞれの存在にボーナスを付与します。

文字列に小文字または数字のみが含まれているかどうかを確認し、もしそうなら、すべての数字を追加し、それに応じてパスワードの強度を決定します。それは非常に複雑ではありませんが、多くの悪いパスワードをキャッチします。コードでそれを見ると、これをよりよく理解します。

コアマークアップ

デモページのHTMLマークアップは、次のように見えます。 IDのIDを持つ入力要素に注意してください div

要素のIDを持つID

要素のIDを>クラスへのIDがペナルティに関するメッセージが含まれているので、色が大胆で赤になりました。必要な機能。 jQueryを広範囲に使用していることに注意してください。必要に応じて、GoogleのCDNへのリンクを自由にリンクしてください。

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

イベント処理

多くのジャグリングが続くので、値を保持するために多数の変数が必要です。これは生産コードではなくデモであるため、変数をグローバルとして宣言し、ヘルパーメソッドを介して内部で宣言してから機能に渡すことにしました。入力要素とnum と呼ばれる最初のものは、追加の文字、大文字、数字、および記号の数を保持します。 numオブジェクトと呼ばれる2番目のオブジェクトに対して同じことを行いますが、文字の数を保持しますが、checkval関数はpasswordinput要素がある場合はいつでも呼び出されます。まず、ユーザーが入力したパスワードを取得し、次に、計算された計算を理解するために、outputResult（）

関数内でいくつかの変数初期化を実行します。後でどのように機能するかを確認します。

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

入力を分析します

マッチ（）

メソッドを定義すると、文字列を正規表現と一致させることができます。正規表現を初めて使用する場合は、必見の正規表現に関するVasiliのすばらしい記事を読むことをお勧めします。

次に、入力文字列の長さとパスワードの指定された最小長の違いを判断する必要があります。これにより、過剰な数のキャラクターがいます。

次に、文字列に大文字、数字、シンボルがあるかどうかを確認します。もしそうなら、ボーナスを許可してください。また、それらの2つの組み合わせがあるかどうかを確認し、もしそうなら、より小さなボーナスを許可します。

最後に、文字列がフラットかどうかを確認します。これを正規表現でチェックし、もしそうなら、この練習のパスワードをペナルティにします。

複雑さを計算します

複雑さを計算することは比較的簡単に簡単になります。過剰な文字の数とその乗数の製品にベーススコアを追加します。大文字、数字、シンボルについても同じことをします。次に、存在する場合は組み合わせにボーナスを追加し、文字列がフラットな場合はペナルティを追加します。各州は次のとおりです。

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

ここでは、2つの機能を定義します。 div

と呼ばれる主な関数、削除するクラス、および追加するクラス。デフォルトのヘルパー関数は、

クラスと呼ばれ、バックグラウンドカラーを元の黒に戻します。

最小指定された長さよりも少ない場合、それに応じてテキストを変更し、弱い

。各評価のベースラインスコアを自由に変更してください。デモを実現するために非科学的な値を入れました。詳細なブレークダウンの更新

メイン結果が更新された状態で、今すぐ統計の更新を調べることができます。説明させてください。

詳細な結果の個々の値を更新する代わりに、コンテナの完全なHTML値を更新することに頼りました。これらのボックスの数が合計されると、それが遅くなることはわかっていますが、各要素に個別にアクセスしてから、小さなデモの値を更新することはかなり逆効果に思えました。ここで私と一緒に走ってください。

これは、通常のHTMLを要素に注入するようなものです。ただし、詳細を瞬時に更新できるようにするためにいくつかの変数を内部に配置しました。各値は、初期値の割り当てだけではinit（）

関数を取得します。実際には、すべてのAnalyzestring（）関数の後にスコアとペナルティの値をリセットするのに役立ちます。

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

ここで何が起こっているのか見てみましょう。パスワード全体を小文字に変換することから始めます。その後、それをサイズプロパティに変換して、一意の文字の数を取得します。一意の文字の数が3以下の場合、analyzestring（）関数の値を設定して、繰り返しパターンを確認します。これはREGEXに依存し、3つ以上の英数字のシーケンスがパスワードで繰り返されているかどうかを確認します。

checkRepetition（）関数の下部に次のコードを追加します。文字。

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

上記の画像では、繰り返しのキャラクターシーケンスの問題に正常に取り組んでいることがわかります。ただし、パスワード強度チェッカーの別の制限の例を示しました。 

test()pa $$ w0rd $

が安全なパスワードとして表示されることがわかりますが、実際にはすぐに壊れます。これは、ここでのアルゴリズムの単純さによるものです。その問題については、文字の交換や一般的なパスワードやパターンをチェックしません。そのようなことをすると、このチュートリアルの難易度が高まり、そのアプローチ性が低下します。どちらもこの特定の記事を望んでいませんでした。

辞書に対する入力を調べるには、この記事の範囲外であり、クライアント側にダウンロードされた巨大な辞書が必要です。繰り返しになりますが、今回は両方を避けたかったのです。結論

>あなたがそれを持っている：ユーザーフレンドリーな機能を追加する方法、ユーザーがプロジェクトに入力したパスワードの強さをユーザーに知らせる能力。このチュートリアルが興味深いことを願っています。これはあなたにとって有用です。プロジェクトの他の場所でこのコードを自由に再利用してください！ Montyはフルスタックの開発者であり、チュートリアルを書いたり、新しいJavaScriptライブラリについて学ぶのが大好きです。

以上がシンプルなパスワード強度チェッカーを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。