자동 가입 방지 폼 구현하기 (GDI+활용)

 

이것은 분명 gif파일인 것이다. 컴퓨터가 알아보기 아주아주 까다롭다. -_-;
그래서 어느 순간서부터 다움 카페에 가입을 하기전에 저런 이미지를 넣는것을 본적이 있을 것이다. 이런 아이디어가 퍼져서 요즘은 어느정도 규모가 있는 홈페이지에서는 기본적으로 가입할때 위와 같은 절차를 걸치게 된다. 이러한 이 효과로 어둠속에 숨어서 광고를 하는 그들에게는 조금 불편해 지는 번거로움을 줄수 있었다, 하지만 지금은 사람이 마구 가입을 하고, 프로그램을 이용하여 글을 올리고 있으므로 근본적인 해결책이 된것은 아니다.

어쨌든 카페를 구현하게 된다면 이런 인증 폼을 구현하게 될것인데, 우리 닷넷은 바로 GDI+ 이라는 객체를 지원하므로 GDI+을 이용하여 인증 폼을 아주 쉽게 구현할수 있을 것이다. 그러면 한번 위와 같은 인증 폼을 구현해 보도록 하겠다.



2. 구현 로직

구현 로직은 정말 간단하다.

[            ( 서버 )          ]   [                 (클라이언트)              ]      [ (서버) ]
페이지로딩--->그림저장-->저장한 그림 보여주기--> 입력값 받기 --> 확인하기


2-1. 폼 기본디자인

그럼 먼저 ASP.NET프로젝트 창을 열고 텍스트 박스1개, 버튼1개,라벨1개를 추가 시켜주자 그리고 윗부분에는 <img src=이미지주소> 라는 이미지태그를 넣어주자.< BR>

 
2-2. 랜덤 이미지 생성하기

private void Page_Load(object sender, System.EventArgs e) {  if(!IsPostBack)//맨처음 실행된다면..  {   //임의의 글자를 난수로 발생시켜 PrintStr에 집어넣기   string[] RandomStr = new string []{"자동","가입","프로","그램","쓰지","말자"};   Random r=new Random();   string PrintStr=RandomStr[r.Next(6)];   //랜덤으로 그리는 글씨를 ViewState에 저장한다.(나중에 검사할때 사용)   ViewState["Str"]=PrintStr;       //비트맵객체를 생성하고 이 객체를 Graphics객체에서 생성한다.   Bitmap btm=new Bitmap(100,80);   Graphics grp=Graphics.FromImage(btm);   //회색바탕의 사각형을 만들기   SolidBrush backBrush=new SolidBrush(Color.DarkGray);   Rectangle rect=new Rectangle(0,0,100,80);//100,80의 사이즈   grp.FillRectangle(backBrush,rect);//뒷 배경과 사각형 객체를 전달한다.   //빨간색 글씨를 써서 집어넣는다.   Font font=new Font("굴림",20);   SolidBrush strinBrush=new SolidBrush(Color.Red);   grp.DrawString(PrintStr,font,strinBrush,20,20);   //이제 만들어진 객체를 저장 시키자.   string pathStr=MapPath(Request.ApplicationPath)+@"\img\RanStr.gif";   btm.Save(pathStr,ImageFormat.Gif);  } }

using System.Drawing.Imaging; 과같은 네임스페이스를 추가 시켜주자. 페이지가 첫번째 로드가 되게 된다면 그림이 img라는 경로에 저장이 되어진다.그리고 <img src=img/RanStr.gif>라는 이미지 태그를 넣게 되면 아래와 같이 임의로 정한 글자가 이미지로 나오는 것을 볼수 있을것이다.
 

2-3. 랜덤 이미지 비교하기

private void btnCheck_Click(object sender, System.EventArgs e)   {    if(txtPwdWord.Text==ViewState["Str"].ToString())     Label1.Text="잘썼군요";      else     Label1.Text="잘못썼군요_-_;";   }

그럼 이제 위의 글을 버튼확인을 이용해서 검사를 하면 되는것이다. 아까전에 ViewState["Str"]=PrintStr; 이러한 코딩이 있었다. 이 코딩은 ViewState안에다가 임의로 값을 저장하는 부분이다. ViewState의 역활은 나중에 버튼을 눌러서 포스트백이 일어나게 될경우 기존에 생성시킨 그림이 어떤것인지 알기 위해서 저장해 놓는 일종의 상태 저장소 라고도 할수 있다.여기서 반드시 ViewState를 이용해야만 되는건 아니지만 ViewState라는 개념을 설명하기 위해서 선택해 보았다.

이미지 생성(랜덤문자 ViewState저장) --> 클라이언트브라우저(ViewState 유지) --> 버튼 클릭 이벤트(ViewState값과 비교하기)

이 ViewState부분은 웹브라우저에서 소스보기를 했을때 Base64로 인코딩된 이상한 문자들을 볼수 있을것이다. 이 부분이 바로 ViewState값이 저장되는 부분이라 할수 있다. 생각하면 알수 있겠지만 보안상 안정적인 부분이라고 볼수는 없다. Base64에서 디코딩하면 금방 알아 낼수 있으므로, 비밀번호라던가 이런 보안 수준이 높은 데이터는 절대 ViewState에 저장하지 않도록 하자.

결과