ノードスキャフォールディングを使用してトークン検証を実装するサーバーを構築する方法

コンテンツ

スキャフォールディングを使用してノードプロジェクトを素早く構築する
データベースとやり取りするためにMySQL接続プールを使用する
jsonwebtoken を使用したトークン認証の実装
包括的な例: 導入ログインページで上記を実装する

1. ノードプロジェクトを素早く構築する

Express フレームワークを使用するとノードサーバーを効率的に開発できることは誰もが知っていますが、基礎となる構築は依然として手書きに依存しています。しかし、エクスプレスジェネレータの登場により、この問題は見事に解決されました。これは、ノードスキャフォールディングとも言える、プロジェクトの基本的な骨組みをワンクリックで生成してくれます。

1.1 プロジェクトの生成

①: まずグローバルにexpressをインストールします: npm install express -g
②: 次に express-generator をグローバルにインストールします: npm install express-generator -g
③: 次にコマンドを使用してプロジェクトを作成します: express token_learn (プロジェクト名)

1.2 エントリファイルを変更する

サーバーを手動で実行することに慣れている多くの人にとって、app.js は常に忘れられないものですが、このスケルトンのエントリファイルは www.js です。この時点で、app.jsコードを手動で変更してエントリファイルにすることができます。

例：

var express = require('express');
var パス = require('パス');
var cookieParser = require('cookie-parser');

定数 index = require('./routes/index');
const users = require('./routes/users');

express() は、定数です。

app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', インデックス);
app.use('/users', ユーザー);

app.listen(3000, () => console.log('サーバーは3000を実行しています'))

2. MySQLデータベースに接続する

ここでは接続プールが接続に使用されます（効率的かつ安全）

2.1 接続を作成する

①: mysqlモジュールをインストール: npm i mysql
②: プロジェクトルートディレクトリに接続プールを設定する

まず、プロジェクトのルートディレクトリにutilフォルダを作成し、そのフォルダにbdconfig.jsファイルを作成します。

bdconfig.js

定数 mysql = require('mysql');

モジュール.エクスポート = {
  mysqlパラメータ: {
    ホスト: 'localhost', //ドメイン名 ポート: '3306', //ポート ユーザー: 'root', //ユーザー名 パスワード: 'myroot', //パスワード データベース: 'nodeapi' //データベース},
  sySqlConnect(sql, sqlArr) {
    return new Promise((resolve, reject) => { // データの受信を容易にするために Promise オブジェクトで変換します const pool = mysql.createPool(this.mysqlParams);
      プール.getConnection((err, conn) => {
        もし（エラー）{
          拒否(エラー)
        } それ以外 {
          conn.query(sql, sqlArr, (err, data) => { //データベースを操作するif (err) {
              拒否(エラー)
            } それ以外 {
              解決(データ)
            }
          })
          conn.release() //接続を解放する}
      })
    })
  }
}

2.2 接続の使用

使用する場合、sql（SQL文）とsqlArr（パラメータ）を渡すだけで済みます。Promise変換後、戻り値を直接使用して結果を取得できます。

3. トークン認証

Web の発展に伴い、セッション認証や Cookie 認証方式の欠点がますます顕著になってきました。このとき、トークンが誕生しました。トークンの強みは、ステートレスであることだけでなく、ドメイン間で使用できることです。

3.1 実装手順

①: まずjsonwebtokenモジュールをインストールします: npm i jsonwebtoken
②：プロジェクト内でモジュールを使用する

dbConfig が必要です。
jsonwebtoken を jwt に代入します。
const secret = 'login-rule'; // 秘密鍵ルール（カスタム）

token = async(req, res, next) => { //トークン検証ミドルウェア関数を定義する（ログイン以外のすべてのリクエストに適用される）
  （req.headers.authorization）の場合{
    const トークン = req.headers.authorization;
    const { id, username } = jwt.verify(token, secret); // トークンを復号化して検索します let sql = 'select * from test where id=?';
    sqlArr = [id]とします。
    結果 = dbConfig.sySqlConnect(sql, sqlArr); を待機します。
    結果の長さが0の場合
      res.status(200).send({ msg: 'ユーザーエラー' })
      戻る
    }
    if (ユーザー名 !== 結果[0].ユーザー名) {
      res.status(200).send({ msg: 'ユーザーエラー' })
    } それ以外 {
      次（）
    }
  } それ以外 {
    res.status(200).send({ msg: '無効なリクエストヘッダー' })
  }
}

login = async(req, res) => { //ログインインターフェースを定義します（このリクエストヘッダーはトークンを運ばないので、トークン検証ミドルウェアの前に参照されます）
  { ユーザー名、パスワード } = req.body; とします。
  let sql = 'select * from test where username=?';
  sqlArr = [ユーザー名]とします。
  結果 = dbConfig.sySqlConnect(sql, sqlArr); を待機します。
  if (結果.長さ) {
    if (パスワード === 結果[0].パスワード) {
      const { id, ユーザー名 } = 結果[0];
      //トークンを暗号化してクライアントに応答します（パラメータ1: 値転送ルール、パラメータ2: 暗号化ルール、パラメータ3: 定義時間）
      const トークン = jwt.sign({ id, username }, secret, { expiresIn: 60 * 60 });
      res.status(200).send({ msg: 'ログイン成功', token: token, status: 200 });
    } それ以外 {
      res.status(200).send({ msg: 'ログインに失敗しました', status: 422 });
    }
  } それ以外 {
    res.status(200).send({ msg: 'ユーザー名が存在しません', status: 401 })
  }
}

// IDミドルウェアを検証する module.exports = {
  トークン、
  ログイン
}

③: app.jsで設定する

//app.use() の後、ルーティングの前に記述します。app.use('/users/loginjwt', token.login); //ログイン インターフェイス (トークンを検証する必要がないため、トークン ミドルウェアの前に記述します)
app.use(トークン.トークン);

4. ケース実装トークン

4.1 原則

ID が一意かつ有効であることを確認するには、ユーザーがログイン要求を送信して正常にログインするたびに、サーバーはユーザー情報 (一意) を含む暗号化されたトークン (文字列) でユーザーに応答します。この時点で、ユーザーはトークンを受信し、それを sessionStorage または localStorage (ここ) に保存します。同時に、ユーザーが別のリクエストを送信するたびに、ローカルトークンがリクエストヘッダーに含まれます。サーバー側のトークン検証ミドルウェアは、リクエストをインターセプトし、トークンを復号化し、ユーザー情報を取得してデータベースと比較します。情報が存在する場合は、その情報が解放されます (認証成功)。

4.2 効果のプレビュー

4.3 実装を開始する

シンプルな静的ページを書いてAjaxリクエストを実装する

ログイン.html

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

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <script src="../javascripts/jquery.min.js"></script>
  <title>ドキュメント</title>
</head>

<本文>
  <フォームid="ログインフォーム">
    <input type="text" name="ユーザー名">
    <input type="password" name="パスワード">
    <input type="submit" value="ログイン">
  </フォーム>
  <スクリプト>
    $(関数() {
      $('#loginform').on('送信', 関数() {
        const フォームデータ = $(this).serialize()
        $.ajax({
          URL: '/users/loginjwt',
          タイプ: '投稿'、
          データ: フォームデータ、
          成功(res) {
            （res.status === 200）の場合{
              window.sessionStorage.setItem('token', res.token);
              location.href = '/user/index.html'
            }
          }
        })
        偽を返す
      })
    })
  </スクリプト>
</本文>
</html>

インデックス.html

<スクリプト>
  セッションストレージのgetItem('トークン')の場合{
    location.href = '/user/login.html'
  }
</スクリプト>
<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <script src="../javascripts/jquery.min.js"></script>
  <title>ドキュメント</title>
</head>

<本文>
  <h1>ようこそインデックス</h1>
  <a href="javascript:;" rel="external nofollow" >ログアウト</a>
  <スクリプト>
    $(関数() {
      $.ajaxSetup({
        // リクエストを送信する前にトリガーされます beforeSend(xhr) {
          // ここでカスタムリクエストヘッダーを設定します xhr.setRequestHeader('authorization', sessionStorage.getItem('token'))
        }
      })
      $.ajax({
        URL: '/users',
        成功(res) {
          コンソールログ(res);
        }
      })
      $('a').on('クリック', 関数() {
        セッションストレージをクリアします。
        location.href = '/user/login.html'
      })
    })
  </スクリプト>
</本文>
</html>

4.4 注記

ローカルトークンの検証（存在するかどうか）は、ページの上部に記述する必要があることに注意してください（ページが読み込まれてユーザーリストリクエストが再度送信されるのを防ぐため）。
ajax リクエストヘッダーを 1 つずつ追加するのは本当に面倒です。ここでは、$ajaxSetup メソッドを使用して、ajax のデフォルト構成を変更します。設定後、その下に記述されたすべての Ajax リクエストにリクエストヘッダーが含まれるようになります。

ノードスキャフォールディングを使用してサーバーを構築し、トークン検証を実装する方法についての記事はこれで終わりです。ノードトークン検証に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: