第08回Web講座2018

Transcript

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