Ajax를 이용한 로그인구현하기

제가만든 홈페이지 첫화면입니다 .

웹 기능의 제일 기초가 되는 로그인에 대해서 설명드리겠습니다.

				<div class="sideRemote_line">
					<ol class="list-unstyled mb-0">
						<li>
							<div class="sideRemote_signinInput">
								<div class="mb-3">
									<input type="text" class="form-control" id='sideRemoteId' placeholder="아이디" onkeyup="enterkey('login')">
								</div>
								<div class="mb-3">
									<input type="password" class="form-control" id='sideRemotePW' name='sideRemotePW' placeholder="비빌번호." onkeyup="enterkey('login')">
								</div>
								<div class="form-check form-switch">
									<input class="form-check-input" type="checkbox" role="switch" id="autoLogin">
									<label class="form-check-label" for="autoLogin">자동 로그인</label>
								</div>
								<button type="button" class="btn btn-primary" id="loginButton" onclick="signin()">로그인</button>
								<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#signUpModal" onclick='setInitSignUpModal()'>회원가입</button>
							</div>
						</li>
						<li></li>
					</ol>
				</div>

해당 네비게이션의 화면입니다. 

부트스트랩의 향기가 나지만 제가 손수 제작했습니다. 버튼은 부트스트랩 기본 디자인이 잘나와서 사용했지만 언젠간 바꿀예정입니다 .

여기서 중요하게 보실점은

...
<input type="text" class="form-control" id='sideRemoteId' placeholder="아이디" onkeyup="enterkey('login')">
...
<input type="password" class="form-control" id='sideRemotePW' name='sideRemotePW' placeholder="비빌번호." onkeyup="enterkey('login')">
...
<button type="button" class="btn btn-primary" id="loginButton" onclick="signin()">로그인</button>

위 3개의 태그입니다.

• 첫번째 인풋태그

<input type="text" class="form-control" id='sideRemoteId' 
placeholder="아이디" onkeyup="enterkey('login')">

input type = 'text'	아이디를 입력하는 태그입니다. input 태그의 기본형인 text입니다.
class = form-control	이것은 부트스트랩의 css라이브러리에서 css디자인을 넣기위한 class입니다.  현재는 기능적으로는 이용하지않고있습니다.
id = sideRemoteId	해당 텍스트 인풋 타입의 고유 아이디를 넣어주어 제어가 필요하거나 값을 얻어올때 해당  id로 값을 가져올때 사용합니다.
placeholder = 아이디	마우스포인터 또는 입력포커스를 받지 않았을때 input 공간에 '아이디' 라고 나오도록 사용합니다.
onkeyup="enterkey('login')"	해당 인풋태그에 앤터키가 눌러진다면 로그인기능을하는 함수를 호출합니다. --추후설명

• 두번째 인풋 태그

<input type="password" class="form-control" 
id='sideRemotePW' name='sideRemotePW' placeholder="비빌번호." onkeyup="enterkey('login')">

input type = 'password'	비밀번호와 같은 것을 입력하는 태그입니다. 해당 인풋은 *처리를 합니다.
class = form-control	이것은 부트스트랩의 css라이브러리에서 css디자인을 넣기위한 class입니다.  현재는 기능적으로는 이용하지않고있습니다.
id = sideRemotePW	해당 텍스트 인풋 타입의 고유 아이디를 넣어주어 제어가 필요하거나 값을 얻어올때 해당  id로 값을 가져올때 사용합니다.
placeholder = 비밀번호	마우스포인터 또는 입력포커스를 받지 않았을때 input 공간에 '비밀번호' 라고 나오도록 사용합니다.
onkeyup="enterkey('login')"	해당 인풋태그에 앤터키가 눌러진다면 로그인기능을하는 함수를 호출합니다. --추후설명

• 세번째 태그

<button type="button" class="btn btn-primary" id="loginButton" onclick="signin()">로그인</button>

button type ='button'	버튼임을 명시합니다.
class = btn btn-primary	이것은 부트스트랩의 css라이브러리에서 css디자인을 넣기위한 class입니다.  현재는 기능적으로는 이용하지않고있습니다.
id = loginButton	해당 아이기는 로그인 버튼을 하는 아이디인것을 명시했으며, 해당 기능을 이용할때 아이디를 통해 사용될수 있도록 지정했습니다.
onclick = 'signin()'	해당 버튼이 클릭되면 signin()이라는 함수가 발생하도록 지정하였습니다.

---

이제 javascript에 내용을 작성해주도록합니다.

새로 유저활동을 제어할

UserActive.js라고 새로 js파일을 만들어줍니다.

그리고 jsp파일에 

<script type="text/javascript" src="/resources/js/UserActive.js"></script>

스크립트태그를 넣어 해당 js파일이 동작하도록 합니다.

---

셋팅은 여기까지 모두 끝났고 이제 살짝 디테일하게 스크립트만 작성해주면되겠습니다.

로그인을 할때

1. 아이디와 비밀번호를 서버로 보내고
2. 해당 정보가 있는지 없는지 확인한후
3. 있다면 유저정보를, 없다면 오류를
4. 로그인 처리와함께 세션에 로그인된 기록을 남긴다.
5. 로그인 이후 로그인하는 사이드리모컨 생김새 변경
6. + 엔터키가 눌렸을떄 로그인 시도

비록 버튼 한번 클릭이지만 총 6개의 동작이 필요로 합니다.

그래서 우선적으로 버튼 한번눌렸을때 의 함수를 만듭니다.

function signin() {
    const user_id = document.getElementById("sideRemoteId").value;
    const user_password = document.getElementById("sideRemotePW").value;
    const maindataLoadInVO = {
        "user_id": user_id,
        "user_password": user_password
    }
    $.ajax({
        type: 'POST', //post 방식으로 전송
        url: '/user/signin', //데이터를 주고받을 파일 주소
        data: JSON.stringify(maindataLoadInVO), //위의 변수에 담긴 데이터를 전송해준다.
        dataType: 'JSON', 
        async: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
    		setSession(data);
    		callNavBar();
    		setLoginedRemoteCtrl();
        },
        error: function () {
            alert('통신실패!!');
        }
    });
}

버튼이 눌리면 onclick을 통해 signin()함수가 발동됩니다. 

그래서 해당 signin()함수를 만들었고

checkUser()함수에는 아이디-비번유무, 사용자의 정보호출 기능을 하는 함수입니다.

setSession()은 세션에 로그인-사용자 정보를 저장합니다.

callNavBar()함수는 만약 사용자 정보중 즐겨찾기메뉴를 등록한사람이라면 해당 네비게이션 바가 보이도록합니다.

setLoginRemoteCtrl()함수는 지금 리모컨모습을 로그인이후의 리모컨보습으로 바꾸기 위한 함수입니다.

이제 천천히 설명드리겠습니다.

---

    const user_id = document.getElementById("sideRemoteId").value;
    const user_password = document.getElementById("sideRemotePW").value;
    const maindataLoadInVO = {
        "user_id": user_id,
        "user_password": user_password
    }

첫 번째로 아이디와 비밀번호체크와 사용자 정보를 가져오는 선언부 입니다.

앞서 말씀드린 인풋태그의 id 2개를 이용해서 해당 인풋태그에 값들을 변수에 넣습니다.

    $.ajax({
        type: 'POST', //post 방식으로 전송
        url: '/user/signin', //데이터를 주고받을 파일 주소
        data: JSON.stringify(maindataLoadInVO), //위의 변수에 담긴 데이터를 전송해준다.
        dataType: 'JSON', 
        async: false,
        contentType: 'application/json; charset=utf-8',

그리고 ajax의 post방식으로 해당 url을 이용해서 정보를 넘깁니다. 해당 url 이 정상 호출된다면 

자바서버를 호출합니다.

@Controller
@RequestMapping(value = "/user")
public class UserActiveSO
{
	@Autowired 
	LoginBOC loginBOC;
	@ResponseBody
	@RequestMapping(method = RequestMethod.POST, value = "/signin")
	public ResponseEntity<UserinfoOutVO> signinUser(
			@RequestBody UserinfoVO userinfoVO)
	{
		UserinfoOutVO outVO = new UserinfoOutVO();
		outVO = loginBOC.signinUser(userinfoVO);
		return outVO != null
				? new ResponseEntity<>(outVO, HttpStatus.OK)
				: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
	}
}

그럼 user/signin 주소를 따라 매핑된 signinUser 매서드를 호출합니다.

@Service
public class LoginBOC
{

	@Autowired
	LoginBO loginBO;

	public UserinfoOutVO signinUser(UserinfoVO UserinfoVO)
	{
		return loginBO.signinUser(UserinfoVO);
	}

BOC클래스입니다. 별다른 기능없이 BO의 signinUser를 호출합니다.

@Service
public class LoginBO
{
	@Autowired
	UserActiveMapper userActiveMapper;
	public UserinfoOutVO signinUser(UserinfoVO UserinfoVO)
	{
		UserinfoOutVO outVO = userActiveMapper.getUserInfo(UserinfoVO);
		if(Validation.isNullCheck(outVO))
		{
			return null;
		}
		if(!outVO.getUser_id().equals(UserinfoVO.getUser_id()))
		{
			return null;
		}
		if(!outVO.getUser_password().equals(UserinfoVO.getUser_password()))
		{
			return null;
		}
		return outVO;
	}

사용자로부터 입력받은 값들이 옳은지, 그리고 유효한지 확인하는 단계입니다.

	<select parameterType="com.aPlatform.controller.user.VO.UserinfoVO"
		resultType="com.aPlatform.controller.user.VO.UserinfoOutVO" id="getUserInfo">
		SELECT
			USER_ID
			, USER_PASSWORD
			, USER_EMAIL
			, USER_NAME
			, USER_PHONENUM
			, USER_AUTH
			, USER_BIRTH
		FROM
			USER_INFO
		WHERE
			USER_ID = #{user_id}
		AND USER_PASSWORD = #{user_password}
	</select>

해당 sql문을 호출합니다. 

유저id와 password를 통해 가져오게됩니다. 

만약 해당 정보가 없다면 null을 가져오게되며, 3개의 유효성 검사 로직을 통해 null값을 return 합니다.

값이 있다면 VO에 

package com.aPlatform.controller.user.VO;

import lombok.Data;

@Data
public class UserinfoVO
{
	private String user_id;
	private String user_password;
	private String user_email;
	private String user_name;
	private String user_phonenum;
	private String user_auth;
	private String user_birth;
}

아이디, 비번, 이메일, 이름, 폰번, 권한, 생일 등을 가져옵니다.

그리고 ajax부분으로 다시나와 웹단의 

      success: function (data) {
    		setSession(data);
    		callNavBar();
    		setLoginedRemoteCtrl();
        },

의 function(data)를 호출합니다.

이렇게 자바와 통신이 완료되었으면 모든 값들이 data에 저장된채로 넘어옵니다.

그리고 넘어온 값들을 setSesstion을 통해 세션에 저장하도록 합니다.

여기까지 로그인의 기초를 알아보았습니다.