Download to read offline
Uploaded byKiyoshi Sawada
EWD 3トレーニングコース#10 ewd-xpressのSessionとユーザー認証
EWD 3トレーニングコース#10 ewd-xpressのSessionとユーザー認証
More Related Content
Similar to EWD 3トレーニングコース#10 ewd-xpressのSessionとユーザー認証
EWD 3トレーニングコース#10 ewd-xpressのSessionとユーザー認証
- 1. EWD 3 トレーニング・コース #10 ewd-xpressのSessionとユーザー認証 M/GatewayDevelopments Ltd. Rob Tweed 訳: 日本ダイナシステム株式会社 嶋 芳成
- 2. Session とユーザー認証 • ２つ別々の事柄があります •アプリケーションが登録されると Session が生成され ます • ブラウザ／クライアントに結びつけられます • ユーザーは特定されません • ユーザー／個人との連結は「認証」によります • 通常は、ユーザー名とパスワードを入力することで認証が与 えられます 2016/9/5 EWD 3 トレーニング・コース #10 2
- 3.
- 4. ユーザー認証 var messageObj ={ type: ‘login’, params: { username: $(‘#username’).val(), password: $(‘#password’).val() } }; EWD.send(messageObj, function(responseObj) { // ユーザーが正しい資格を持っているかどうか // そのどちらの状況にも対応出来る処理をします }); 2016/9/5 EWD 3 トレーニング・コース #10 4
- 5. ユーザー認証 • バックエンド・ハンドラーで、 login: function(messageobj,session,send,finished){ var username = messageObj.params.username; if (username === ‘’) { finished({error: ‘You must enter a username’); return; } var password = messageObj.params.password; if (password === ‘’) { finished({error: ‘You must enter a password’); return; } //認証データベースのレコードを参照してユーザー名とパスワードを検定する var status = checkLogin(username, password); //これで良い if (status.ok) { finished({ok:true}); } else { //ログインできなかった理由を示すエラー・メッセージ文字列を返す finished({error: status.error}); } } 2016/9/5 EWD 3 トレーニング・コース #10 5
- 6. ユーザー認証 • ブラウザでエラー応答メッセージを処理することについて は後で解説します • 今は、ログインが成功したものとして考えます •ユーザー・インターフェースを変更します • ログイン・フォームを消去します • ユーザーの目的ページとメイン・メニューに入ります 2016/9/5 EWD 3 トレーニング・コース #10 6
- 7. ユーザー人使用 • ユーザーは、バックエンドの情報と対話するためにメッ セージを送信することができます • 可能性としてはユーザーのプロフィールや役割によって何らか の制限があるかもしれません •しかし、悪意のあるユーザーがログインせずに JavaScriptコンソールで、これらのメッセージを送ろうと したときにそれを阻止するにはどうしたら良いでしょうか • 技術的には何もありません 2016/9/5 EWD 3 トレーニング・コース #10 7
- 8. ユーザー人使用 • ユーザーは、バックエンドの情報と対話するためにメッ セージを送信することができます • 可能性としてはユーザーのプロフィールや役割によって何らか の制限があるかもしれません •しかし、悪意のあるユーザーがログインせずに JavaScriptコンソールで、これらのメッセージを送ろうと したときにそれを阻止するにはどうしたら良いでしょうか • 技術的には何もありません • 従って、これが認証の目的です • Session の特別な真偽値のプロパティ: authenticated 2016/9/5 EWD 3 トレーニング・コース #10 8
- 9. ユーザー認証 • バックエンドのハンドラーで、 login: function(messageobj,session,send,finished){ var username = messageObj.params.username; if (username === ‘’) { finished({error: ‘You must enter a username’); return; } var password = messageObj.params.password; if (password === ‘’) { finished({error: ‘You must enter a password’); return; } //認証データベースのレコードを参照してユーザー名とパスワードを検定する var status = checkLogin(username, password); //これで良い if (status.ok) { session.authenticated = true; finished({ok:true}); } else { finished({error: status.error}); //ログインできなかった理由を示すエラー・メッセージ文字列を返す } } 2016/9/5 EWD 3 トレーニング・コース #10 9
- 10. ユーザー認証 • 他のバックエンド・ハンドラーでは、 someType: function(messageObj,session,send,finished){ if (!session.authenticated) { finished({error: ‘You do not have access to this message type’}); return; } // 認証されたユーザーのみについてメッセージを処理する } 2016/9/5 EWD 3 トレーニング・コース #10 10
- 11. ユーザー認証 • 他のバックエンド・ハンドラーでは、 someType: function(messageObj,session,send,finished){ if (!session.authenticated) { finished({error: ‘You do not have access to this message type’}); return; } // 認証されたユーザーのみについてメッセージを処理する } 2016/9/5 EWD 3 トレーニング・コース #10 11 これによってこのアプリケーションのバックエンド・メソッドは、ログインせず にハッキングすることから保護できるようになりました
- 12. ユーザー認証 • 再認証することを防止するのは良い考えです login: function(messageobj,session,send,finished){ if (session.authenticated) { finished({eror: ‘You are already logged in’}); return; } var username = messageObj.params.username; if (username === ‘’) { finished({error: ‘You must enter a username’); return; } var password = messageObj.params.password; if (password === ‘’) { finished({error: ‘You must enter a password’); return; } //認証データベースのレコードを参照してユーザー名とパスワードを検定する var status = checkLogin(username, password); //これで良い if (status.ok) { session.authenticated = true; finished({ok:true}); } else { finished({error: status.error}); //ログインできなかった理由を示すエラー・メッセージ文字列を返す } } 2016/9/5 EWD 3 トレーニング・コース #10 12
- 13. ログ・アウト • 普通は不要です • もしユーザーがアプリケーションを十分長時間使わなければ、 Sessionは時間切れになります • エラー・メッセージが返されます • WebSocket の接続は切断されます • ソケットの接続切断に対してハンドラーを用意することもできます • ewd-session は、結局自動的に、そのユーザーに対する Session グローバルを消去します 2016/9/5 EWD 3 トレーニング・コース #10 13
- 14. 実行してみましょう 2016/9/5 EWD 3トレーニング・コース #10 14
- 15. app.js を編集する $(document).ready(function() { EWD.log= true; EWD.on(‘ewd-registered’, function() { EWD.on(‘intermediate’, function(responseObj) { $(‘#content’).text(responseObj.message.date); }); EWD.on(‘socketDisconnected’, function() { $(‘#content’).text(‘You have been logged out’); $(‘#testBtn’).hide(); }); $(‘#testBtn’).on(‘click’, function(e) { var message = {type: ‘testButton’); EWD.send(message, function(messageObj) { $(‘#content’).append(‘<br />’ + messageObj.message.ok); }); }); }); EWD.start(‘demo1’, $, io); }); 2016/9/5 EWD 3 トレーニング・コース #10 15 Socketが切断された場合のハンドラーを追加します
- 16. 実行してみましょう 2016/9/5 EWD 3トレーニング・コース #10 16
- 17. 新しいセッションを再始動する $(document).ready(function() { EWD.log =true; EWD.on(‘ewd-registered’, function() { EWD.on(‘intermediate’, function(responseObj) { $(‘#content’).text(responseObj.message.date); }); EWD.on(‘socketDisconnected’, function() { $(‘#content’).text(‘You have been logged out’); $(‘#testBtn’).hide(); setTimeout (function() { location.reload(); }, 1000); }); $(‘#testBtn’).on(‘click’, function(e) { var message = {type: ‘testButton’); EWD.send(message, function(messageObj) { $(‘#content’).append(‘<br />’ + messageObj.message.ok); }); }); }); EWD.start(‘demo1’, $, io); }); 2016/9/5 EWD 3 トレーニング・コース #10 17
- 18. マニュアルでsocket接続を切断する • 明確なログアウトを必要とする場合 • マニュアルでWebSocket接続を切断します •app.js 内に次のコードを入れます EWD.disconnectSocket(); • これは、socketDisconected イベントでも起動されます 2016/9/5 EWD 3 トレーニング・コース #10 18