JavaScript設定ログイン-フロントエンドQ&A-php.cn

JavaScript は一般的に使用されるプログラミング言語であり、通常は Web ページ上のインタラクティブな効果や動的なデータ処理に使用されます。 Webアプリケーションにおいて、ログインはセキュリティやユーザー情報のプライバシー保護などの問題を伴う非常に重要な機能です。今日は、JavaScript を使用して、ユーザー入力の検証、ログイン要求の処理、ユーザーの記憶とログアウトなどのログイン機能を設定する方法を検討します。

ユーザー入力の確認

ログイン機能を設定する前に、ユーザー名やパスワードなど、ユーザーが入力した情報が合法かつ有効であることを確認する必要があります。ユーザー入力を検証するには、正規表現、フォーム検証、サーバー側認証などの方法を使用できます。

正規表現はパターンを照合するための言語であり、入力が有効かどうか、または適切な形式であるかどうかを確認するのに役立ちます。たとえば、単純な正規表現を使用して、入力が有効な電子メールアドレスであるかどうかをチェックできます:

function validateEmail(email) {
  const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

ログイン後にコピー

フォーム検証は、ユーザー入力を検証する別の方法であり、ルールとエラープロンプトを設定することによって入力をチェックできます。たとえば、HTML と JavaScript コードを使用してログインフォームを検証し、ユーザー名とパスワードの両方が必須であること、ユーザー名に少なくとも 6 文字が含まれていることを確認できます。

<form id="loginForm" onsubmit="return validateForm()">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="6"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br><br>
  <input type="submit" value="Log in">
</form>

<script>
function validateForm() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  if (username.length < 6) {
    document.getElementById("username").setCustomValidity("Username must contain at least 6 characters");
    return false;
  } else {
    document.getElementById("username").setCustomValidity("");
  }
  if (password.length < 8) {
    document.getElementById("password").setCustomValidity("Password must contain at least 8 characters");
    return false;
  } else {
    document.getElementById("password").setCustomValidity("");
  }
  return true;
}
</script>

ログイン後にコピー

サーバー側認証は最後の行です。ユーザー名とパスワードがデータベース内の記録と一致することを検証するため、ユーザーが入力した情報が合法かつ有効であることが保証されます。たとえば、Node.js と Express フレームワークを使用してサーバー側認証を実装できます。

app.post('/login', function(req, res) {
  const username = req.body.username;
  const password = req.body.password;
  if(username === 'admin' && password === 'admin') {
    res.status(200).send('Login successful');
  } else {
    res.status(401).send('Invalid username or password');
  }
});

ログイン後にコピー

ログインリクエストの処理

ユーザーが有効なユーザー名とパスワードを入力し、検証を行うと、が経過した場合は、それを使用してログイン要求を処理し、セッションを作成する必要があります。セッションはサーバーとクライアント間の対話方法であり、これによりサーバーはクライアントとの通信を一定期間維持し、ユーザーのステータスと情報をサーバーに保存できます。

Web アプリケーションでは、Cookie とセッションを使用してユーザーセッションを作成および管理できます。その中で、Cookie は、Web ブラウザによってユーザーのコンピュータに保存され、次回 Web サイトにアクセスしたときにサーバーに送信できる小さなテキストファイルです。セッションは、ユーザーを保存および管理できるサーバー側のデータ構造です。ステータスと情報。

たとえば、JavaScript コードを使用してセッションを作成し、ユーザー情報を保存できます。

function login(username, password) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/login');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      const user = response.user;
      const sessionId = response.sessionId;
      // Save user information and sessionId in cookies
      document.cookie = `user=${user}`;
      document.cookie = `sessionId=${sessionId}`;
      // Redirect user to home page
      window.location.href = '/home';
    } else {
      alert('Invalid username or password');
    }
  };
  const data = JSON.stringify({ username: username, password: password });
  xhr.send(data);
}

ログイン後にコピー

この例では、XMLHttpRequest オブジェクトを使用して POST リクエストを送信し、ユーザー名とパスワードを送信します。サーバー認証に送信します。ログインが成功すると、サーバーはユーザー情報とセッション ID を返します。これらは Cookie に保存できます。次に、ユーザーをホームページにリダイレクトし、Cookie 内の情報を通じてユーザーセッションを維持します。

ユーザーを記憶する

ユーザーがログインした後、ユーザー名とパスワードを記憶し、次回 Web サイトにアクセスしたときにユーザーが自動的にログインできるようにすることで、ユーザーエクスペリエンスを向上させることができます。これは、ユーザー名とパスワードを Cookie に保存することで実現できます。

たとえば、JavaScript コードを使用してユーザーのユーザー名とパスワードを記憶できます。

function rememberMe() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  if (document.getElementById('rememberMe').checked) {
    // Save username and password in cookies for 30 days
    const expires = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toUTCString();
    document.cookie = `username=${username}; expires=${expires};`;
    document.cookie = `password=${password}; expires=${expires};`;
  } else {
    // Remove username and password from cookies
    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
    document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
  }
}

ログイン後にコピー

この例では、チェックボックスを使用して「Remember Me」オプションを表します。ユーザーがこのオプションをオンにすると、ユーザー名とパスワードが Cookie に保存され、有効期限が 30 日に設定されます。ユーザーがこのオプションをキャンセルした場合、Cookie からユーザー名とパスワードが削除されます。

ログアウト

最後に、ユーザーのアカウントが誤って使用されたり違法に使用されたりすることを避けるために、ユーザーがログアウトする便利な方法を提供する必要があります。ログアウトするには、ユーザーセッションを破棄し、Cookie 内の情報をクリアする必要があります。

たとえば、JavaScript コードを使用してログアウトできます。

function logout() {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/logout');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      // Remove user information and sessionId from cookies
      document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
      document.cookie = 'sessionId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
      // Redirect user to login page
      window.location.href = '/login';
    } else {
      alert('Logout failed');
    }
  };
  const sessionId = getCookie('sessionId');
  const data = JSON.stringify({ sessionId: sessionId });
  xhr.send(data);
}

ログイン後にコピー

この例では、XMLHttpRequest オブジェクトを使用して POST リクエストを送信し、セッション ID をサーバーに送信します。サーバーはユーザーセッションを破棄し、成功ステータスコードを返します。次に、Cookie からユーザー情報とセッション ID を削除し、ユーザーをログインページにリダイレクトします。

結論

この記事では、JavaScript を使用して、ユーザー入力の検証、ログイン要求の処理、ユーザーの記憶とログアウトなどのログイン機能を設定する方法について説明しました。ログインは Web アプリケーションにおいて非常に重要な機能であり、ユーザー情報のセキュリティやプライバシー保護などの重要な問題が伴います。 JavaScript やサーバー側認証などのテクノロジーを使用することで、ユーザーが入力した情報が合法かつ有効であることを保証し、ユーザーエクスペリエンスとセキュリティを向上させることができます。

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