전자정부프레임워크 - JWT(Json Web Token)인증방식 구현, 세션아웃 처리

전자정부프레임워크4.1버전으로(스프링+리액트) 프로젝트 중

로그인 로직을 구현하게 되었다.

 

AS-IS 소스와 달리 전자정부프레임워크의 로그인 인증방식은

JWT인증 방식을 채택해 사용하고 있었다.

 

토큰방식의 로그인 인증 구현 방식과 세션아웃 처리에 대해 적어본다.

 

1. 클라이언트에서의 아이디/패스워드

useState설정

 

로그인 API 호출 시 넘겨줄 객체를 선언해 놓는다.

 

input 값

ID/PW input 값이 변경될 때마다 userInfo가 세팅되도록 onChange 함수 구현

 

로그인 버튼 클릭 함수

로그인 버튼 클릭 함수 정의를 했다.

 

로그인 버튼을 클릭하면 formValidator()라는 유효성 검사를 하고(개인적으로 만든 함수)

이상이 없을 시 submitLogin함수에 userInfo객체를 argument로 넣어 API를 호출한다.

 

submitLoging 함수 정의

로그인화면의 코드 ex: Login.js

전자정부프레임워크에서는 EgovNet이라는 공통컴포넌트를 사용해서 API를 호출한다.

 

2. 서버에서의 로그인 인증(토큰생성)

 

클라이언트에서 받아온 pw를 암호화해서 VO 객체에 다시 담고

setSsssion() 함수를 호출한다.

 

 

actionLogin함수를 통해 클라이언트에서 받아온 VO객체로

DB조회 후 일치하는 데이터를 찾으면

빨간색 테두리의 jwtToeknUtil.generateToken으로 Token발급을 하고

발급받은 토큰을 resultMap의 jToken 키 값에 담아서 클라이언트로 return 한다.

 

jwtTokenUtill설명

 

VO 객체에 담겨 있는 userSe(구분값:ex: 사번) + Id를 조합해서

토큰유효기간이 담겨 있는 토큰을 발급한다.

(위 코드에서는 사번+Id 조합으로 토큰 생성했지만, Id만 넣어도 토큰생성은 된다.)

(loginVO로 되어 있는데 본인이 사용하는 VO에 맞게 오버로딩해야 하거나 본인의 VO를 loginVO로 수정한다.

ex: loginVO  > FlytLoginVO)

 

3. 클라이언트에서 sessionStorage, localStorage에 저장

 

서버에서 받아온 데이터로

1. localStorage에 토큰을 담아 세팅한다.

2. 서버에서 받아온 상태코드가 200, 즉 이상이 없을 시

    sessionStorage에 로그인유저의 정보를 담고 메인 페이지로 이동한다.

(localStroage의 KEY_ID는 로그인 시 아이디저장 체크박스 유무 사용을 위해 사용한 거라

무시해도 된다. 아이디 저장도 사용할 거면 필수)

 

4. 로그인 성공 후 메인페이지(토큰이 유효하지 않을 시 Session Out 처리)

메인페이지의 코드 ex:Main.js

위 코드는 로그인 성공 후 메인페이지에서

init 될 때 실행되는 함수다.(메인페이지가 열릴 때 자동으로 실행되는 함수)

3번의 로그인 화면에서 localStorage에 담아뒀던 토큰값을 가져와서

API호출 시 헤더 부분에 토큰값을 담아서 넘긴다.

 

5. 서버에서의 토큰 유효한지 확인

 

if절 조건으로 클라이언트에서 넘어온 헤더의 토큰값이 유효한지 체크한 후

유효하면 200 상태코드를, 유효하지 않으면 403 상태코드를 return 한다

 

jwtVerification 설명

jwtVerification

try문에서 토큰에 담겨있던 username을 가져온다

(2번의 serSe(구분값, ex: 사번) + Id를 조합했던 값)

 

step4에서 username이 null이거나 토큰이 유효하지 않으면 false를 return 한다.

 

jwtTokenUtil 설명

username과 VO객체에 담긴 serSe(구분값:ex: 사번) + Id를 비교, isTokenExpired로 토큰 유효한지 확인해서

true or false 리턴한다.

 

6. 클라이언트에서 토큰값이 유효하지 않다는 걸 확인 후 Session Out 처리

 

서버에서 받아온 상태코드가 200(성공)이 아닐 시

세션이 만료되었다는 알림 창과

sessionStorage에 담겨 있던 로그인유저 정보를 초기화시킨 후

로그인 화면으로 이동한다.

 

KB카드 프로젝트에서 SSO인증을 사용하여 로그인 구현을 한 적이 있었지만

JWT 인증 방식으로 로그인 구현은 처음 해봤다.

 

이번 프로젝트에서 토큰방식의 로그인 로직을 구현하면서

토큰인증 방식의 원리를 이해하게 됐고, 앞으로 토큰인증 방식의 로그인 구현을

하는 업무를 맡게 되면 자신 있게 구현할 수 있을 것 같다.