６. Koa2を使ってWebページを作成しよう ~validatonで検証~

createtablekoa2_test.validate_user(user_idintauto_incrementprimarykey,user_namevarchar(20)notnull,passwordvarchar(60)notnull,mailvarchar(255)notnull);

constRouter=require('koa-router');constrouter=newRouter();constconnection=require('../app/db');constbcrypt=require('bcrypt');constvalidator=require('validatorjs');router.get('/validator-signup',async(ctx)=>{awaitctx.render('validator-signup');});router.post('/validator-signup',async(ctx)=>{// POSTパラメータを取得letuserName=ctx.request.body['name'];letpassword=ctx.request.body['password'];letmail=ctx.request.body['mail'];// 入力値の検証letvalidationResult=awaitvalidation([userName,password,mail]);// 入力値拒否時、登録処理を行わずにエラーメッセージを表示するif(validationResult.result===false){awaitctx.render('validator-signup',validationResult);}else{// パスワードをハッシュ化constsalt=bcrypt.genSaltSync();consthashPassword=bcrypt.hashSync(password,salt);// DBにアカウント情報を登録letsignupSQL='INSERT INTO validate_user (user_name, password, mail) VALUES (?, ?, ?)';awaitconnection.query(signupSQL,[userName,hashPassword,mail]);awaitctx.render('validator-signup');}});module.exports=router;

asyncfunctionvalidation(data){// ユーザーの入力値をvalidatorjsへの入力形式である連想配列に変換。// ここで指定しているkey値がrulesやerrorMessageの条件部分でも利用される。letrequests={userName:data[0],password:data[1],mail:data[2],}// それぞれの値に対して掛ける制約を指定している。// required: 文字列が0文字でないことを確認// max: 最大文字数以下であることを確認// email: メールの形式であることを確認letrules={userName:'required|max:20',password:'required|max:128',mail:'required|max:255|email',};// '条件.検証項目'の形で、検証項目が条件を満たしていない場合の// エラーメッセージを指定している。// ここで指定していないエラーについては、// デフォルトで設定されている英語のメッセージが返される。leterrorMessage={'required.userName':'USER NAMEは必須項目です','required.password':'PASSWORDは必須項目です','required.mail':'MAILは必須項目です','max.userName':'USER NAMEは20文字以下で入力して下さい','max.password':'PASSWORDは128文字以下で入力して下さい','max.mail':'MAILは255文字以下で入力して下さい','email.mail':'MAILはメールアドレスの形式で入力して下さい'}// validator(検証する値, 検証する条件, 拒否時のメッセージ) の形で、// validatorのインスタンスを生成。letsignupValidator=newvalidator(requests,rules,errorMessage);letresult={error:{},result:false};// 値の検証を実行して、成功時とエラー時で処理を振り分ける。// checkAsync() の第一引数は成功時の関数を、第二引数は失敗時の関数を指定する。awaitsignupValidator.checkAsync(()=>{// Success時の処理result.result=true;},()=>{// Error時の処理result.result=false;// errors.first(‘userName’)では、userNameにエラーが発生している場合、// 発生したエラーに応じて、validatorインスタンス生成時に// 第三引数で指定したメッセージを取得している。// 取得した値はresult変数に格納して、関数の最後でreturnしている。if(signupValidator.errors.first('userName')){result.error.userName=signupValidator.errors.first('userName');}if(signupValidator.errors.first('password')){result.error.password=signupValidator.errors.first('password');}if(signupValidator.errors.first('mail')){result.error.mail=signupValidator.errors.first('mail');}})returnresult;}

<h1>アカウント登録</h1>
<% if(typeof error !== 'undefined'){ %>
    <% for(let key in error) { %>
    <p style="color: red"><%= error[key] %></p>
    <% } %>
<% } %>
<form action="validator-signup" method="post">
    USER NAME <input type="text" name="name"><br>
    PASSWORD <input type="password" name="password"><br>
    MAIL <input type="email" name="mail"><br>
    <input type="submit" value="登録"><br>
</form>

constvalidatorSignupRouter=require('./router/validator-signup');app.use(validatorSignupRouter.routes());app.use(validatorSignupRouter.allowedMethods());

<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>

<!--validator-signupに遷移するように修正-->
<a href="validator-signup">アカウント登録</a>
<% if(typeof loginResult !== "undefined"){ %>
   <br><br>
   <%= loginResult %>
   <br><br>
   <a href="index">トップへ</a>
<% } %>

// DBからuserNameが一致するデータを検索letloginSQL='SELECT user_id, password, user_name FROM validate_user WHERE user_name = ?';