AJAX Login with Spring Security

Posted at 2013.12.12 02:52 | Posted in Framework/Spring Security

Introduction


스프링 시큐리티를 이용하여 로그인을 처리할 때에 AJAX 방식으로 로그인 하는 방법이다.


크게 2가지로 볼 수 있겠다. ㅎㅎ




Using Handler


기본적인 10단계의 필터 체인 중에 UsernamePasswordAuthencationFilter 단계의 "authentication-success-handler-ref"와 "authentication-success-handler-ref" 를 이용하는 방법이다.


	<security:http auto-config="true" disable-url-rewriting="true" use-expressions="true">
		<security:intercept-url pattern="/login.*" access="permitAll" />		
		<security:intercept-url pattern="/**" access="hasRole('ROLE_USER')" />
		<security:form-login login-page="/login.html"
			username-parameter="id"
			password-parameter="password"
			login-processing-url="/login.ajax" default-target-url="/index.html"
			authentication-success-handler-ref="loginSuccessHandler"
			authentication-failure-handler-ref="loginFailureHandler" />
		<security:logout invalidate-session="true"
			logout-url="/logout"
			logout-success-url="/" />
	</security:http>
	
	<!-- 로그인 성공시 핸들러 -->
	<bean id="loginSuccessHandler" class="ajax.login.security.LoginSuccessHandler" />
	<!-- 로그인 실패시 핸들러 -->
	<bean id="loginFailureHandler" class="ajax.login.security.LoginFailureHandler" />


클래스 구조를 보면 아래와 같다.




아래와 같은 필터 체인의 순서롤 작동하게 된다.




구현 방법은 각각의 핸들러에서 응답을 JSON[각주:1]이나 원하는 포멧으로 만들어서 출력하면 된다.


public class LoginSuccessHandler implements AuthenticationSuccessHandler {
	@Override
	public void onAuthenticationSuccess(HttpServletRequest request,
		HttpServletResponse response, Authentication authentication) throws IOException,
		ServletException {

		ObjectMapper om = new ObjectMapper();

		Map<String, Object> map = new HashMap<String, Object>();
		map.put("success", true);
		map.put("returnUrl", getReturnUrl(request, response));

		// {"success" : true, "returnUrl" : "..."}
		String jsonString = om.writeValueAsString(map);

		OutputStream out = response.getOutputStream();
		out.write(jsonString.getBytes());
	}

	/**
	 * 로그인 하기 전의 요청했던 URL을 알아낸다.
	 * 
	 * @param request
	 * @param response
	 * @return
	 */
	private String getReturnUrl(HttpServletRequest request, HttpServletResponse response) {
		RequestCache requestCache = new HttpSessionRequestCache();
		SavedRequest savedRequest = requestCache.getRequest(request, response);
		if (savedRequest == null) {
			return request.getSession().getServletContext().getContextPath();
		}
		return savedRequest.getRedirectUrl();
	}

}

public class LoginFailureHandler implements AuthenticationFailureHandler {

	@Override
	public void onAuthenticationFailure(HttpServletRequest request,
		HttpServletResponse response, AuthenticationException exception)
		throws IOException, ServletException {

		ObjectMapper om = new ObjectMapper();

		Map<String, Object> map = new HashMap<String, Object>();
		map.put("success", false);
		map.put("message", exception.getMessage());

		// {"success" : false, "message" : "..."}
		String jsonString = om.writeValueAsString(map);

		OutputStream out = response.getOutputStream();
		out.write(jsonString.getBytes());

	}

}


ajax.login.1.war


ajax.login.1.zip





Using @MVC


다른 방법으로 필터체인을 사용하지 않고 컨트롤러에서 직접 인증을 처리하는 방법이 있다.


개인적으로 이 두번째 방법을 선호한다. 왜냐하면 요청을 "application/json" 으로 유동적으로 한다던가 입출력관련 AOP 등등을 내 맘대로 사용할 수 있다. 그냥 컨트롤러니까~


@Controller
public class LoginController {

	@RequestMapping(value = "/login.html", method = RequestMethod.GET)
	public void loginPage(ModelAndView mav) {

	}

	@Autowired
	AuthenticationManager authenticationManager;
	@Autowired
	SecurityContextRepository repository;

	@RequestMapping(value = "/login.ajax", method = RequestMethod.POST)
	@ResponseBody
	public ModelMap login(HttpServletRequest request, HttpServletResponse response,
		@RequestParam(value = "id") String username,
		@RequestParam(value = "password") String password) {

		ModelMap map = new ModelMap();

		UsernamePasswordAuthenticationToken token = new UsernamePasswordAuthenticationToken(
			username, password);

		try {
			// 로그인
			Authentication auth = authenticationManager.authenticate(token);
			SecurityContextHolder.getContext().setAuthentication(auth);
			repository.saveContext(SecurityContextHolder.getContext(), request, response);

			map.put("success", true);
			map.put("returnUrl", getReturnUrl(request, response));
		} catch (BadCredentialsException e) {
			map.put("success", false);
			map.put("message", e.getMessage());
		}

		return map;
	}

	/**
	 * 로그인 하기 전의 요청했던 URL을 알아낸다.
	 * 
	 * @param request
	 * @param response
	 * @return
	 */
	private String getReturnUrl(HttpServletRequest request, HttpServletResponse response) {
		RequestCache requestCache = new HttpSessionRequestCache();
		SavedRequest savedRequest = requestCache.getRequest(request, response);
		if (savedRequest == null) {
			return request.getSession().getServletContext().getContextPath();
		}
		return savedRequest.getRedirectUrl();
	}

}


스프링 시큐리티 설정 하는 부분에서 그냥 <security:http> 를 써도 되지만 사용하지 않는 UsernamePasswordAuthenticationFilter 같은 필터 체인을 사용하지 않기 위해 수동으로 구성해 보았다. 꽤 어렵... -_-;; (자세한 내용은 context-security.xml 참조!)


ajax.login.2.war


ajax.login.2.zip





그 밖에도 요청 헤더를 까서 요청이 AJAX 인지 아닌지를 판단해서 다른 처리를 하는 것도 있고, 구현할 수 있는 방법은 무궁무진하다.


  1. JSON(제이슨, JavaScript Object Notation)은, 인터넷에서 자료를 주고받을 때 그 자료를 표현하는 방법이다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다. 그 형식은 자바스크립트의 구문 형식을 따르지만, 프로그래밍 언어나 플랫폼에 독립적이므로 C, C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 많은 언어에서 이용할 수 있다. [본문으로]

'Framework > Spring Security' 카테고리의 다른 글

AJAX Login with Spring Security  (7) 2013.12.12
Spring Security Session Destroy  (3) 2013.10.27
MySql Password Encoder  (0) 2013.09.21
  1. 준영
    시큐리티 관련 찾고 있던 정보인데 감사합니당 ㅋ
  2. 비밀댓글입니다
  3. 황진식
    위의 문의를 비밀 글로 남겨 드렸었는데... 비밀번호입력시 오타로 확인 할수가 없어 다시 남겨드립니다. ㅠㅠ

    위의 첫번째 예를 다운 받아

    <security:session-management session-fixation-protection="migrateSession" session-authentication-error-url="/login.html">
    <security:concurrency-control max-sessions="1" error-if-maximum-exceeded="true" expired-url="/login.html"/>
    </security:session-management>

    추가 하여 session 테스트를 진행 하였습니다만 두번째 로그인도 정상적으로 로그인이 됩니다.
    이부분에 대해 도움을 요청드릴수 있을까요?

    믈론
    <listener>
    <listener-class>org.springframework.security.web.session.HttpSessionEventPublisher</listener-class>
    </listener>

    등록 한 상태 입니다.
    • 2014.05.04 18:41 신고 [Edit/Del]
      http://stackoverflow.com/questions/19319849/spring-security-3-1-session-concurrency-control-not-working-why

      동시 세션 제어를 하려면 인증의 주체가 되는 클래스를 비교 가능하게 hascode 와 equals 메소드를 구현해 주면 되네요...

      위의 ajax.login 프로젝트에서는 ajax.login.security.LoginToken 클래스죠 ^^;;

      @Override
      public int hashCode() {
      final int prime = 31;
      int result = 1;
      result = prime * result + ((id == null) ? 0 : id.hashCode());
      return result;
      }

      @Override
      public boolean equals(Object obj) {
      if (this == obj)
      return true;
      if (obj == null)
      return false;
      if (getClass() != obj.getClass())
      return false;
      LoginToken other = (LoginToken) obj;
      if (user == null) {
      if (other.user != null)
      return false;
      } else if (!user.equals(other.user))
      return false;
      return true;
      }

      물론 User 클래스도 hashcode 와 equals 가 구현 되어 있습니다.
  4. ㅎㅎ
    안녕하세요 좋은내용 잘봤습니다 ^^
    하나 궁금한게 있어서 여쭤볼려고하는데요
    먼저 필터체인을 사용하지 않고 컨트롤러에서 직접 인증을 처리하는 방법을 따라해봤는데요
    저 같은경우엔 password를 StandardPasswordEncoder 로 암호화해서 db에 저장했습니다
    아시다시피 StandardPasswordEncoder 같은경우에 복호화가 안되서요
    요런경우엔 어떤식으로 처리하면 가능할지;
    어드바이스좀 부탁드리겠습니다 감사합니다
    • 2014.06.15 01:06 신고 [Edit/Del]
      제가 만들 샘플의 MySqlPasswordEncoder 도 복호화가 안됩니다.

      로그인시 디비에 들어있는 비밀번호를 복호화해서 비교하는게 아니라, 입력받은 비밀번호를 암호화 해서 디비의 비밀번호와 비교합니다.

      {입력받은 비번} == 복호화({디비에 있는 비번}) (x)
      암호화({입력받은 비번}) == {디비에 있는 비번} (o)

      이게 원하시는 답변인지는 모르겠네요 ㅠㅠ
  5. ㅎㅎ
    답변감사합니다 ^^

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

Sudoku

Posted at 2011.06.09 15:33 | Posted in Mini Project
http://antop.nerv.kr/sudoku

※ 혹시나 해보고 에러 찾으면 댓글 달아주세요~ >.,<

드디어 완성이 되었네요...

서버단의 처리보다 화면(UI)의 구성에 더 투자했습니다. (화면 80%, 서버 20%)

서버단은 어노테이션(@) 방식으로 구현했습니다. 확실히 편하긴 하네요...

하지만 관리 측면에서는 xml 로 설정하는게 좋을 듯....?


프레임워크:

기타



소스 파일입니다.



테이블 스키마 파일입니다. (phpmyadmin 으로 export 함)



문제 데이터 입니다. (phpmyadmin)



'Mini Project' 카테고리의 다른 글

Image Pyramid  (0) 2014.01.30
Proftpd Manager  (0) 2012.12.10
게시판 2.0  (5) 2011.07.27
Sudoku  (0) 2011.06.09
간단한 JAVA 실행기(?)  (1) 2011.03.21
Forecast Repository  (8) 2010.11.30
Sales History API  (2) 2010.05.27
Order Entry API  (0) 2010.05.13
Human Resources API  (0) 2010.05.10
게시판 1.0  (1) 2010.03.11
비밀번호 생성기(Generate Password)  (1) 2010.02.10

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

간단한 JAVA 실행기(?)

Posted at 2011.03.21 18:00 | Posted in Mini Project
http://antop.nerv.kr/java

아주 간단한 JAVA 코드 테스트 하려고 이클립스 키고 프로젝트, 클래스 만들고 하기 귀찮아서 웹에서 바로 테스트 해볼 수 있는 걸 만들어 봤습니다.

크게 Ext JS 3.3.1Spring 3.0.5를 사용 했습니다.



아래 화면이 실행 화면입니다. ㅎㅎ



JAVA 에서 main 메소드 안에 들어갈 내용을 작성하면 됩니다.

public class ? {

	public static void main(String[] args) {
		// 작성
	}

}
작성 후 "실행" 버튼을 누르면 sysout으로 출력된 결과를 볼 수 있습니다.

"저장" 버튼은 작성한 소스를 java 파일로 다운로드 받을 수 있습니다.

"로그 삭제" 버튼은 아래의 Console 로그를 삭제합니다.
 


아래 그림은 화면 레이아웃입니다.

실제 기능 구현 하는것보다 레이아웃 잡는게 훨~씬 손이 많이 가는군요 ㅠㅠ




아래 그림은 간단한 흐름입니다. 



사용자가 소스를 작성해서 "실행" 버튼을 누르면 ExtJS에 의햇 비동기 폼 서브밋이 됩니다.

그럼 스프링 MVC 에서 받아서 java 파일 작성하고, 컴파일하고, 실행해서 결과 클리이언트에게 보내줍니다. (JSON)



파일 다운로드의 경우에는 java 파일 작성까지만 하고 바로 다운로드 받게 합니다.



짜잘한 기술로는

- textarea에서 탭키로 들여쓰기 가능
- AJAX 환경에서의 파일 다운로드(IFRAME을 생성하여 그곳으로 파일 다운로드 요청)





※ java.io 패키지는 사용 할 수 없게 했습니다. ㅎㅎ

'Mini Project' 카테고리의 다른 글

Image Pyramid  (0) 2014.01.30
Proftpd Manager  (0) 2012.12.10
게시판 2.0  (5) 2011.07.27
Sudoku  (0) 2011.06.09
간단한 JAVA 실행기(?)  (1) 2011.03.21
Forecast Repository  (8) 2010.11.30
Sales History API  (2) 2010.05.27
Order Entry API  (0) 2010.05.13
Human Resources API  (0) 2010.05.10
게시판 1.0  (1) 2010.03.11
비밀번호 생성기(Generate Password)  (1) 2010.02.10
  1. 비밀댓글입니다

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

Forecast Repository

Posted at 2010.11.30 15:05 | Posted in Mini Project

2011년 2월 10일 - 수정 사항
 - json-taglib 수정(http://antop.tistory.com/99). 이에 따른 js에서 강제 파싱부분 제거
 - ExtJS 3.3.1 업그레이(아무 변화 없음 -_-) 및 필요한 라이브러리만 담음
 - IE에서 열라 느린거 해결 못함 ㅠ_ㅠ

forecast.part1.rar
forecast.part2.rar

해보시려면 sql(/WEB-INF/sql/*.sql)로 스키마 세팅하고, WEB-INF/applicationContext.xml 에서 DB 설정을 해줘야 합니다.

 


http://antop.nerv.kr/forecast


새로 개편하여 화면을 만들었습니다. 데이터베이스 구조만 빼고 완전 다 바뀌었군요....

  1. Cron을 이용하여 돌리던 배치(스케쥴링)를 Quartz를 이용(Spring과 연동)하여 처리 하였습니다.
  2. 화면은 ExtJS 3.2.1 + (Hightcharts 2.0.5 + jQuery 1.4.3)을 사용하였습니다
  3. 서버단은 쓰던대로 Spring 2.5.6.SEC02를 사용하였습니다.

아래 그림은 전체 흐름 구상입니다.



그림의 서버단은 다 따로 돌아가게 그려졌는데 -_-.. 다 스프링과 연동되어 돌아갑니다.

클라이언트에서는 풀 AJAX를 사용하고 서버에서는 url로 요청을 받고 json으로 응답합니다.

클라이언트의 레이아웃 구성은 아래 그림과 같습니다.



center의 tab panel의 레이아웃 구성은 아래와 같습니다.




Parameter

URL 요청 파라미터와 응답 아래와 같습니다.

- 현재날씨 목록 : http://antop.nerv.kr/forecast/whole.do?action=list&stn_id=100&from_date=2010-07-01&to_date=2010-07-14

 파라미터  필수  포맷  설명 
 stn_id  ○   숫자  지역 코드 
 from_date  ○   yyyy-MM-dd  시작 날짜
 to_date  ○  yyyy-MM-dd  마지막 날짜

- 현재날씨 상세 : http://antop.nerv.kr/forecast/whole.do?action=detail&stn_id=100&date=2010-07-08
 파라미터  필수  포맷  설명
 stn_id  ○  숫자  지역 코드
 to_date  ○  yyyy-MM-dd  날짜

- 현재날씨 제한 날짜 : http://antop.nerv.kr/forecast/whole.do?action=limit

- 현재날씨 지역 목록 : http://antop.nerv.kr/forecast/whole.do?action=stn


- 동네예보 목록 : http://antop.nerv.kr/forecast/town.do?action=list&area=1100000000&from_date=2010-08-02&to_date=2010-08-10
 파라미터  필수  포맷  설명
 area  ○  숫자(10자리)  지역 코드
 from_date  ○  yyyy-MM-dd  시작 날짜
 to_date  ○  yyyy-MM-dd  마지막 날짜

- 동네예보 상세 : http://antop.nerv.kr/forecast/town.do?action=detail&area=1100000000&date=2010-10-01
 파라미터  필수  포맷  설명
 area  ○  숫자(10자리)  지역 코드
 date  ○  yyyy-MM-dd  날짜

- 동네예보 제한 날짜 : http://antop.nerv.kr/forecast/town.do?action=limit

- 동네예보 지역 목록 : http://antop.nerv.kr/forecast/api.do?action=area
 파라미터  필수  포맷  설명
 parent  ×  숫자(10자리)  상위 지역 코드


- 주간예보 목록 : http://antop.nerv.kr/forecast/week.do?action=list
 파라미터  필수  포맷  설명
 location  ○  문자(8자리)  도시 코드
 from_date  ○  yyyy-MM-dd  시작 날짜
 to-date  ○  yyyy-MM-dd  마지막 날짜

- 주간예보 제한 날짜 : http://antop.nerv.kr/forecast/week.do?action=limit

- 주간예보 지방 목록 : http://antop.nerv.kr/forecast/api.do?action=province

- 주간예보 도시 코드 : http://antop.nerv.kr/forecast/api.do?action=location
 파라미터  필수  포맷  설명
 province  ×  문자(8자리)  지방 코드


Database Structure

테이블은 하이버네이트로 생성하였습니다.

동네예보



주간예보



전국예보



※ Toad Data Modeler 3.5 로 뽑아낸 데이터베이스 구조 입니다.












hey30 님의 질문 답변

아래는 조금 더 자세하게 그린 그림입니다.



이 프로젝트를 이해 하려면 최소한 'ExtJS'와 'Spring MVC', 'JSON' 정도는 아셔야 합니다. ㅠ_ㅠ

클라이언트단과 서버단은 완전히 분리 되어 있습니다. 100% AJAX[각주:2]로만 주고 받습니다.

클라이언트단은 꼭 ExtJS가 아니어도 되고, 서버단도 역시 뭘로 만들던지 JSON으로 응답만 하면 됩니다.



클라이언트에서 서버와 통신하는 객체는 JsonStore 밖에 없습니다. Store에서 알아서 서버에 요청 후 받아서 처리합니다.

store의 config properties를 autoLoad: true로 설정 하면 자동으로 요청 url을 만들어 서버단에 요청합니다.

그러면 서버단에서 contorller - (service - service impl) - (dao - dao impl) 을 거쳐서 controller에서 mav를 리턴하면 마지막에 해당 JSP 까지 가게 됩니다.

JSP에서는 jstl + json-taglib를 이용해서 JSON을 출력합니다.

그걸 다시 클라이언트단의 ExtJS Store에서 받아서 처리하게 됩니다.



vo(Value Object)는 뭐 자기가 정해서 쓰는거니.. 적당히.... ㅠ_ㅠ

  1. 계속해서 발생되는 자료를 축적하여 두었다가 일정 시점 단위로 일괄해서 처리하는 자료처리 방식으로서 배치 데이터 처리라고도 한다. [본문으로]
  2. 비동기 방식의 자바스크립트와 XML(Asynchronous JavaScript and XML). 웹상에서 JavaScript + CSS + DHTML + DOM + XMLHttpRequest + XML 등과 같은 현존하는 스크립트 언어를 통해서 서버와 통신을 하는 개발 방식 [본문으로]

'Mini Project' 카테고리의 다른 글

Image Pyramid  (0) 2014.01.30
Proftpd Manager  (0) 2012.12.10
게시판 2.0  (5) 2011.07.27
Sudoku  (0) 2011.06.09
간단한 JAVA 실행기(?)  (1) 2011.03.21
Forecast Repository  (8) 2010.11.30
Sales History API  (2) 2010.05.27
Order Entry API  (0) 2010.05.13
Human Resources API  (0) 2010.05.10
게시판 1.0  (1) 2010.03.11
비밀번호 생성기(Generate Password)  (1) 2010.02.10
  1. 우훗- 님 쫌 짱인듯 -
    돌아가는 모습도 캡쳐해놨으면 더욱더 대단했을텐데..! ^^
  2. hey30
    위에 미니프로젝트를 실제 적용하여 공부하고 있습니다
    다만 무지하여 이해가 되지 않는 부분이 좀 있어서 그러는데요
    질문이 있습니다.
    1. web단에서 처리하는 방식
    2. jsp jstl에서 spring 컨트롤러로 값을 넘겨준후 동작방식
    3. spring controller에서 mav로 리턴시 json의 내용을 web에서 어떻게 받아 처리하는지
    4. 한개의 화면을 만든다고 할때 파일을 만들어주어야 되는 순서
    ex) jsp->js->applicationContext.xml->forecast-servlet.xml->controller->service->service_impl->model
    ->dao->dao_impl <-이런식의 순서가 맞는지 의문입니다. 그리고 이걸 일일이 다 날코딩으로 만들어야되는지?
    그리고 vo는 디자인패턴으로 볼때 어느시점에서 쓰는것이 좋은지?
    이런것들이 궁금합니다.
    좀 번거로우시겠지만 무지한 개발자 업그레이드하는 기회가 될수 있도록 좀 도와주세요
  3. hey30
    친절하게 받아주셔서 감사합니다~
    학수고대하며 본문 바로 아래 답변을 기다리겠습니다.
  4. 비밀댓글입니다
    • 2012.06.28 22:55 신고 [Edit/Del]
      지금 받아오는거는 WSDL 이 아니라 그냥 일반 XML 입니다.

      그냥 Java(소켓이었나.. HttpClient 였나.. URL 이었나..)로 XML 파싱 했습니다. ^^

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

게시판 1.0

Posted at 2010.03.11 13:04 | Posted in Mini Project
2011.01.24 - 제목, 작성자에 html 태그 넣으면 이상하던거 수정 -_-

Introduction


http://antop.nerv.kr/board_v1/list.do

전에 php로 일할때는 게시판을 직접 만들어서 홈페이지를 만들었었는데

JAVA 로 갈아타면서 제대로된 게시판을 만들어보질 못했네요...

그래서 열심히 게시판을 하나 만들어 봤습니다.

아래의 기능들을 사용했습니다.

JSP Standard Tag Library (JSTL)
Strtus 1.3.10 (GA)
Hibernate 3.3.2 (GA)
json-taglib
json_parse.js
SWFUpload 2.2.0.1
SmartEditor Basic 0.3.17
Google Kaptcha 2.3
Lightbox JS 2.0

알고리즘은 반업데이트 방식을 사용했습니다.



알고있는 버그(에러) 몇개 있지만 차차 고치도록 하고.... 일단 개시!!!!!! ㄷㄷ;;

에러 많아 잡아주세용~






Version

1.0.0
 - 게시판 완성


1.5.0 (예정)
 - 다중 게시판으로 변경
 - 댓글(comment) 구현

2.0.0 (예정)
 - javascript 부분 jQuery로 교체
 - 게시판을 관리하는 관리자 구현
 - swfupload 개선

3.0.0 (예정)
 - jQuery를 이용한 풀 AJAX 구현



Table Structure





Flowchart

아주 아주 간략한 흐름을 그려봤습니다. 초큼 상세하게 할려고 했는데... 포기 ㅠ_ㅠ




'Mini Project' 카테고리의 다른 글

Proftpd Manager  (0) 2012.12.10
게시판 2.0  (5) 2011.07.27
Sudoku  (0) 2011.06.09
간단한 JAVA 실행기(?)  (1) 2011.03.21
Forecast Repository  (8) 2010.11.30
Sales History API  (2) 2010.05.27
Order Entry API  (0) 2010.05.13
Human Resources API  (0) 2010.05.10
게시판 1.0  (1) 2010.03.11
비밀번호 생성기(Generate Password)  (1) 2010.02.10
Weather History API  (2) 2010.01.18
  1. 형진
    ㅋㅋㅋ 잘만들었다!!!!!

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기