独自のパスワードジェネレータを作成します🤖

12006 ワード
beginners codenewbie css javascript テキストリンク
あなたが使用するすべてのウェブサイトのユニークなパスワードをしたいとしましょう.しかし、あなたはそれらのすべてを暗記したくない.はい、パスワードマネージャを使用する必要があります.しかし、それは常にあなた自身を構築し、これらのことがどのように動作するかの基礎を学ぶのは楽しいです.

それは私のパスワードジェネレータが入っているところです.

以下は仕様です。

  • は、ウェブサイト
    • のアドレスをとります
  • とあなたからの2、3の秘密の語
    • そして、
  • はこれらのものをまとめて、予測可能な暗号化アルゴリズム
    • を通してそれをすべて実行します
  • の結果は、パスワード
    • として使用する文字と数字のユニークな組み合わせです
    すべてのアドレスの
  • は、パスワードが一意になりますが、それはランダムではありません.
    • 特定のアドレスのパスワードを生成するたびに、同じパスワードを取得します.あなたのパスワードを忘れてしまった場合は、再生成することができますし、それが合うようになります.
    警告の言葉.このアルゴリズムは暗号的に安全ではない.誰かがステップ2からあなたの秘密の単語を知っていれば、彼らはあなたのパスワードを再作成することができます.それで、ミッション重要で敏感な地域でこれらのパスワードを使うのは賢明でないでしょう.しかし、それはまだ開発しようとする価値がある.

    MD 5ハッシュ


    我々のアルゴリズムの中心はMD 5ハッシュエンジンである(ステップ3でそれを見ます).ハッシュは、テキストを32文字のストリング(デジタル指紋の一種)に変えるアルゴリズムです.
    たとえば、Googleをエンコードする場合.あなたはいつもハッシュ1d5920f4b44b27a802bd77c4f0536f5aを得ます.
    そして、あなたのストリングがhttps://google.comであるならば、あなたのハッシュは常に99999ebcfdb78df077ad2727fd00969fです.

    ここで何を知ることが重要です


    ハッシュ(またはデジタル指紋)は、元の文字列(少なくとも、簡単にではなく、直接)を明らかにするためにリバースエンジニアリングすることはできません.
    同じ文字列をmd 5でエンコードすると、常に同じハッシュが生成されます.
    したがって、可能なソーステキストと復号化したいターゲットハッシュのコレクションがあれば、ソーステキストからハッシュを作成し、それをターゲットハッシュと比較することができます.それはリークされたパスワードデータベースをクラックする一般的な方法です.
    このアルゴリズムは広く知られており,よく研究されている.
    暗号は解読できない.MD 5ハッシュは100 %安全ではありません.人生の中の何も本当にありません.
    MD 5をより安全にする一般的な方法の一つは、塩を添加することです.塩はあなたの暗号化された文字列に追加され、誰もが知っているいくつかの秘密の単語や文字です.塩を使用すると、事前ハッシュハッシュを一致させるパスワードは非常に困難になります.

    ここに例があります


    あなたがストリングのメールをハッシュしたいと言います.グーグル.com.この文字列はいつもハッシュbe5cab0695415d9363d18ad1345c73ebを与えます.ハッカーは、このパスワードがどこから来たか、そして、それが意味するところを知らないで、このパスワードを遮断します.しかし、彼は見つけたいです.彼は可能な文字列のテーブルを作成し、ハッシュし、ハッシュに対して結果のハッシュにマッチします.

    しかし、あなたのオリジナルのストリングが'メールであるならば.グーグル.' comjacko '、どこで'ジャッキ'は塩ですか?その場合、ハッシュは397ea03e8e23b5b0127dffc6db629eabであり、ハッカーがどうにか、あなたの塩を推測しない限り、彼はこのハッシュと逆のことができないでしょう.
    それで、すべてはあなたの塩が何であるかについてわかっていて、どこでそれを置くかについて、ハッカーのものに降ります.

    インターフェース


    基本的なインターフェースから始めましょう.メモ帳でテキスト文書を作成し、これをペーストし、HTMLとして保存します.何が起こっているのか少し理解しているなら、コメントを読んでください.
    <html>
<!-- service area -->
<head>
 <title>Password generator</title>
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- next line loads the MD5 hashing function -->
 <script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
 <style type="text/css">
/*Adding some basic design*/
body{ text-align: center; margin: 10; 
    font-family: Verdana, Arial, sans-serif; 
    font-size: 16px;}
input{ display: inline-block; margin: 20px auto; 
    border: 2px solid #eee; padding: 10px 20px; 
    font-family:Verdana, Arial, sans-serif; 
    font-size: 16px;}
</style>
</head>

<body>
 <!-- Our page will be here -->
<div class="container"  "margin: auto;">
 <h2 class="todo__caption">Password generator</h2>
 <br>
 <!-- Interface begins -->
 <input type="text" id="site_url" size="50" placeholder="Where do you need this password? Paste the address">
 <br>
 <input type="text" id="keyword" size="50" placeholder="Some key word here">
 <br> <br>
 <!-- Main button -->
 <button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
 <p>Your password is:</p>
 <div id = "pass_text" style="font-weight: bold"></div>  
</div>
 <script>
 <!-- Your main script -->
</script>
</body>
</html>
    あなたがこのテキストを保存するならば、...HTMLファイルとChromeや他のブラウザで開きます.いい感じですが、まだ動きません.

    次に、ブラウザで実行するスクリプトを書いて、すべての暗号化マジックが発生することを確認します.手順に従います.

    ステップ0：家事


    私はコードをきれいにしたいので、いくつかの変数を宣言し始め、後でボタンによって引き起こされる関数を設定します.このコードはまだ何もしませんが、実際に役に立つコードを適切に実行するために必要です.これは前のドキュメントの最後にあるブロックの中にあります.
    // setting up variables
var site, salt;
var text, password;
// The function to run all the useful code
function generate(){
// Some useful code
}

    ステップ1。サイトからアドレスを取る


    私はJavaScriptで書いています.そして、それはブラウザで実行して、あなたのウェブページで起こっているすべてに直接アクセスします.ページにはいくつかの入力フィールドがあります.これらのフィールドからの読み込みは1行の問題です.
    site = document.getElementById('site_url').value;
    SiteCage URLのことに注意してください?入力フィールドのIDです.このコマンドを実際に実行します.id ' sitehen url 'を持つページのオブジェクトを検索し、その値を見て、以前に宣言した' site 'という変数に何があるのかを伝えてください.
    この行はコメント'いくつかの有用なコード'の下になります.

    手順2。秘密の言葉を取る


    同じように、秘密の言葉を読みました.
    salt = document.getElementById('keyword').value;
    この行は前の行の下にあります.

    ステップ3。一緒にマッシュ


    今、私は'サイト'と'塩'の組み合わせをする必要があります.私は、より多くの塩辛さのために少し余分な何かを加えることもできます.JavaScriptでは、2ビットのテキストを接続するには、単純に追加します.
    text = site + salt + 'Practicum Rules';
    私たちの';テキスト';変数は、現在のページ上の2つの入力ブロックで書かれているの組み合わせを持っていると、秘密の単語';練習規則';.それは非常に我々のアルゴリズムを保護していないので、ページにハードコードされているため、このジェネレータのソースコードを見て誰でも読み取ることができます.しかし、それは楽しいです.

    ステップ4。暗号化する


    私は以前にmd 5スクリプトをロードしました.
    password = md5(text);
    この行は読み込みます.md 5という関数を取り、' text '変数の中にあるものは何でも与えます.それが吐き出して、それを『パスワード』変数に入れてください.

    ステップ5。出力パスワード


    JavaScriptでは、ページへの出力は簡単です.
    document.getElementById('pass_text').innerHTML=password;
    これは、ドキュメントにおいて、' passwd text 'のIDを持つ要素を見つけ、変数' password 'の中のHTMLに入れます.そして、私はちょうどコード化されたパスワードをそこに置くということを知っています.

    コードの実行


    今、私はすべての有用なコードが'生成'と呼ばれる関数の中に入ることを確認する必要があります、そして、私はこの機能をページの上で我々のボタンにマップしておきます.私には、大胆な部分を見ます.
    <button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>

    こちらが最終コードです


    <html>
<!-- service area -->
<head>
 <title>Password generator</title>
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- next line loads the MD5 hashing function -->
 <script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
 <style type="text/css">
/*This will be some basic design*/
body{ text-align: center; margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px;}
input{ display: inline-block; 
    margin: 20px auto; border: 2px solid #eee; 
    padding: 10px 20px; 
    font-family:Verdana, Arial, sans-serif; 
    font-size: 16px;}
</style>
</head>

<body>
 <!-- Our page will be here -->
<div class="container"  margin: auto;">
 <h2 class="todo__caption">Password generator</h2>
 <br>
 <!-- interface begins -->
 <input type="text" id="site_url" size="50" placeholder="Where do you need this password? Paste the address">
 <br>
 <input type="text" id="keyword" size="50" placeholder="Some key word here">
 <br> <br>
 <!-- Main button -->
 <button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
 <p>Your password is:</p>
 <div id = "pass_text" style="font-weight: bold"></div>  
</div>
 <script>
// setting up variables
var site, salt;
var text, password;
// The function to run all the useful code
function generate(){
    //Step 1
site = document.getElementById('site_url').value;
    //Step 2
salt = document.getElementById('keyword').value;
    //Step 3
text = site + salt + 'Practicum Rules';
    //Step 4
password = md5(text);
    //Step 5
document.getElementById('pass_text').innerHTML=password;
}
</script>
</body>
</html>
    それを保存し、あなたの秘密の単語とサイトのURLを入力し、キーを押して生成を押します.ああ、あなた自身がパスワードジェネレータを得た.おめでとう!

    次のことは次のようになります。

  • あなたはMD 5アルゴリズムを何度も実行することによって暗号化fancierを作ることができます.
  • は、大文字と小文字で動作し、生成されたパスワードに余分な文字を追加できます.
  • あなたはそれがより扱いやすいように9 - 12文字にパスワードを短縮することができます.

    • あなたがこれのようなより多くのことを学びたいならば、Practicumでウェブ開発で我々のコースをチェックしてください.無料レッスン20時間🚀 また、私はいつもベータテスターを探しているので、興味のあるメールを私に撮影!
    RecyclerView の要素を循環させる
    ルータの上でどのようにUディスク、ハードディスクをフォーマットします