ユーザー機能の実装

postgressにユーザー情報を保存するテーブルを作成

CREATE TABLE users (
 user_id SERIAL NOT NULL,
 user_name VARCHAR(255) NOT NULL,
 user_email VARCHAR(255) NOT NULL,
 user_password VARCHAR(255) NOT NULL,
 created_at TIMESTAMP NOT NULL,
 PRIMARY KEY (user_id)
);

誰がchannelを投稿したのか見られるように、channelとmessageのテーブルにuser_idのカラムを追加します。

/*channelテーブル*/
ALTER TABLE channel ADD COLUMN user_id INTEGER;

/*messagesテーブル*/
ALTER TABLE messages ADD COLUMN user_id INTEGER;

ユーザー登録機能

app.jsにコードを追加します。

// 中略
const message = require('./routes/message');
const signup = require('./routes/signup'); // 追加

const app = express();

// 中略
app.use('/message', message); 
app.use('/signup', signup); //追加

routes/signup.jsを作成します。

const express = require('express');
const router = express.Router();
const dayjs = require('dayjs');
const pool = require('../dbConnection');

router.get('/', (req, res, next) => {
  res.render('signup', {
    title: '新規会員登録'
  });
});

router.post('/', async (req, res, next) => {
  try {
    const userName = req.body.user_name;
    const email = req.body.email;
    const password = req.body.password;
    const createdAt = dayjs().format('YYYY-MM-DD HH:mm');

    const signupQuery = 
      'INSERT INTO users (user_name, user_email, user_password, created_at) VALUES ($1, $2, $3, $4)';

    // 既に登録されているメールアドレスかどうかを確認
    const emailExistsQuery = 'SELECT * FROM users WHERE user_email = $1 LIMIT 1';
    const emailExists = await pool.query(emailExistsQuery, [email]);

    if (emailExists.rows.length) {
      res.render('signup', {
        title: '新規会員登録',
        emailExists: '既に登録されているメールアドレスです'
      });
    } else {
      // ユーザーの新規登録
      await pool.query(signupQuery, [userName, email, password, createdAt]);
      res.redirect('/signup');
    }

  } catch (error) {
    console.error(error);
    res.status(500).send('内部サーバーエラー');
  }
});

module.exports = router;

views/signup.ejsを作成します。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>

<body>
  <div class="top_link">
    <a href="/" class="btn">← トップへもどる</a>
  </div>

  <p class="main-title"><%= title %></p>

  <% if (typeof emailExists !== 'undefined') { %>
    <p class="error"><%= emailExists %></p>
  <% } %>

  <form action="/signup" method="post" class="form">
    <div class="userName">
      <span class="label">userName</span>
      <input type="text" name="user_name" class="input" required>
    </div>

    <div class="email">
      <span class="label">Email</span>
      <input type="email" name="email" class="input" required>
    </div>

    <div class="password">
      <span class="label">password</span>
      <input type="password" name="password" class="input" required>
    </div>

    <div class="button-area">
      <button type="submit" class="submit">新規会員登録</button>
    </div>
  </form>
</body>
</html>

/signupにアクセスしてユーザー登録をしてみてください

すでに登録しているメールアドレスを登録してみてください

エラーが表示されていればOKです

passwordをhush値にしてデータベースに保存する

データベースに入力したままのpasswordを保存するのは良く無いのでモジュールを使ってpasswordをhush値にしてデータベースに登録します

npm install --save bcrypt

routes/signup.jsにコード追加

const express = require('express');
const router = express.Router();
const dayjs = require('dayjs');
const bcrypt = require('bcrypt'); //追加
const pool = require('../dbConnection');

router.get('/', (req, res, next) => {
  res.render('signup', {
    title: '新規会員登録'
  });
});

router.post('/', async (req, res, next) => {
  try {
    const userName = req.body.user_name;
    const email = req.body.email;
    const password = req.body.password;
    const createdAt = dayjs().format('YYYY-MM-DD HH:mm:ss');

    const signupQuery = 'INSERT INTO users (user_name, user_email, user_password, created_at) VALUES ($1, $2, $3, $4)';

    // 既に登録されているメールアドレスかどうかを確認
    const emailExistsQuery = 'SELECT * FROM users WHERE user_email = $1 LIMIT 1';
    const emailExists = await pool.query(emailExistsQuery, [email]);

    if (emailExists.rows.length) {
      res.render('signup', {
        title: '新規会員登録',
        emailExists: '既に登録されているメールアドレスです'
      });
    } else {
      // パスワードのハッシュ化
      const hashedPassword = await bcrypt.hash(password, 10);

      // ユーザーの新規登録
      //password → hashedPasswordに変更
      await pool.query(signupQuery, [userName, email, hashedPassword, createdAt]);

      res.redirect('/signup');
    }

  } catch (error) {
    console.error(error);
    res.status(500).send('内部サーバーエラー');
  }
});

module.exports = router;

こうなってればOK

ログイン機能の実装

ログイン情報を保持する為に必要なモジュールをインストールします

npm install --save express-session

app.jsを書き換えます

// 中略
const logger = require('morgan');
const session = require('express-session'); // 追加

const indexRouter = require('./routes/index');
const message = require('./routes/message');
const signup = require('./routes/signup');
const login = require('./routes/login'); // 追加

// 中略
app.use(express.static(path.join(__dirname, 'public')));

// 追加　session
app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true
}));

app.use('/', indexRouter);
app.use('/message', message);
app.use('/signup', signup);
app.use('/login', login); // 追加
// 中略

routes/login.jsを作成します。

const express = require('express');
const router = express.Router();
const bcrypt = require('bcrypt');
const pool = require('../dbConnection');

router.get('/', function (req, res, next) {
  if (req.session.user_id) {
    res.redirect('/');
  } else {
    res.render('login', {
      title: 'ログイン'
    });
  }
});

router.post('/', async function (req, res, next) {
  try {
    const email = req.body.email;
    const password = req.body.password;

    const query = 'SELECT user_id, user_password FROM users WHERE user_email = $1 LIMIT 1';

    const result = await pool.query(query, [email]);

    if (result.rows.length > 0) {
      const user = result.rows[0];
      const userId = user.user_id;

      // パスワードの比較
      const isPasswordValid = await bcrypt.compare(password, user.user_password);

      if (isPasswordValid) {
        req.session.user_id = userId;
        res.redirect('/');
        return; // ログイン成功時に関数を終了
      }
    }

    // 行が見つからないか、パスワードが無効な場合のエラーメッセージ
    res.render('login', {
      title: 'ログイン',
      noUser: 'メールアドレスとパスワードが一致するユーザーはいません'
    });

  } catch (error) {
    console.error(error);
    res.status(500).send('内部サーバーエラー');
  }
});

module.exports = router;

views/login.ejsを作成します。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  
  <body>

    <div class="top_link">
      <a href="/" class="btn">← トップへもどる</a>
    </div>

    <p class="main-title"><%= title %></p>

    <% if (typeof noUser !== 'undefined') { %>
      <p class="error"><%= noUser %></p>
    <% } %>

    <form action="/login" method="post" class="form">

      <div>
        <span class="label">Eメール</span>
        <input type="email" name="email" class="input" required>
      </div>

      <div>
        <span class="label">パスワード</span>
        <input type="password" name="password" class="input" required>
      <div>

      <div class="button-area">
        <button type="submit" class="submit">ログイン</button>
      </div>

    </form>
  </body>
</html>

ユーザー登録画面で登録したユーザーでログインしてみてください。
エラーが出ずにログインできたらOKです

ログインしているユーザーを表示させる

app.jsを書き換える

// 中略
const login = require('./routes/login');
const setUser = require('./routes/setUser'); // 追加

const app = express();
// 中略

app.use('/', setUser, indexRouter); // 変更
app.use('/users', usersRouter);
app.use('/message', setUser, message); // 変更
app.use('/signup', signup);
app.use('/login', login);
// 中略

routes/setUser.jsを作成します

const pool = require('../dbConnection');

module.exports = async (req, res, next) => {
  const userId = req.session.user_id;

  if (userId) {
    try {
      const query = 'SELECT user_id, user_name FROM users WHERE user_id = $1';
      const result = await pool.query(query, [userId]);

      if (result.rows.length) {
        res.locals.user = result.rows[0];
      }
    } catch (error) {
      console.error(error);
    }
  }
  next();
};

views/index.ejsを書き換えます

<% if (typeof user !=='undefined' ) { %>
  <span class="login-user">
    <%= user.user_name %>さんとしてログインしています
  </span>
<% } %>

views/message.ejsを書き換えます

<% if (typeof user !=='undefined' ) { %>
  <span class="login-user">
    <%= user.user_name %>さんとしてログインしています
  </span>
<% } %>

ログアウト機能を実装

app.jsを変更します

// 中略
var login = require('./routes/login');
var logout = require('./routes/logout'); // 追加
var setUser = require('./routes/setUser');

const app = express();
// 中略

app.use('/login', login);
app.use('/logout', logout); // 追加

routes/logout.jsを作成します

const express = require('express');
const router = express.Router();

router.get('/', (req, res, next) => {
  req.session.destroy();
  res.redirect('/login');
});

module.exports = router;

ログアウトされていればOKです

ユーザー登録ボタン、ログインボタン、ログアウトボタンを作成する

自走課題です、難しければDiscordで質問してください。

条件
・　ログインしていない状態の時は、ユーザー登録ボタンとログインボタンの表示
・　ログインしている状態の時は、ユーザー登録ボタンとログアウトボタンの表示