예제로 배우는 JSP

준비중..

예제로 배우는 JSP

자바 웹 프로그래밍의 세계로!

09 세션과 로그인/로그아웃

# 세션과 로그인/로그아웃 세션을 사용한 보안강화 로그인/로그아웃 페이지 만들기!! --- <a name="design"></a> ### 로그인/로그아웃 설계하기 세션을 통한 로그인/로그아웃 페이지를 설계해봅시다. 시나리오는 다음과 같습니다. 1. 로그인 화면을 통해 데이터를 전달하여 인증을 시도합니다. 2. 인증을 성공하면 성공의 결과물로 **세션값(인증키)을 등록**하고 웰컴페이지로 이동합니다. - welcome 페이지는 인증키가 있는 사용자만 볼 수 있도록 하여 **보안을 강화**합니다. 3. 로그아웃을 하면 모든 세션데이터를 삭제(무효화)하고 로그인 페이지로 이동하게 됩니다. ![Imgur](https://i.imgur.com/QntFGRR.png) 화면 설계는 이전 수업과 동일합니다. ![Imgur](https://i.imgur.com/pcYByMy.png) --- <a name="implementation"></a> ### 구현하기 이클립스에서 프로젝트(Dynamic Web Project)를 생성합니다. ![Imgur](https://i.imgur.com/8Fmt0YO.png) 프로젝트명은 `LogInOout`으로 만들었습니다. ![Imgur](https://i.imgur.com/mb7CNES.png) 생성된 프로젝트의 구조입니다. ![Imgur](https://i.imgur.com/SGZ54wQ.png) `WebContent`에 **JSP File**을 생성해주세요(우클릭 > New > JSP File) ![Imgur](https://i.imgur.com/VXuMP3J.png) 아래의 4가지 파일을 만들어 줍니다. + **form.jsp**: 사용자 정보를 입력받는 페이지 + **authentication.jsp**: 사용자 인증과정을 처리하는 페이지 + **logout.jsp**: 로그아웃을 처리하는 페이지 + **welcome.jsp**: 인증 성공시 보여지는 월컴 페이지 ![Imgur](https://i.imgur.com/XZLVM0V.png) 로그인 화면(form.jsp)은 아래와 같습니다. ```html <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="authentication.jsp" method="post"> <label>ID: </label> <input name="id" type="text"><br> <label>PW: </label> <input name="pw" type="password"><br> <input type="submit" value="로그인"> </form> </body> </html> ``` > form 태그의 **action 속성**: 폼 데이터의 수령대상을 나타냅니다. ![Imgur](https://i.imgur.com/2Q7Ex3Y.png) 다음은 인증처리 로직(authentication.jsp)입니다. ```java <% // 0: 인증 가능 사용자 및 비밀번호 목록. String[] users = { "ninja", "knight", "elf" }; String[] passwords = { "ak74", "m4", "pgs11" }; // 1: form 으로부터 전달된 데이터를 변수에 저장. String id = request.getParameter("id"); String pw = request.getParameter("pw"); // 2: 사용자 인증 String redirectUrl = "form.jsp"; // 인증 실패시 재요청 될 url for (int i = 0; i < users.length; i++) { if (users[i].equals(id) && passwords[i].equals(pw)) { session.setAttribute("signedUser", id); // 인증되었음 세션에 남김 redirectUrl = "welcome.jsp"; // 인증 성공 시 재요청 url } } response.sendRedirect(redirectUrl); %> ``` > 세션 값 등록하기: **`session.setAttribute(String name, Object obj);`** 웰컴 페이지(welcome.jsp)입니다. ```java <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% // 인증된 세션이 없는경우, 해당페이지를 볼 수 없게 함. if (session.getAttribute("signedUser") == null) { response.sendRedirect("logout.jsp"); } %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1><%= session.getAttribute("signedUser") %>님 <small>반갑습니다.</small></h1> <a href="logout.jsp">로그아웃</a> </body> </html> ``` > 세션 값 가져오기: **`session.getAttribute(String name;`** ![Imgur](https://i.imgur.com/FuWhYmi.png) 마지막으로 로그아웃 로직(logout.jsp)입니다. ```java <% // 1: 기존의 세션 데이터를 모두 삭제 session.invalidate(); // 2: 로그인 페이지로 이동시킴. response.sendRedirect("form.jsp"); %> ``` > 세션 값 초기화하기: **`session.invalidate();`** --- ### 결과 화면 로그인 성공 ![Imgur](https://i.imgur.com/HRQ28xM.png) 로그인 실패 ![Imgur](https://i.imgur.com/IHmYUTd.png) 로그아웃 ![Imgur](https://i.imgur.com/GowBVKt.png) --- ### 핵심 키워드 + [로그인/로그아웃 설계하기](#design) + [로그인/로그아웃 구현하기](#implemetation) --- ### Next.. 데이터베이스를 연동한 페이지를 만들어봅시다.