５. Koa2でWebページを作成しよう　〜アカウント登録〜

CREATEDATABASEkoa2_test;USEkoa2_test;CREATETABLEkoa2_test.user(user_idINTAUTO_INCREMENTPRIMARYKEY,user_nameVARCHAR(20)NOTNULL,passwordVARCHAR(255)NOTNULL);

constmysql=require('mysql2/promise');constconfig=require('../config.json');constconnection=mysql.createPool(config.db);module.exports=connection;

{"db":{"host":"localhost","port":3306,"user":"root","password":"","database":"koa2_test"}}

<h1>アカウント登録</h1>
<form action="signup" method="post">
   USER NAME <input type="text" name="name"><br>
   PASSWORD <input type="password" name="password"><br>
   <input type="submit" value="登録"><br>
</form>

constRouter=require('koa-router');constrouter=newRouter();constconnection=require('../app/db');router.get('/signup',async(ctx)=>{awaitctx.render('signup');});router.post('/signup',async(ctx)=>{// POSTパラメータを取得letuserName=ctx.request.body['name'];letpassword=ctx.request.body['password'];// DBにアカウント情報を登録// SQL文中の ? はプレースホルダーというもので、ここに後から値を割り当て(バインド)します。// ここでは、insert文のuser_nameとpasswordに当たる箇所を ? としており、// query()関数の第二引数として配列の形で、バインド値を渡しています。letsignupSQL='INSERT INTO user (user_name, password) VALUES (?, ?)';awaitconnection.query(signupSQL,[userName,password]);awaitctx.render('signup');});module.exports=router;

constsignupRouter=require('./router/signup');app.use(signupRouter.routes());app.use(signupRouter.allowedMethods());

constRouter=require('koa-router');constrouter=newRouter();constconnection=require('../app/db');constbcrypt=require('bcrypt');router.get('/signup',async(ctx)=>{awaitctx.render('signup');});router.post('/signup',async(ctx)=>{// POSTパラメータを取得letuserName=ctx.request.body['name'];letpassword=ctx.request.body['password'];//パスワードをハッシュ化constsalt=bcrypt.genSaltSync();consthashPassword=bcrypt.hashSync(password,salt);// DBにアカウント情報を登録letsignupSQL='INSERT INTO user VALUES (0, ?, ?)';awaitconnection.query(signupSQL,[userName,hashPassword]);awaitctx.render('signup');});module.exports=router;

<h1>ログイン</h1>
<form action="login" method="post">
    USER NAME <input type="text" name="name" placeholder="userと入力"><br>
    PASSWORD <input type="password" name="password" placeholder="userと入力"><br>
    <input type="submit" value="ログイン"><br>
</form>

<a href="signup">アカウント登録</a>

<!-- この部分でログイン結果を表示するようにjs側で処理を書いていきます。 -->
<% if(typeof loginResult !== "undefined"){ %>
    <br>
    <%= loginResult %>
<% } %>

constRouter=require('koa-router');constrouter=newRouter();constconnection=require('../app/db');constbcrypt=require('bcrypt')router.get('/login',async(ctx)=>{awaitctx.render('login');});router.post('/login',async(ctx)=>{// POSTパラメータを取得letuserName=ctx.request.body['name'];letpassword=ctx.request.body['password'];// DBからuserNameが一致するデータを検索letloginSQL='SELECT user_id, password FROM user WHERE user_name = ?';let[queryResult]=awaitconnection.query(loginSQL,[userName]);// 入力されたパスワードとDBに保存されているハッシュ化されたパスワードを比較letloginResult='ログイン失敗';for(letrowofqueryResult){if(bcrypt.compareSync(password,row['password'])){loginResult='ログイン成功';}}awaitctx.render('login',{loginResult:loginResult});});module.exports=router;

constloginRouter=require('./router/login');app.use(loginRouter.routes());app.use(loginRouter.allowedMethods());