JavaScriptの知識は全くないのですが、ログインシステムを作ってみたいなと思い
でGithub Pagesならどうせ丸見え。という結果になりましたが、せっかくならできる限り頑張ってみたいなと思いました。
要するに、phpも動かない環境においてパスワード制限をかけたいときに、JavaScriptのみでできる限り安全性の高いログインシステムを作りたいということです。
もしできたらいいなと思うことは以下の通りです。
・ユーザー名・パスワードによるログイン
・複数のユーザー名で使用可能
・Cookieを利用して自動ログイン
・Cookieの使用の許可がなくてもログイン可能
・jQueryを使用しせず、パスワードを暗号化
何の知識もない上にこのようなことができるのかもわからない自分ですが、もし、暇でお力を貸していただけるようでしたら、サンプルコードと一緒に教えてくださると助かります。
色々調べたサイト
JavaScriptのみでログイン認証するプラグインを作ってみた
javascriptでそこそこ強固なログインページを作る
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答7件
0
JavaScript だけでは、見た目だけはログイン画面ぽいものは作れるけど、 所詮はフェイク なんで、どうせやるなら、サーバーサイド言語でしっかりしたものを勉強する方がよっぽど役に立つと思います。
質問文に紹介されたページの方法でも、直接URLを叩けば、ログインできてしまうんですから。
PHPでログイン機能を実装するチュートリアル #1
PHPでログイン機能を実装するチュートリアル #2
PHPでログイン機能を実装するチュートリアル #3
PHPでログイン機能を実装するチュートリアル #4
PHPでログイン機能を実装するチュートリアル #4-2
PHPでログイン機能を実装するチュートリアル #5
PHPでログイン機能を実装するチュートリアル #6
PHPでログイン機能を実装するチュートリアル #7
PHPでログイン機能を実装するチュートリアル #8
PHPでログイン機能を実装するチュートリアル #9
PHPでログイン機能を実装するチュートリアル #10
PHPでログイン機能を実装するチュートリアル #11
投稿2017/03/14 15:11
退会済みユーザー
総合スコア0
0
こんな感じでできそう
用意するもの
- データ(ログインしたら表示されるHTMLの断片とか)
- ログイン情報(ユーザー名とパスワード)
- HASH(SHA256とか)と暗号(AESとか)が使えるPure JavaScriptなライブラリ
- 暗号論的乱数を生成し、暗号鍵とする。
- 暗号鍵を使ってデータをAES等で暗号化、できたものを暗号データ
- ログイン情報を次のように加工する。
パスワードは単純に確認用でUNIXのcryptっぽくランダムsaltでハッシュ化
hash(パスワード+ランダムな文字列) ^ 何らかの文字列 = 暗号鍵 になる「ランダムな文字列」と「何らかの文字列」の組合せ
復号化するときは
- ログインが正しいか、ハッシュ化したパスワードで確認
- 正しければ、「ランダムな文字列」と「何らかの文字列」で暗号鍵を復元
- 暗号鍵で暗号データから元のデータを復元
- 元のデータをレンダリング
時間があったら、サンプルを作ってみたいと思います。セキュリティ的な抜けがあればご指摘下さい。
投稿2017/03/14 22:33
総合スコア21733
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/15 12:27
退会済みユーザー
2017/03/15 13:56
2017/03/15 19:58
退会済みユーザー
2017/03/16 00:32
2017/03/19 13:05
2017/03/19 15:07
0
どうしても「JavaScriptだけで」コンテンツ保護を行いたいとすれば、2つ方法が考えられます。
- 本来見せたいコンテンツをAESなどで暗号化しておいて、復号化できた場合にのみ表示する(もっとも、使えるのが「特定のパスワード」に限られるので、柔軟性はほぼありません)
- Node.jsを使う(Node.jsはサーバサイドJavaScriptなので、サーバ側で実行するための準備が必要となります)
投稿2017/03/14 22:23
総合スコア145121
0
アルゴリズム1
暗号化手順。
- 「ユーザID」「パスワード」に空白文字を含められない文法とする
- 「ユーザID = foo」「パスワード = bar」だった場合、「foo bar」をキーとして「HTMLタグ断片文字列」「foo bar」をそれぞれ暗号化する
- ユーザが増える度に 2. の作業を実行し、JSON化した配列に格納する
複合化手順。
- 「ユーザID」「パスワード」をフォームから受け取る
- 暗号化文字列を格納した配列から「ユーザID パスワード」をキーにして複合化する
- 「ユーザID = foo」「パスワード = bar」ならば、「foo bar」が複合化されたら成功、それ以外が複合化されたら失敗
-
- で成功するまで配列内の暗号化文字列に複合化を試み、成功したら「HTMLタグ断片文字列の暗号化文字列」を複合化
docunent.body.insertAdjacentHTML('beforeend', decodeHtmlTagString)
アルゴリズム2
暗号化手順。
- 「ユーザID」「パスワード」に空白文字を含められない文法とする
- 「ユーザID = foo」「パスワード = bar」、「HTMLタグ断片文字列の暗号化キー = piyo」とする
- HTMLタグ断片文字列を
piyo
をキーとして暗号化する "foo bar\npiyo"
を「foo bar」をキーとして暗号化する
複合化手順。
- 「ユーザID = foo」「パスワード = bar」をフォームから受け取る
- 暗号化文字列を格納した配列から「foo bar」をキーにして「ユーザID パスワード\nHTMLタグ文字列の暗号化キーの暗号化データ」の配列を順番に複合化していく
/^foo bar\n/.test(encodeString) === true
ならば成功、false
ならば失敗-
- で成功するまで配列内の暗号化文字列に複合化を試みる
- 成功したら「HTMLタグ断片文字列の暗号化文字列」を「3. の
\n
以降の文字列」をキーとして複合化 docunent.body.insertAdjacentHTML('beforeend', decodeHtmlTagString)
暗号化の実装
所感
試みとしては興味深いですが、JavaScriptの事を何も知らない人が手を出すには敷居が高すぎると思います。
Re: 2001Y さん
投稿2017/03/15 13:57
編集2017/03/15 14:01総合スコア18156
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/03/15 14:30
2017/03/15 14:45
退会済みユーザー
2017/03/15 14:51
2017/03/15 15:02 編集
2017/03/19 13:25
0
-
素朴な疑問なんですが、.htpasswdで、全Webページ「ログイン・パスワード」化出来るのに、なぜ、そこまでしてJavaScriptに拘られるのでしょうか?
-
Github Pagesならどうせ丸見え
、、、OSSをグローバルに共有思想なので、逆に丸見え
じゃないと。。。 -
OSSを閉じて共有したいのならば、別にGithubではくsvnで良いと思います。
追記:
Githubのクーロンにgitbucketというものが有る様です。
~/.gitbucket
に.htpasswdを置けば制限が掛かるか、後ほど、検証して見ようと思います。
投稿2017/03/14 23:32
編集2017/03/14 23:52退会済みユーザー
総合スコア0
0
自己解決
丁寧に回答してくださった皆様。ありがとうございました。
そして、投げやりな回答におつきあいいただきありがとうございました。
皆様の回答を読ませていただいても、圧倒的に自分の技術力が足りないのできちんと学び直してから、再度挑戦して見たいと思います。
その時は皆様の貴重なご意見を参考にさせていただきたいと思います。
どなたをベストアンサーにすべきか自分で判断ができなかったため、自己解決とさせていただきました。今回は適当にパスワードもどきを一応作っておこうかと思います。
投稿2017/03/19 13:29
総合スコア83
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/19 12:58