第08回Network講座2019

Transcript

1. ネットワークチーム 第８回 2019 北海道科学大学 電子計算機研究部
2. 実践編 PW強度測定サービス
3. 実践編 本日の目的 これまでの知識を生かして パスワードの強度を測定するサービスを 作ってみよう！ 3
4. 使うもの ⚫ zxcvbn Dropboxが提供している パスワードの強度を測定するための JavaScript ライブラリ ⚫ HTML・CSS・JS の知識 4
5. 構成 5 タイトル フォーム 結果表示 ~~~~ ~~~~ Webページ index.html index.css zxcvbn.js script.js
6. 構成 6 要件定義 ⚫ 文字を入力する度に リアルタイムで結果を表示する ⚫ 結果は動的に生成する ⚫ ある程度の見栄えを確保する
7. 制作
8. 準備 zxcvbnの入手 1. https://github.com/dropbox/zxcvbn#manual- installation へ飛び、zxcvbn.jsを保存 8
9. 準備 ファイルの作成 2. 以下のような階層でファイルを作成 pw -- index.html css -- index.css js -- zxcvbn.js -- script.js 9
10. HTML HTMLを以下のように記述 10
11. HTMLの解説 22行目 onKeyUp=“check(this)” キーが上がったら つまり 文字が入力される度に 関数check()を呼び出す。 11
12. https://github.com/dropbox/zxcvbn#usage を読んでみる 12 zxcvbn(password, user_inputs=[]) zxcvbn() takes one required argument, a password, and returns a result object with several properties:
13. コンソールでテスト HTMLをブラウザで開いて デベロッパーツールを起動 コンソールに以下を入力 13 let pw = zxcvbn("123456"); console.log(pw);
14. コンソールでテスト 方針 ⚫ zxcvbn() の引数にパスワードを入れる - フォームへの入力を取得する必要がある ⚫ 上記で得られたオブジェクトを格納する ⚫ オブジェクトのパラメーターを結果として表示する 14
15. スクリプトを作ろう script.js を以下のように記述 15
16. スクリプトを作ろう index.html をブラウザで開く 16
17. スタイルを作ろう index.cssを以下のように記述 17
18. スタイルを作ろう 完成 18
19. 参考 ⚫ GitHub - dropbox/zxcvbn: Low-Budget Password Strength Estimation https://github.com/dropbox/zxcvbn 19
20. 今回の講座はここまで お疲れ様でした