자바스크립트 설정 로그인-프런트엔드 Q&A-php.cn

JavaScript는 일반적으로 웹 페이지의 대화형 효과 및 동적 데이터 처리에 사용되는 프로그래밍 언어입니다. 웹 애플리케이션에서 로그인은 사용자 정보의 보안 및 개인정보 보호와 같은 문제를 수반하는 매우 중요한 기능입니다. 오늘은 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');
  }
});

로그인 후 복사

로그인 요청 처리

사용자가 유효한 사용자 이름과 비밀번호를 입력하고 인증되면 이를 사용해야 합니다. 로그인 요청을 처리하고 세션을 생성합니다. 세션이란 서버와 클라이언트 간의 상호 작용 방식으로, 서버가 일정 시간 동안 클라이언트와 접속을 유지하고 사용자의 상태와 정보를 서버에 저장하는 것을 말합니다.

웹 애플리케이션에서는 쿠키와 세션을 사용하여 사용자 세션을 생성하고 관리할 수 있습니다. 그 중 쿠키란 웹 브라우저에 의해 이용자의 컴퓨터에 저장되었다가 다음에 웹사이트를 방문할 때 서버로 전송되는 작은 텍스트 파일로서, 세션은 이용자를 저장하고 관리할 수 있는 서버측 데이터 구조입니다. 상태와 정보.

예를 들어 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를 반환합니다. 그런 다음 사용자를 홈 페이지로 리디렉션하고 쿠키의 정보를 통해 사용자 세션을 유지합니다.

사용자 기억

사용자가 로그인한 후 사용자 이름과 비밀번호를 기억하고 사용자가 다음에 웹사이트를 방문할 때 자동으로 로그인할 수 있도록 하여 사용자 경험을 개선할 수 있습니다. 이는 쿠키에 사용자 이름과 비밀번호를 저장하여 달성할 수 있습니다.

예를 들어 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" 옵션을 나타내기 위해 확인란을 사용했습니다. 사용자가 이 옵션을 선택하면 사용자 이름과 비밀번호를 쿠키에 저장하고 만료 시간을 30일로 설정합니다. 사용자가 이 옵션을 취소하면 쿠키에서 사용자 이름과 비밀번호가 삭제됩니다.

로그아웃

마지막으로 사용자 계정의 실수나 불법 사용을 방지하기 위해 사용자가 편리한 로그아웃 방법을 제공해야 합니다. 로그아웃하려면 사용자 세션을 삭제하고 쿠키의 정보를 지워야 합니다.

예를 들어 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를 서버에 보냅니다. 서버는 사용자 세션을 삭제하고 성공 상태 코드를 반환합니다. 그런 다음 쿠키에서 사용자 정보와 세션 ID를 제거하고 사용자를 로그인 페이지로 리디렉션합니다.

결론

이 기사에서는 JavaScript를 사용하여 사용자 입력 확인, 로그인 요청 처리, 사용자 기억 및 로그아웃 등의 로그인 기능을 설정하는 방법을 살펴보았습니다. 로그인은 웹 애플리케이션에서 매우 중요한 기능으로, 사용자 정보의 보안 및 개인정보 보호와 같은 중요한 문제를 수반합니다. JavaScript 및 서버 측 인증과 같은 기술을 사용하여 사용자가 입력한 정보가 합법적이고 유효한지 확인하고 사용자 경험과 보안을 향상시킬 수 있습니다.

위 내용은 자바스크립트 설정 로그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!