로그인 사용자를 실제 DB에 있는 사용자와 비교하여 유효성을 검사하기 위해서 이클립스와 오라클을 연동해보겠습니다.
-오늘 목표-
- 로그인한 사용자를 DB에 사용자와 비교해서 로그인 시켜주기!
1. 프로젝트-lib폴더에 ojdbc7와 mybatis를 추가합니다.
2. Java Resources-src에서 servlet클래스를 생성합니다.
패키지 이름은 board로 정했습니다.
자 오류가 뜹니다 ~
대충 해당 자바 클래스가 servlet이 뭔지 모르겠다는 내용입니다..
Board프로젝트 우클릭-properties-Build Path로 들어가줍니다.
Libraries탭-Add Library..-Server Runtime-Tomcat 선택 후 OK
오류가 모두 사라졌습니다 ! ~
3. Java Resources-src폴더에 board.mybatis라는 패키지를 만들고 두개의 xml파일을 생성합니다.
<config.xml>
L6,7 마이바티스로 접속할 DB의 이름
L8~13 접속 DB정보
L18 SQL문을 작성할 매퍼의 이름
<BoardMapper.config>
L4 서블릿에서 접근할 이름
L5-6 이 구역에 SQL문을 작성할것입니다 (select, insert, update, delete)
4. 서블릿 코드에서 jdbc와 mybatis를 사용하기 위해서, 프로젝트 우클릭-Properties-Java Build Path에 들어가서
Add JARS... -> 라이브러리들을 넣은 lib폴더에서 ojdbc7과 mybatis를 추가한 뒤 OK
<Login.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/Login.js"></script>
</head>
<body>
<h1>LOGIN PAGE</h1>
<div>
<table>
<tr>
<td><label>ID</label></td>
<td><input type="text" id="userId" placeholder="아이디를 입력하세요."></td>
<td rowspan="2"><button id="btnLogin">로그인</button></td>
</tr>
<tr>
<td><label>PW</label></td>
<td><input type="password" id="passwd" placeholder="비밀번호를 입력하세요."></td>
</tr>
</table>
</div>
</body>
</html>
<Login.js>
$(document).ready(function(){
$("#btnLogin").click(function(){
var uInfo = new Object();
uInfo.uID = $("#userId").val();
uInfo.uPW = $("#passwd").val();
if (!uInfo.uID || !uInfo.uPW) {
alert("회원 정보를 모두 입력하세요.");
} else {
$.ajax({
type:"POST",
url:"/Board/Login",
data:JSON.stringify(uInfo),
success:function(res){
if(res.result=="true"){
alert(res.userName+"님 환영합니다!");
console.log(res);
}else{
alert("회원정보 불일치");
}
},
error:function(e){
alert("로그인 시도 중 오류 발생");
console.log(e);
}
})
}
})
})
L1 화면이 로딩 됐을 때 이벤트를 걸 수 있기 때문에, 로드 후에 js를 실행한다는 의미
L2 로그인버튼 클릭 이벤트 리스너
L3~5 입력한 ID와 PW를 가져오와 object타입으로 저장
L6 공백 입력시 처리
L9 ajax통신으로 servlet 호출
L10 post방식으로 호출 (get방식은 url뒤에 파라미터를 붙여서 보냄으로 post로 처리하도록)
L11 요청할 서블릿 경로
L12 서블릿을 호출하면서 파라미터로 넘겨 줄 data.
Object타입인 uInfo를 제이슨 문자열 형태로 바꾸어 전송
L13 ajax 호출 성공시 실행
L21 ajax 호출 실패시 실행
<Login.java>
package board;
import java.io.IOException;
import java.io.InputStream;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import com.fasterxml.jackson.databind.ObjectMapper;
@WebServlet("/Login")
public class Login extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
// DB 연결
String config = "board/mybatis/config.xml";
InputStream is = Resources.getResourceAsStream(config);
SqlSessionFactory factory = new SqlSessionFactoryBuilder().build(is);
SqlSession session = factory.openSession();
// request 파라미터 값 받기
InputStream inputStream = request.getInputStream();
ObjectMapper mapper = new ObjectMapper();
HashMap reqData = mapper.readValue(inputStream, HashMap.class);
String uID = (String) reqData.get("uID");
String uPW = (String) reqData.get("uPW");
HashMap<String, String> getUser = session.selectOne("BOARD.getUserById", uID);
// logic처리
HashMap<String, String> resUser = new HashMap<>();
if( getUser!=null ) { // ID일치
if( uPW.equals(getUser.get("PASSWD")) ) { // PW일치
resUser.put("result", "true");
resUser.put("userName", getUser.get("USER_NAME"));
resUser.put("userType", getUser.get("USER_TYPE"));
} else { // PW불일치
resUser.put("result", "false");
}
} else { // ID불일치
resUser.put("result", "false");
}
// response 객체 생성
String resData = mapper.writeValueAsString(resUser);
response.setContentType("application/json");
response.setCharacterEncoding("utf8");
response.getWriter().print(resData);
} catch (Exception e) {
e.printStackTrace();
}
}
}
L20 서블릿 어노테이션 : URL경로에 /Login이 붙은 요청을 내가 처리할게! 라는 의미
이 어노테이션 덕분에 위 Login.js의 L11에서 url로 서블릿 호출이 가능함!
원래 톰캣 xml파일에 매핑정보를 입력해야하지만 어노테이션(@)덕분에 이렇게 한줄만 넣으면 된다.
L22 Post요청을 처리하는 코드가 들어올 부분
L23 http,db 처리 중 exception이 발생할 경우 catch문(L57)로 빠져서 오류를 확인할 수 있도록 해준다.
L25~28 앞에서 만든 마이바티스 config파일을 참조하여 DB연결을 생성한다.
L31~ request 파라미터는 Login.js의 L12에서 전달한 data를 request로 받은것이다.
=Login.js에서 넘겨받은 데이터를 JAVA에서 사용할 수 있게 변환하여 변수에 담는 과정이다.
>31~33 JSON 문자열 형태의 데이터를 jackson라이브러리의 ObjectMapper객체가 자바에서 사용가능한 HashMap형태로 바꾸어준다. (자바스크립트와 자바는 다른 언어라 변수의 타입도 다른데, ObjectMapper는 ID와 PW를 전달하는 통역 역할을 한다고 생각하면 된다..)
>34~35 자바가 알아듣는 변수로 저장했기때문에 이제 ID와 PW를 꺼내서 String 변수에 담는다.
L36 DB처리를 담당한 session 객체의 기능(함수) 중 selectOne을 실행한 결과를 HashMap타입의 getUser변수에 담는다.
첫번째파라미터-"BOARD.getUserById" : BOARD는 BoardMapper에서 지정한 namespace이며, 그 중 getUserById라는 쿼리를 실행한다는 의미(Mapper코드는 아래에)
두번째파라미터-uID : 쿼리에 전달 할 변수(파라미터)이다. String, Integer, HashMap, List 등 객체가 올 수 있다.
L39~ 요청한 사용자 정보(사용자가 입력한 정보=Login.js에서)가 유효한지 검사하는 로직을 처리
>39 응답으로 넘겨줄 객체 생성. response user라는 의미입니다
>로그인한 정보가 DB에 있다면 사용자의 이름과 타입(관리자/일반사용자)을 응답객체에 세팅
>정보가 불일치할 경우에 result에 false값을 세팅
L52~ 요청을 보낸 ajax에게 응답을 줘야되기 때문에 응답 세팅
>52 resonse user를 다시 자바스크립트가 알아들을 수 있는형태로 변환 (HashMap -> String)
>53,54 response가 어떤 형식인지 알려줌. js에서 응답을 받았을때 json형태로 풀어보면 되구나!를 알수있음
>55 resData를 응답으로 돌려줌
여기까지 코드를 작성했다면, ObjectMapper부분에서 오류가 날것입니다.
위에서 ojdbc, mybatis를 추가했던 방법으로 다음 잭슨라이브러리도 추가합니다.
<BoardMapper.xml>
<mapper namespace="BOARD">
<select id="getUserById" parameterType="java.lang.String" resultType="java.util.HashMap">
SELECT
USER_ID,
PASSWD,
USER_TYPE,
USER_NAME
FROM
USER_INFO
WHERE
USER_ID=#{uID}
</select>
</mapper>
'이클립스 > 게시판만들기' 카테고리의 다른 글
| [java/html/js]게시판 프로젝트-로그인페이지 이벤트 추가 (0) | 2020.10.24 |
|---|---|
| [java/html/js]게시판 프로젝트-로그인페이지 화면 만들기 (0) | 2020.10.17 |
| [Java/html/js]게시판 프로젝트-구성하기 (0) | 2020.10.17 |
| 이클립스 Dynamic Web Project 생성하기 (1) | 2020.10.15 |
