자바스크립트 웹 애플리케이션 로그인 및 사용자 인증 기능

10 Sep 2023

javascript

원하는 웹 애플리케이션을 개발하고자 할 때, 로그인 및 사용자 인증 기능은 핵심적인 요소입니다. 이 기능을 자바스크립트로 구현하는 방법을 알아보겠습니다. 자바스크립트의 강력한 기능을 활용하여 사용자의 입력을 받고, 인증 정보를 확인하는 코드를 작성해보겠습니다.

HTML과 CSS 설정

먼저, HTML과 CSS를 설정하여 로그인 화면을 구성합니다. 아래는 기본적인 로그인 폼의 예시입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>로그인 페이지</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>로그인</h1>
      <form id="loginForm">
        <input type="text" id="username" placeholder="사용자 이름" required>
        <input type="password" id="password" placeholder="비밀번호" required>
        <button type="submit">로그인</button>
      </form>
    </div>
    
    <script src="script.js"></script>
  </body>
</html>

로그인 폼의 스타일을 지정하기 위해 CSS 파일 style.css를 만들어 아래와 같이 작성합니다.

.container {
  width: 300px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
}

input, button {
  margin: 10px 0;
  padding: 5px;
}

위 코드를 실행하면 기본적으로 로그인 폼이 화면에 나타납니다. 이제 자바스크립트를 사용하여 로그인 기능을 구현해보겠습니다.

자바스크립트를 사용한 로그인 기능 구현

아래는 자바스크립트를 사용하여 로그인 기능을 구현한 예시입니다.

const loginForm = document.getElementById('loginForm');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');

loginForm.addEventListener('submit', function(event) {
  event.preventDefault(); // 폼의 기본 동작인 페이지 새로고침을 막음

  const username = usernameInput.value;
  const password = passwordInput.value;

  // 서버로부터 인증 정보를 확인하는 비동기 요청
  authenticate(username, password)
    .then(function() {
      // 인증 성공 시 로그인 페이지 이동 or 특정 페이지로 리다이렉트
      window.location.href = 'home.html';
    })
    .catch(function(error) {
      // 인증 실패 시 오류 메시지 출력
      alert(error.message);
    });
});

function authenticate(username, password) {
  return new Promise(function(resolve, reject) {
    // 실제 인증 로직을 구현
    // 이 예제에서는 간단히 사용자이름이 'admin'이고 비밀번호가 'admin123'인 경우를 인증 성공으로 처리
    if (username === 'admin' && password === 'admin123') {
      resolve();
    } else {
      reject(Error('사용자 이름 또는 비밀번호가 잘못되었습니다.'));
    }
  });
}

위 코드에서 authenticate 함수는 실제 인증 로직을 구현하는 함수입니다. 이 예시에서는 간단한 조건문으로 사용자 이름과 비밀번호를 확인하여, 인증 성공 시 resolve를 호출하고 인증 실패 시 오류 메시지를 포함한 reject를 호출합니다.

loginForm.addEventListener('submit', ...)을 통해 폼의 submit 이벤트가 발생할 때, 입력된 사용자 이름과 비밀번호를 가져와 authenticate 함수를 호출합니다. then 메소드를 사용하여 인증이 성공적으로 이루어질 경우 로그인 후 메인 페이지로 이동하고, catch 메소드를 사용하여 인증이 실패할 경우 오류 메시지를 출력합니다.

로그인 기능이 구현된 자바스크립트 코드를 script.js 파일에 저장하고, HTML 파일의 <script src="script.js"></script>를 통해 로딩하면 자바스크립트로 작성된 로그인 기능이 동작합니다.

이제 작성한 코드를 실행하여 로그인을 테스트할 수 있습니다. 입력한 사용자 이름과 비밀번호가 인증되면 로그인이 성공하고, 그렇지 않으면 오류 메시지를 출력합니다.

로그인 및 사용자 인증 기능은 웹 애플리케이션에서 반드시 구현되어야 하는 중요한 부분입니다. 자바스크립트를 사용하면 이러한 기능을 쉽고 효율적으로 구현할 수 있습니다. 위 예시를 참고하여 웹 애플리케이션 개발에 활용해보시기 바랍니다.