JavaScriptを使用してログイン機能を実装する方法

フロントエンドとバックエンドが分かれているプロジェクトでは、ログイン機能は必須の機能です。フロントエンドではログイン機能を実装するために JavaScript コードを記述する必要があります。JavaScript を使用してログイン機能を実装する方法について説明します。

まず、ログイン機能を実現するために重要な概念である、HTTP プロトコルにおける Cookie とセッションについて理解する必要があります。ユーザーがログイン要求を送信すると、サーバーはユーザーが送信したアカウントとパスワードが正しいかどうかを検証します。正しければ、ユーザー情報はセッションに保存され、セッション ID はクライアントの Cookie に保存されます。サーバーが次回リクエストできるようにするための応答ヘッダー ユーザー情報はセッション ID で見つけることができます。ログインに成功すると、クライアントは Cookie 内のセッション ID に基づいてユーザーがログインしているかどうかを判断し、状態を維持します。

この基本的な知識があれば、ログイン機能の実装を開始できます。

1. ログイン フォームの作成

まず、HTML でログイン フォームを作成する必要があります。このフォームには、アカウント番号とパスワードの 2 つの入力ボックスと、ログイン ボタンが含まれています。

<form id="login-form">
  <label for="username">账号：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <button type="submit">登录</button>
</form>

フォームでは、JavaScript が入力ボックスの値を取得しやすくするために、各入力ボックスに ID を割り当てます。

2. フォーム送信イベントをリッスンする

フォーム送信イベントをリッスンし、送信イベントでログイン ロジックを処理する必要があります。

const form = document.querySelector('#login-form');
form.addEventListener('submit', handleLogin);

function handleLogin(event) {
  event.preventDefault(); // 阻止表单默认提交事件
  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;
  // TODO: 验证账号密码是否正确
  // TODO: 发送登录请求
}

まず、document.querySelector メソッドを使用して、フォーム内のアカウントとパスワードの入力ボックスの値を取得します。次に、アカウントのパスワードを検証できます。検証ロジックは自分で記述するか、または検証にはサードパーティのライブラリを使用します。

3. ログイン要求の送信

アカウントのパスワードの検証に合格した場合は、ログイン要求を送信できます。リクエストを送信するには、XMLHttpRequest オブジェクトを使用する必要があります。次の例ではフェッチ API が使用されます。

const form = document.querySelector('#login-form');
form.addEventListener('submit', handleLogin);

function handleLogin(event) {
  event.preventDefault(); // 阻止表单默认提交事件
  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;
  // TODO: 验证账号密码是否正确
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('登录成功');
        // TODO: 保存用户信息到 session
        // TODO: 跳转到首页
      } else {
        alert('登录失败，账号或密码错误');
      }
    })
    .catch(error => {
      console.error(error);
      alert('登录失败，网络异常');
    });
}

リクエストを送信するときは、アカウントのパスワードをリクエスト本文として JSON オブジェクトにカプセル化し、リクエスト ヘッダーで Content-Type を application/json として指定する必要があります。サーバーから返されるデータは JSON オブジェクトで、ログインが成功したかどうかを示す success フィールドが含まれます。ログインに成功すると、ユーザー情報がセッションに保存され、ホームページにジャンプできますが、ログインに失敗すると、エラー メッセージがポップアップ表示されます。

4. ユーザー情報をセッションに保存する

ログインに成功した後、サーバーはユーザー情報をセッションに保存する必要があります。フェッチ API を使用して別のリクエストを送信し、リクエストに含める資格情報を設定すると、リクエストの送信時に Cookie が自動的に送信され、サーバー側の Cookie 内のセッション ID を介して対応するセッションにアクセスできるようになります。 。

fetch('/api/user', {
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => {
    // TODO: 将用户信息保存到 session
  })
  .catch(error => {
    console.error(error);
    alert('获取用户信息失败');
  });

サーバー側では、高速セッション ミドルウェアを使用してセッションを処理できます。ログインに成功したら、ユーザー情報をセッションに保存します:

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  // TODO: 验证账号密码是否正确
  // TODO: 将用户信息保存到 session
  req.session.user = { id: 1, username: 'admin' };
  res.json({ success: true });
});

ユーザー情報を取得する場合、req.session.user:

app.get('/api/user', (req, res) => {
  res.json(req.session.user);
});

5. ページを通じてログインしているユーザー情報を取得できます。 Jump

ログインに成功したら、ホームページにジャンプする必要があります。 JavaScriptを使用してページにジャンプすることができます。

if (data.success) {
  alert('登录成功');
  // TODO: 保存用户信息到 session
  window.location.href = '/'; // 跳转到首页
} else {
  alert('登录失败，账号或密码错误');
}

ページにジャンプする場合、window.location.href プロパティを使用してページの URL を設定し、ページジャンプを実現できます。

概要:

この記事では、JavaScript を使用してログイン機能を実装する方法を紹介します。ログインを実装するには、アカウントとパスワードの検証、リクエストの送信、セッションへのユーザー情報の保存、ページ ジャンプなど、多くの側面を処理する必要があります。この記事の導入により、読者はフロントエンドにログイン機能を実装する方法をすぐにマスターできると思います。

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