LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

WebAPI構築の基本(バリデーション、Postman、パスワードハッシュ化、JWT)

Last updated at Posted at 2023-09-10

サンプルソースコード

GitHub上のソースコードを参考に、まとめています。

バリデーションチェック

json形式のリクエストを受け付けるために、sever.jsに以下のコードを記述する。

サンプル
app.use(express.json());

アクション内にリクエストの変数を受け取る記述を書く。

サンプル
const email = req.body.email;
const password = req.body.password;

express-validatorをインストールする。
https://express-validator.github.io/docs

ターミナルコマンド
npm install express-validator

validatorの使用を宣言し、バリデーションを指定する。(値を受け付けるので、POSTメソッド)

サンプル
const { body, validationResult } = require('express-validator');
サンプル
router.post(
  "/register",
  body("email").isEmail(),  //Email形式のバリデーション
  body("password").isLength({ min: 6}),  //文字数のバリデーション
  async (req, res) => {
    const email = req.body.email;
    const password = req.body.password;

    const errors = validationResult(req);  //エラーの有無
        (省略
  };
);

Postmanからメールアドレス、パスワードを送信することで、バリデーションが行われているかを確認できます。

サンプル画像
スクリーンショット 2023-09-07 13.27.41.png

パスワードの暗号化

パスワードを暗号化するためには、ハッシュ化を行う必要があり、bcryptを使用する。
https://www.npmjs.com/package/bcrypt?activeTab=readme

bcryptをインストールする。

npm i bcrypt

bcryptの使用宣言をする。

const bcrypt = require("bcrypt");

パスワードをハッシュ化するコードを記述する。

let hashedPassword = await bcrypt.hash(password, 10);

※この関数では、ソルトも付与されています。

JWT

https://jwt.io/
https://www.npmjs.com/package/jsonwebtoken
エンコードされたトークン・・・誰が見ても、どのような情報を持っているかがわからない。
↕️:復号
デコードされたトークン・・・ヘッダ、ペイロード、シグネチャ(署名)の情報がわかる。

JWTのインストールする。

npm i jsonwebtoken

JWTの使用宣言をする。これによって、トークンの発行が完了するので、必要に応じてクライアント側に送り返す。

トークンの発行例
const JWT = require("jsonwebtoken");

function generateToken(para, time) {
  try {
    const token = JWT.sign(
      { email: para },
      "SECRET_KEY", // 本来は、envなどで秘密鍵を設定。この秘密鍵は外部に漏らしてはいけない。
      { expiresIn: time }
    );
    return token;
  } catch (error) {
    console.error("[システムエラー]トークン生成エラー:", error);
    throw error;
  }
};

クライアント側からのリクエストでトークンが送られてきた場合、トークンを検証する。有効期限と署名の検証は行われるものの、そのトークン自体を無効化することはできないため、個別で制御する必要がある。

トークンの検証例
const token = req.header("x-auth-token");

      try {
      //トークンの有効期限と署名の検証
      let user = await JWT.verify(token, "SECRET_KEY") //ここで検証している。
      console.log("トークンから情報がデコードされ、検証が行われました。");

      //無効化トークンの検証
      const isTokenValid = UnableToken.find((tokenItem) => tokenItem.number === token) //無効化しているトークンを登録しておき、無効トークン化を判別している
      if (isTokenValid) {
        console.log("トークンが無効化されています。操作を拒否しました。");
        return res.status(401).json([
          {
            message: "権限がありません。",
          },
        ]);
      };

      req.user = user.email;
      next();
    } catch {
      console.log("トークンが一致しなかったため、リクエストを拒否しました。");
      return res.status(400).json([
        {
          message: "権限がありません。",
        },
      ]);
    }

参考

GitHub
スクリーンショット 2023-09-07 13.27.41.png
スクリーンショット 2023-09-07 13.27.47.png
スクリーンショット 2023-09-07 13.27.53.png
スクリーンショット 2023-09-07 13.28.02.png
スクリーンショット 2023-09-07 13.28.12.png

環境

  • OS: macOS Ventura 13.5.2
  • Google Chrome: 116.0.5845.179(Official Build) (arm64)
  • VSCode: 1.82.0 (Universal)
  • Node.js: v14.21.3

本記事における注意事項

  • 本記事は、備忘録としてまとめたものになります。
  • 他の方の参考になる可能性も踏まえて、一般公開も行なっております。
  • また記載内容はすべて、正しい内容が記載されているとは限りません。
  • 誤った内容を見つけた場合は、ご指摘をお願いいたします。
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