質問: JavaScriptの知識は全くないのですが、ログインシステムを作ってみたいなと思い 何でもいいのでパスワード保護のページを作りたい!! でGithub Pagesならどうせ丸見え。という結果になりましたが、せっかくならできる限り頑張ってみたいなと思いました。 要するに、phpも動かない環境においてパスワード制限をかけたいときに、JavaScriptのみでできる限り安全性の高いログインシステムを作りたいということです。 もしできたらいいなと思うことは以下の通りです。 ・ユーザー名・パスワードによるログイン ・複数のユーザー名で使用可能 ・Cookieを利用して自動ログイン ・Cookieの使用の許可がなくてもログイン可能 ・jQueryを使用しせず、パスワードを暗号化 何の知識もない上にこのようなことができるのかもわからない自分ですが、もし、暇でお力を貸していただけるようでしたら、サンプルコードと一緒に教えてくださると助かります。 色々調べたサイト JavaScriptのみでログイン認証するプラグインを作ってみた javascriptでそこそこ強固なログインページを作る
回答: ### アルゴリズム1 暗号化手順。 1. 「ユーザID」「パスワード」に空白文字を含められない文法とする 2. 「ユーザID = foo」「パスワード = bar」だった場合、「foo bar」をキーとして「HTMLタグ断片文字列」「foo bar」をそれぞれ暗号化する 3. ユーザが増える度に 2. の作業を実行し、JSON化した配列に格納する 複合化手順。 1. 「ユーザID」「パスワード」をフォームから受け取る 2. 暗号化文字列を格納した配列から「ユーザID パスワード」をキーにして複合化する 3. 「ユーザID = foo」「パスワード = bar」ならば、「foo bar」が複合化されたら成功、それ以外が複合化されたら失敗 4. 3. で成功するまで配列内の暗号化文字列に複合化を試み、成功したら「HTMLタグ断片文字列の暗号化文字列」を複合化 5. `docunent.body.insertAdjacentHTML('beforeend', decodeHtmlTagString)` ### アルゴリズム2 暗号化手順。 1. 「ユーザID」「パスワード」に空白文字を含められない文法とする 2. 「ユーザID = foo」「パスワード = bar」、「HTMLタグ断片文字列の暗号化キー = piyo」とする 3. HTMLタグ断片文字列を `piyo` をキーとして暗号化する 4. `"foo bar\npiyo"` を「foo bar」をキーとして暗号化する 複合化手順。 1. 「ユーザID = foo」「パスワード = bar」をフォームから受け取る 2. 暗号化文字列を格納した配列から「foo bar」をキーにして「ユーザID パスワード\nHTMLタグ文字列の暗号化キーの暗号化データ」の配列を順番に複合化していく 3. `/^foo bar\n/.test(encodeString) === true` ならば成功、`false` ならば失敗 4. 3. で成功するまで配列内の暗号化文字列に複合化を試みる 5. 成功したら「HTMLタグ断片文字列の暗号化文字列」を「3. の `\n` 以降の文字列」をキーとして複合化 6. `docunent.body.insertAdjacentHTML('beforeend', decodeHtmlTagString)` ### 暗号化の実装 * 開発などブログ \| HiBARA SOFTWARE * crypto-js - Google Code Archive * Web Cryptography API - W3C ### 所感 試みとしては興味深いですが、JavaScriptの事を何も知らない人が手を出すには敷居が高すぎると思います。 Re: 2001Y さん