[Angular] 라이선스 웹페이지 구축

 라이선스 웹페이지 구축에 Angular를 선택한 이유는 나름 최신 기술이고 구글에서 관리하는 프레임워크라 믿을 수 있다는 점 그리고 컴포넌트 기반이라 코드의 재사용이 가능하다는 점 때문이었습니다.
또한 Angular는 TypeScript라는 JavaScript의 상위 언어를 사용하고 있습니다.

Angular외에 React라는 JavaScript 기반의 라이브러리도 있습니다.
둘의 차이점은 아래 표에서 확인해 보세요.

라이선스 웹페이지

구축하려는 웹페이지는 다음과 같은 기능이 필요했습니다.

1. 만료 기한 설정
2. 같은 토큰으로 여러 대의 PC에서 사용 불가
3. 사용자 등록 및 삭제

이러한 요구 사항에 대응하기 위해 JWT(Jason Web Token)을 이용하여 사용자 접근 제한 로직을 구현하였습니다.

JWT의 구조는 다음과 같습니다.

크게 3 부분으로 이루어져있으며 각 부분은 점(.)로 분리됩니다.

header 부분은 토큰 타입과 암호화 해시 알고리즘이 담겨 있고, payload에는 클레임을 담고 있으며 클레임은 "name/value" 형식의 데이타로 구성됩니다. payload는 여러개의 클레임을 담을 수 있습니다. 당연히 클레임이 갯수가 많을수록 토큰의 크기는 커집니다.

signature는 secret key로 암호화 되어 있습니다.

JWT 토큰을 디코딩해보면 header와 payload가 그대로 노출되어 있는 것을 확인할 수 있습니다. 당연히 암호와 같은 민감한 정보는 담지 말아야 합니다.

누군가가 노출된 데이타를 이용하여 JWT 토근을 생성하여 서버에 접근을 요청하면 JWT 토큰을 디코딩 시 아마도 오류가 발생하게 됩니다. 이것은 서버가 가지고 있는 secret key와 새롭게 JWT 토큰 생성할때 사용한 secret key가 다르기 때문입니다.

이렇게 토큰의 위조를 방지할 수 있습니다.

만일 secret key가 노출되었다면 이제껏 발행한 토큰들을 무효화하고 새롭게 토큰들을 발행해야만 하는 불상사가 발생하게 됩니다.

만료 기한은 JWT의 Expired Time을 통하여 구현하였고 "여러 대의 PC에서 사용 불가" 항목은 PC의 랜카드의 맥주소를 등록하여 해결하였습니다.

라이선스 등록 화면

만료 기한을 넘겼을 경우에는 JWT 토큰을 디코딩할때 오류가 발생합니다.

요즘 PC에는 이더넷과 무선 랜 둘 다 가지고 있는 경우가 많기 때문에 라이선스 웹에 접속하는 랜의 맥주소가 바뀔 수 있습니다.
예를 들어 이더넷의 맥주소를 등록하고서 무선랜으로 라이선스 웹에 접속하면 맥주소가 달라 라이선스를 획득할 수 없습니다. 이때는 이더넷과 무선 랜 둘 다 맥주소를 등록해야 합니다.

아래는 클라이언트 프로그램에서 라이선스 인증 절차입니다.

클라이언트에서는 발급받은 토큰의 맥주소와 인터넷에 접근 가능한 랜 카드의 맥주소를 비교하여 프로그램 실행 여부를 결정합니다.

맥주소가 같다면 토큰을 서버로 보내어 인증을 받습니다. 서버에서는 만료 날짜와 등록된 사용자인지(등록 후 삭제되지 않았는지) 확인합니다.

만료 날짜를 넘겼을 경우에는 새로운 토큰을 발행하여 사용자에게 전달해야 합니다.

이 부분이 불편하다면 자동으로 새로운 토큰을 발행하는 방법을 고민해 보는 것도 좋을것 같습니다.