EWD 3トレーニングコース#10 ewd-xpressのSessionとユーザー認証

1. EWD 3
トレーニング・コース #10
ewd-xpressのSessionとユーザー認証
M/Gateway Developments Ltd.
Rob Tweed
訳: 日本ダイナシステム株式会社 嶋 芳成
GT.M版編集: 澤田 潔
※ 本稿オリジナルはCache’向けとして編纂

2. Session とユーザー認証
• ２つ別々の事柄があります
• アプリケーションが登録されると Session が生成され
ます
• ブラウザ／クライアントに結びつけられます
• ユーザーは特定されません
• ユーザー／個人との連結は「認証」によります
• 通常は、ユーザー名とパスワードを入力することで認証が与
えられます
2016/9/30 EWD 3 トレーニング・コース #10 2

3. ユーザー認証
• 対話型のアプリケーションでは、ログインの書式に加え
てログイン・ボタンを設けるでしょう
• ログイン・ボタンをクリックすると、それが引き金になって
書式のフィールドの値からユーザー名とパスワードを取り
出してメッセージとして送ります
2016/9/30 EWD 3 トレーニング・コース #10 3

4. ユーザー認証
var messageObj = {
type: ‘login’,
params: {
username: $(‘#username’).val(),
password: $(‘#password’).val()
}
};
EWD.send(messageObj, function(responseObj) {
// ユーザーが正しい資格を持っているかどうか
// そのどちらの状況にも対応出来る処理をします
});
2016/9/30 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/30 EWD 3 トレーニング・コース #10 5

6. ユーザー認証
• ブラウザでエラー応答メッセージを処理することについて
は後で解説します
• 今は、ログインが成功したものとして考えます
• ユーザー・インターフェースを変更します
• ログイン・フォームを消去します
• ユーザーの目的ページとメイン・メニューに入ります
2016/9/30 EWD 3 トレーニング・コース #10 6

7. ユーザー認証
• ユーザーは、バックエンドの情報と対話するためにメッ
セージを送信することができます
• 可能性としてはユーザーのプロフィールや役割によって何らか
の制限があるかもしれません
• しかし、悪意のあるユーザーがログインせずに
JavaScriptコンソールで、これらのメッセージを送ろうと
したときにそれを阻止するにはどうしたら良いでしょうか
• 技術的には何もありません
2016/9/30 EWD 3 トレーニング・コース #10 7

8. ユーザー認証
• ユーザーは、バックエンドの情報と対話するためにメッ
セージを送信することができます
• 可能性としてはユーザーのプロフィールや役割によって何らか
の制限があるかもしれません
• しかし、悪意のあるユーザーがログインせずに
JavaScriptコンソールで、これらのメッセージを送ろうと
したときにそれを阻止するにはどうしたら良いでしょうか
• 技術的には何もありません
• 従って、これが認証の目的です
• Session の特別な真偽値のプロパティ: authenticated
2016/9/30 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/30 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/30 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/30 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/30 EWD 3 トレーニング・コース #10 12

13. ログ・アウト
• 普通は不要です
• もしユーザーがアプリケーションを十分長時間使わなければ、
Session は時間切れになります
• エラー・メッセージが返されます
• WebSocket の接続は切断されます
• ソケットの接続切断に対してハンドラーを用意することもできます
• ewd-session は、結局自動的に、そのユーザーに対する
Session グローバルを消去します
2016/9/30 EWD 3 トレーニング・コース #10 13

14. 実行してみましょう
2016/9/30 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/30 EWD 3 トレーニング・コース #10 15
Socketが切断された場合のハンドラーを追加します

16. 実行してみましょう
2016/9/30 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/30 EWD 3 トレーニング・コース #10 17

18. マニュアルでsocket接続を切断する
• 明確なログアウトを必要とする場合
• マニュアルでWebSocket接続を切断します
• app.js 内に次のコードを入れます
EWD.disconnectSocket();
• これは、socketDisconected イベントでも起動されます
2016/9/30 EWD 3 トレーニング・コース #10 18