Nodejsでログインを実装する方法-フロントエンドQ&A-php.cn

Node.js は非常に人気のあるサーバーサイド JavaScript プログラミング言語であり、Web 開発アプリケーションで重要な役割を果たします。完全な Web アプリケーションを実装するには、さまざまなテクノロジとツールを使用する必要があります。その中の非常に重要な機能の 1 つがユーザーログインシステムです。

この記事では、Node.js がログイン機能を実装する方法を紹介します。ユーザーログインフォームページの構築方法、ユーザーが入力した情報の検証方法、ユーザーセッションの作成方法、Web アプリケーションでのユーザーセッションの使用方法について詳しく説明します。

1. ユーザーログインフォームを構築する
まず、ユーザーが Web アプリケーションにログインできるようにするには、まずユーザーログインフォームを構築する必要があります。ここでは、HTML と CSS を使用して、シンプルで美しいログインフォームページを構築できます。コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
  <title>用户登录</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    label {
      display: block;
      margin-bottom: 10px;
    }
    input {
      border: 1px solid #ccc;
      padding: 5px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      padding: 10px 20px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>用户登录</h1>
  <form method="POST" action="/login">
    <div>
      <label for="username">用户名</label>
      <input type="text" id="username" name="username" placeholder="请输入用户名">
    </div>
    <div>
      <label for="password">密码</label>
      <input type="password" id="password" name="password" placeholder="请输入密码">
    </div>
    <button type="submit">登录</button>
  </form>
</body>
</html>

ログイン後にコピー

このコードは、いくつかの基本的な HTML と CSS スタイルを使用して、ユーザー名と Two を含むシンプルなログインフォームを作成しますパスワードの入力ボックスと、フォームの下部に「ログイン」ボタンが追加されました。

2. ユーザーが入力した情報を確認する
ユーザーがログインフォームを送信した後、ユーザーが入力したユーザー名とパスワードが正しいかどうかを確認する必要があります。ここでは、Node.js の Express フレームワークを使用してフォームデータを取得および検証できます。以下は、ログインフォームから POST リクエストを受信し、送信されたユーザー名とパスワードを検証する単純な Express ルーティング処理関数です。

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/login', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 进行验证
  if (username === 'admin' && password === '123456') {
    // 登录成功，创建会话
    req.session.user = username;
    res.redirect('/dashboard');
  } else {
    // 登录失败，显示错误信息
    res.render('login', { error: '用户名或密码错误' });
  }
});

ログイン後にコピー

このコードは、Express ミドルウェアのボディパーサーを使用してフォームデータを解析し、 req.body オブジェクトを通じて送信されたユーザー名とパスワード。次に、ユーザー名とパスワードの検証を行い、検証に合格すると、ユーザーセッション（詳細は後述するサーバー側にユーザー情報を保存する方法）を作成することができ、ユーザーはアプリケーションのメインページにリダイレクトされます。

検証が失敗した場合は、Express のテンプレートエンジンを使用してエラーメッセージページをレンダリングし、エラーメッセージをテンプレートに渡すことができます。コードは次のとおりです:

app.set('view engine', 'ejs');

app.get('/login', (req, res) => {
  res.render('login', { error: null });
});

app.post('/login', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 进行验证
  if (username === 'admin' && password === '123456') {
    // 登录成功，创建会话
    req.session.user = username;
    res.redirect('/dashboard');
  } else {
    // 登录失败，显示错误信息
    res.render('login', { error: '用户名或密码错误' });
  }
});

ログイン後にコピー

ここでは使用します。 Express ページで ejs テンプレートエンジンを使用して、ログインページとエラーメッセージページをレンダリングします。ページのレンダリング時にエラーメッセージをテンプレートに渡す必要があることに注意してください。

3. ユーザーセッションの作成
上記のコードでは、ユーザーセッションの作成 (つまり、ユーザー情報の保存方法) について説明しました。 Node.js では、express-session モジュールを使用してユーザーセッションを作成および管理できます。 Express-session モジュールのインストールと使用は非常に簡単で、次のコードをアプリケーションに追加するだけです:

const session = require('express-session');
app.use(session({
  secret: 'my-secret-key',
  resave: false,
  saveUninitialized: false
}));

ログイン後にコピー

このコードは、express-session モジュールを使用してセッションミドルウェアを作成し、暗号化するキー (シークレット) を設定します。セッションデータ。このモジュールには、セッションの永続設定を構成するための resave および saveUninitialized オプションなど、他のオプションも提供されています。ここでは、デフォルト設定を使用するために両方を false に設定します。

ユーザーがログインに成功したら、サーバー側でセッションを作成し、そのセッションにユーザー情報を保存します。コードは次のとおりです:

req.session.user = username;

ログイン後にコピー

このようにして、ユーザーがログインすると、正常に実行されると、セッションデータはサーバー側に保存され、ユーザーはこのセッションを使用して次の Web アプリケーションで操作を実行できます。

4. Web アプリケーションでのユーザーセッションの使用
ユーザーセッションを作成したら、それを Web アプリケーションで使用して、ユーザー認証や操作認可などの機能を実装する必要があります。 Express はセッションデータにアクセスするための req.session オブジェクトを提供しており、このオブジェクトを使用して関連関数を実装できます。

たとえば、ユーザーがログインが必要なページにアクセスしたとき、現在のユーザーがセッションを持っているかどうかを確認することで、そのユーザーがすでにログインしているかどうかを判断できます。セッションを持っていない場合は、ログインページにリダイレクトします。コード

app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    res.redirect('/login');
    return;
  }
  // 用户已登录，渲染页面
  res.render('dashboard');
});

ログイン後にコピー

ここでは、req.session オブジェクトにユーザー情報があるかどうかを確認します。存在する場合は、ダッシュボードページが表示されます。存在しない場合は、ログインページにリダイレクトされます。

さらに、ユーザーセッションを使用して、ユーザー認証が必要な操作を承認することもできます。例:

app.post('/delete', (req, res) => {
  if (!req.session.user) {
    res.sendStatus(401);
    return;
  }
  // 检查用户权限
  if (req.session.user !== 'admin') {
    res.sendStatus(403);
    return;
  }
  // 执行删除操作
  res.send('删除成功');
});

ログイン後にコピー

このコードでは、現在のセッションにユーザー情報が含まれているかどうかを確認します。含まれていない場合は、 401 ステータスコードが返され、次に現在のユーザーの権限を確認し、ユーザーが管理者でない場合は 403 ステータスコードが返され、最後に削除操作を実行して成功の応答を返します。

結論
この記事の導入部を通じて、Node.js がユーザーログイン機能を実装する方法をすでに理解しました。ログインフォームの作成、ユーザー情報の検証、ユーザーセッションの作成、Web アプリケーションでユーザーセッションを使用して認証および認可機能を実装する方法を学習しました。もちろん、ユーザーログイン機能の実装には他にも多くの詳細とテクノロジが含まれますが、これらは参考のためにのみ提供します。もっと良い実装方法がある場合は、共有してください。

以上がNodejsでログインを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。