📝 今日作った

user authentication - login

stateless/session/cookie

📚 学識

user authentication

1.ログイン

昨日は勉強続きでした.
これまでに完了したpostLoginコントローラ

import bcrypt from "bcrypt";

export const postLogin = async (req, res) => {
  cont { username, password } = req.body;
  const pageTitle = "Login";
  const user = await User.findOne({ username });
  if (!user) {
    return res.render("login", { pageTitle, errorMessage: "아이디를 찾을 수 없습니다".});
  }
  const ok = await bcrypt.compare(password, user.password);
  if (!ok) {
    return res.render("login", { pageTitle, errorMessage: "비밀번호가 틀립니다."});
  }
  
  // 실제로 로그인 되도록 해야 함
  // (작성 중)
  
  return res.redirect("/");
};

ログインしようとしたユーザーが誰なのか知っています.
ユーザーが本当にログインするには、セッションとCookieを理解する必要があります.

1）セッション（セッション）

(1)ステータスなし(セッション)

サーバがブラウザの要求を受信し、応答を処理すると、サーバとブラウザはこれらの情報を完全に忘れます.
このように一度接続すると切れてしまうのが무상태(stateless)です.

(2)セッション(セッション)

したがって,サーバに誰が要求しているのかを知らせるには,ユーザがサーバに何を要求するたびに,ユーザに情報を残さなければならない.
このように、ブラウザとバックエンドの間のアクティビティを세션(session)と呼ぶことを覚えておいてください.
このため、ユーザーはログインするたびにユーザーにテキストを送信し、ユーザーはサーバに要求を送信するたびに一緒に送信します.

(3) express-session

express-sessionをインストールすると、Webサイトにアクセスするたびに、expressは自分でテキスト(セッションid)を作成してブラウザに送信し、セッションDBにもセッションオブジェクトとセッションidが保存されます.

$ npm i express-session

まず、express-sessionをインストールします.

import session from "express-session";

app.use(session({
  secret: "Hello!",
  resave: true,
  saveUninitialized: true,
}));

server.jsフォルダにexpress-sessionをインポートし、routerコードの前に初期化します.
secret値は、後で誰も知らない文字列に置き換えられます.
resaveおよびsaveunitizedオプションは、コンソールウィンドウのテキストを参照して追加されます.

(4)クッキー

❗コア❗
これで、ブラウザがサーバに要求を送信すると、サーバはブラウザにテキスト(セッションid)を送信します.
その後、localhost:4000のすべてのURLにリクエストが送信されるたびに、ブラウザはCookieからセッションIDを取得して送信します.(ブラウザによってCookieが異なります.)
これにより、サーバは、セッションIDを有するセッションオブジェクト、すなわちユーザの情報をセッションデータベースに見つけることができる.
つまり、쿠키에 있는 세션 id와 세션 DB에 있는 세션 id가 같은セッションを検索します.
サーバは、どのユーザーがどのブラウザでリクエストを送信したかを知ることができ、ユーザーに関する情報を覚えて追加することができます.

2)セッションへのユーザー情報の追加

import bcrypt from "bcrypt";

export const postLogin = async (req, res) => {
  cont { username, password } = req.body;
  const pageTitle = "Login";
  // user(username)가 존재하는지 확인
  const user = await User.findOne({ username });
  if (!user) {
    return res.render("login", { pageTitle, errorMessage: "아이디를 찾을 수 없습니다".});
  }
  // user가 입력한 password가 password의 해시 값과 일치하는지 확인
  const ok = await bcrypt.compare(password, user.password);
  if (!ok) {
    return res.render("login", { pageTitle, errorMessage: "비밀번호가 틀립니다."});
  }
  // user에 대한 정보를 세션에 추가한다
  req.session.loggedIn = true;
  req.session.user = user;
  
  // user에게 로그인에 성공했음을 알려야 한다
  // ...
  
  return res.redirect("/");
};

3）テンプレートの修正

ユーザーにログインに成功したことを通知するには、セッションベースのコンテンツをフロントに表示するようにテンプレートを変更する必要があります.
req.session.loggedInがfalseの場合base.pugファイルにはJoinとLoginのリンクが表示され、trueではJoinとLogoutのリンクが表示されます.
ただし、下記のように修正しましたが、エラーが発生しました.

if req.session.loggedIn
li
  a(href="/login") Login

これは、テンプレートがセッションにアクセスできないためのエラーです.
これはどのように修正しますか?

明日作った

課

を聞き続けます