joho2_login
改造のヒント：ユーザを認証する
サーバ側のadd_chat2, read_chat2，クライアント側の Main2を改造して，ログインしてから書き込みを行うようにしてみましょう．
データファイルの仕様
- user/userlist.txt に，ユーザ名とパスワードを記録します．この例ではユーザyamadaはyamaというパスワードでログインする必要があります．
yamada yama tanaka tana
↑このテキストファイルを作成して，「ファイル」→「素材管理」からアップロードしておきましょう．
サーバ側のプログラム
ログインの処理1 ユーザとパスワードの確認
サーバ側のプロジェクトに新しくloginというファイルを作成します．
- login（Python）
f=open("user/userlist.txt","r") username=input() password=input() ok=False for line in f: line=line.strip() u,p=line.split("\t") if username==u and password==p: ok=True f.close() if ok: print("Login OK") else: print("Login Failed")
実行して，
yamada yama
などの入力を行うとLogin OKと表示されることを確認し，
それ以外の組み合わせ，例えば
yamada hoge
などではLogin Failedと表示されることを確認してみよう．
↑テストの仕方を生徒に考えさせるのもよいと思います．
ログインの処理2 ログインしたユーザを覚える．
- ログインしたユーザを一時的に覚えるために，セッション変数というものを使います．
- セッション変数は，ブラウザごとに値を保存して，あとで読み出す仕組みです．
- 値を保存するときは「名前」と「値」のペアを用います．
- 値を読み出すときは「名前」を指定して，それに関連付けられた「値」を取得します．
- Bit ArrowのPythonでは，sessionというBit Arrow独自のパッケージを使うことができます．
- sesison.set(名前, 値)：保存
- sesison.get(名前)：読み出し
- session.has(名前)：その名前の値が保存されているか
実際にsessionを使って，さきほどのloginのプログラムを変更し，ログインに成功した場合はセッション変数に値を書き込むようにします
- login（Python）
import session #sessionパッケージを使う f=open("user/userlist.txt","r") username=input() password=input() ok=False for line in f: line=line.strip() u,p=line.split("\t") if username==u and password==p: session.set("user",u)#セッション変数userにユーザ名を書き込む ok=True f.close() if ok: print("Login OK") else: print("Failed")
ログインしているユーザ名を表示する
current_userというファイルを作成します．
- current_user（Python）
import session#sessionを使う． if session.has("user"):#userという名前のセッション変数が書き込まれていたら． name=session.get("user")#その値を取得する print(name) else: print("Not logged in")
ログインしたユーザで書き込みを行う．
add_chat2などを改造して，ユーザ名を毎回入力するのではなく，セッション変数から読み出して書き込みに使うようにします．
- add_char2（Python）
import session#sessionを使う． name=session.get("user") #inputではなく，セッション変数からユーザ名を読み出す． content=input() f=open("user/chat2.txt","a") f.write(name+"\t"+content+"\n") f.close() print("Write end")
クライアント側
ログイン画面
クライアント側のプロジェクトでLoginというファイルを作成します．
ログインに成功した場合，Main2に移動するリンクが表示されます．
- Login(HTML)
<html> ユーザ名<input name="user"/><br/> パスワード<input name="password" type="password"/><br/> <button name="login">Login</button> <a href="Login.html" name="result"></a> </html> - Login(JavaScript)
serverTop="略"; loginUrl=serverTop+"login.html"; onClick("login", login); function login() { var user=getText("user"); var password=getText("password"); var result=callServer(loginUrl, user+"\n"+password); if (result.includes("OK")) { setText("result","ログイン成功"); setAttr("result","href","Main2.html"); } else { setText("result","ユーザ名かパスワードが間違っています．"); } }使用されている命令の詳細→setAttr
現在ログインしているユーザを表示する
Main2を変更します：
- Main2（HTML）
<html> <h1>掲示板</h1> <div name="currentUser"></div><!--追加--> 名前<input name="name"/><br/> 内容<input name="content"/><br/> <button name="write">Write</button> <br/> <div name="result"></div> <pre name="hist"></pre> </html>
- Main2(JavaScript)
serverTop="https://run.eplang.jp/bitarrow/fs/pub/5d9fc1ce/"; readUrl=serverTop+"read_chat2.html"; addUrl=serverTop+"add_chat2.html"; currentUserUrl=serverTop+"current_user.html";//追加 onClick("write",write); read(); function write() { setText("result","Running at Server..."); result=callServer(addUrl,getText("name")+"\n"+getText("content")); setText("result",result); read(); } function read() { var u=callServer(currentUserUrl);//追加 setText("currentUser","現在のユーザ: "+u);//追加 var r=callServer(readUrl); var lines=r.split("\n"); setText("hist",""); for (var line of lines) { var data=line.split("\t"); if (data.length<2) continue; var name=data[0]; var content=data[1]; addText("hist","名前: "+name+"<br/>"); addText("hist","内容: "+content+"<br/>"); addText("hist","<hr/>\n"); } }
書き込み時にユーザ名を入力せず，ログインしているユーザ名で書き込むようにする．
生徒に次のようなヒントを与えて，自分で作ってもらうこともできます:
- 名前の入力欄を削除します．
- write関数を変更し，名前は送信せず，書き込みだけを送信するように変更します．
変更後のwrite関数：
function write() {
setText("result","Running at Server...");
result=callServer(addUrl,getText("content"));
setText("result",result);
read();
}
