0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

初めて書いたサーバーサイド側の処理で、Node.jsを使いログイン処理を実装してみました。

Last updated at Posted at 2020-08-07

生JS(EC6)を3ヶ月ほど叩き込んだ後、HTMLとCSSを一通り学び、Node.jsでログイン処理を実装してみました。

【実装環境】

  • Node.jsのStable版をインストール
  • 実装が便利になるということで、Expressを導入。
  • Vagrant上で8001のポートを空けて作業

Nodeでログイン処理を行うにあたり、
機能を追加した結果が以下の通り。

  "dependencies": {
    "body-parser": "^1.19.0",
    "ejs": "^3.1.3",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "request": "^2.88.2"
    }

Step1

ID、パスワードが入力され、POSTされるまで

処理のスクリプトを書いているファイル内の処理。
ブラウザで/loginが叩かれた際、login.htmlをレンダリング。

// /loginが開かれた場合の処理
app.get('/login', function (req, res) {
  res.render('login.html', {err:""});
  req.session.name = "";
})

この画面で「ログイン」ボタンを押すと、/loginSendにPOSTする。
スクリーンショット 2020-08-07 8.43.06.png

<form action="/loginSend" method="POST">
    メールアドレス:<input type="text" name="mail" >
    <br>
    パスワード    :<input type="text" name="password">
    <br>
    <br>
    <input type="submit" value="ログイン" >
    </form>

Step2

POSTされたデータを処理する

・ここで入力されたID/パスワードを、データベースに取得する
(その際にパスワードはハッシュ化してID/ハッシュ化されたパスワードの組み合わせを取得する)
・正常なログインができた際、セッション情報を付与する。

    //アイパス一致すれば、Main画面をレンダリングする。
    if (result["結果"] === "OK"){
      res.render('main.html');

      req.session.mail = result["user_id"];
      req.session.name = result["user_name"];
    }

執筆中..

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?