<실행 영상>
Github 링크 (소스 코드)
https://github.com/jooyeokkim/KakaoTalk-Translator
GitHub - jooyeokkim/KakaoTalk-Translator
Contribute to jooyeokkim/KakaoTalk-Translator development by creating an account on GitHub.
github.com
프로젝트 소개
- 프로젝트 이름 : 카카오톡 번역 전송 프로그램
- 프로젝트 설명 : 12가지의 언어 중 하나를 선택하여 번역된 카카오톡 메세지를 전송하는 웹 애플리케이션
- 기술 스택 : SpringBoot Framework, OAuth 2.0(Kakao Login), OpenAPI(Kakao, Google), Spring Security(CSRF Token)
- 진행 인원 및 작업 기간 : 1인, 2021.08.02 ~ 2021.08.25
- 사용 에디터 : IntelliJ
- 사용 프로젝트 : Spring Maven
- 버전 관리 툴 : Git
프로젝트 내용
<개요>
- 웹 애플리케이션 구성
- OAuth 2.0 적용
- OpenAPI 문서
- 화면 구성
- 보안 적용(CSRF Token)
1. 웹 애플리케이션 구성
1) 모식도
(글씨가 선명하지 않다면 이미지 클릭)
2) Service 클래스
(1) GetUserInfoService
getUserNickname() : 현재 로그인한 사용자의 닉네임을 얻는 메소드
(2) AccessTokenService
<1> getAccessToken() : Access Token과 Refresh Token을 발급 받는 메소드
<2> checkAccessTokenState() : Access Token의 만료 여부를 검사하는 메소드
(3) RefreshTokenService
refresh() : 만료된 Access Token을 갱신하는 메소드
(4) GetTranslatedTextService
getTranslatedText() : Google Translation API를 사용하여 입력받은 텍스트를 번역하는 메소드
(5) TextMsgService
getTextMsg() : 카카오톡 메세지 API에서 지정한 양식의 텍스트 메세지 템플릿을 만드는 메소드
(6) GetFriendsService
getFriends() : 현재 페이지의 친구 목록을 가져오는 메소드
(7) SendMeMsgService, SendFriendMsgService
sendMsg() : 메세지를 전송하는 메소드
3) View 파일
(1) home.mustache : 홈 화면
(2) choosefriend.mustache : 친구 선택 화면
(3) entermsg.mustache : 메세지 입력 화면
(4) error.mustache : 서버 오류 화면
(5) expired.mustache : 세션 만료 화면
2. AOuth 2.0 적용
메세지를 전송하기 위해서는 사용자가 Kakao에 로그인해야 하기 때문에 AOuth 2.0를 적용했다.
1) Kakao Login 연동
(1) 과정 설명
<1> OAuth 2.0 등록 : Kakao Developers에서 애플리케이션 생성
<2> Resource Owner의 승인 : Authorization code를 받기 위한 링크를 홈 화면에 제공
<3> Kakao의 승인 : RestTemplate을 이용하여 Access Token, Refresh Token 발급
※ 보안을 위해 Client Secret 값을 추가로 발급받음
(2) 필자의 관련 포스팅
<1> AOuth 2.0의 동작 원리
https://kimcoder.tistory.com/320
[OAuth] OAuth 2.0 소개
1. OAuth이 왜 필요한가? 자신이 운영하는 서비스에 소셜 로그인같은 다른 서비스를 연동시킨다고 생각해보자. 그리고 사용자가 여러분에게 ID, PW를 알려주면, 여러분이 사용자 대신에 SNS 로그인
kimcoder.tistory.com
<2> Kakao Login 연동 방법★
https://kimcoder.tistory.com/342
[OAuth] Kakao Login(1) - 내 애플리케이션 설정
OAuth 2번째 예제이다. OAuth가 무엇인지 잘 모른다면, 아래 포스팅을 읽고 오는 것을 권한다. https://kimcoder.tistory.com/320 [OAuth] OAuth 2.0 소개 1. OAuth이 왜 필요한가? 자신이 운영하는 서비스에 소셜..
kimcoder.tistory.com
2) Token 갱신
Kakao에서 제공하는 Access Token은 6시간의 만료 기간을 가진다.
메세지 전송 직전에 AccessTokenService에서 Access Token의 만료 여부를 검사해서, 만약 만료되었다면 Refresh Token을 이용하여 Access Token을 갱신시켜준다.
이로써, 사용자는 Access Token이 만료되었더라도 재접속 없이 계속 서비스를 이용할 수 있다.
3) Token 저장 위치
Token은 서버 내의 세션에 저장해두었으며, 세션의 만료 기간은 1일(24시간)으로 설정했다.
즉, 이 애플리케이션에서는 24시간동안 끊임없이 메세지를 전송할 수 있다.
설령 세션이 만료되었어도, 다시 로그인만 해주면 된다.
4) 로그아웃
현재 로그인 상태라면, 홈으로 돌아왔을 때 로그인 정보와 함께 로그아웃 버튼이 표시된다.
로그아웃 버튼을 누르게 되면 카카오에서 제공하는 로그아웃 페이지로 이동한다. (4.화면 구성 - 6)로그아웃 화면 참고)
최종적으로 로그아웃을 마쳤다면, 세션의 invalidate() 메소드로 세션값들을 모두 삭제한다.
3. OpenAPI 문서
1) Kakao API
(1) 카카오 로그인 RESTAPI
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
(2) 카카오 소셜 RESTAPI
https://developers.kakao.com/docs/latest/ko/kakaotalk-social/rest-api
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
(3) 카카오톡 메시지 RESTAPI
https://developers.kakao.com/docs/latest/ko/message/rest-api
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
2) Google API
이 프로젝트는 Google Translation API의 번역 기능을 빌려왔으며, 해당 RESTAPI 문서를 참고했다.
https://cloud.google.com/translate/docs/reference/rest/v2/translate?hl=ko
Method: translate | Cloud Translation | Google Cloud
detectedSourceLanguage string The source language of the initial request, detected automatically, if no source language was passed within the initial request. If the source language was passed, auto-detection of the language will not occur and this field w
cloud.google.com
4. 화면 구성
1) Home 화면
[친구에게 보내기] 혹은 [나에게 보내기]를 클릭하면 로그인 화면이나 동의 화면으로 이동한다.
2) 로그인 화면
3) 동의 화면
서비스 이용에 필요한 동의 항목을 체크한다.
4) 친구 선택 화면
한 페이지당 100명까지 표시되며, 100명을 초과할 경우 이전 페이지와 다음 페이지로 이동하는 링크가 각각 생성된다.
그리고 프로필 사진이 없는 친구의 경우에는 프로필 URL값이 공백으로 전달되기 때문에, Default 이미지를 직접 서버에 다운받아서 적용해주었다.
5) 메세지 전송 화면
언어 선택에 있는 콤보 박스에서 12가지의 언어들 중 하나를 고를 수 있으며, 기본값은 영어다.
그리고 아래에서 최근 전송 메세지 로그를 확인할 수 있다.
6) 로그아웃 화면
5. 보안 적용(CSRF Token)
CSRF공격을 막기 위해 Spring Security를 추가하고, mustache 템플릿에서 CSRF Token을 사용할 수 있도록 설정을 추가했다.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<application.properties>
#Some settings...
spring.mustache.expose-request-attributes=true
그리고 CSRF 토큰을 적용하고자 하는 모든 폼에 다음 코드를 추가했다. 이 때, 폼의 전송 방식은 POST로 설정했다.
<input type="hidden" name="{{_csrf.parameterName}}" value="{{_csrf.token}}" />※ "{{_csrf.parameterName}}"대신 "_csrf"도 가능
프로젝트를 마치며...
이 프로젝트를 진행하기 전에, OAuth 2.0, RESTAPI의 다양한 예제를 다룬 포스팅들을 게시하면서 충분한 개념 정리가 되어있었기 때문에 개발 시간을 많이 단축시킬 수 있었다.
그리고 이전에 수행했던 프로젝트의 구성에 비해 디렉토리를 더 보기좋게 나눠 소스코드의 가독성과 유지보수의 편리성을 높이도록 노력했다. 로직 처리를 담당하는 Service 클래스를 역할별로 나누고, VIEW에서 길이가 너무 길거나 중복되는 태그는 파일로 따로 분리해놓고 호출했다.
그리고 이 애플리케이션의 테스터가 되어준 지인분들께도 깊은 감사의 인사를 드린다.
테스터들이 발견한 오류 및 피드백은 다음과 같다.
1) 카카오 로그인을 마치면 최초로 동의 항목을 체크하게 되는데, 이 때 체크하지 않은 선택 항목은 나중에 다시 동의를 할 수 있는 방법이 없다.
해결 : 특정 페이지에 접속할 때마다 필요 동의 항목을 체크할 수 있게 수정
2) 오류 화면이 출력된다.
해결 : 출력된 오류 로그를 확인했더니 null처리를 하지 못한 부분에서 발생한 예외였음. 수정 완료
3) 최근 전송 목록을 조회할 수 있으면 좋을 것 같다.
해결 : 메세지 입력 화면의 하단에서 조회할 수 있게 추가
아쉽게도 이 웹애플리케이션은 Kakao Developers에 등록된 내 팀원들끼리만 사용할 수 있으며, 모든 사용자에게 지원하려면 사업자 등록을 해야 했다.
그래도 SpringBoot, OAuth 2.0, 외부 API에 대해 더 자세히 이해할 수 있는 계기가 되었으며, 사용자의 편리를 위해서라면 그 만큼 개발자의 헌신이 필요함을 다시 한번 깨달았다.
또한 웹애플리케이션을 보고 신기해한 지인을 봤을 때 개발자로서 보람이 있었고, RESTAPI의 사용법은 서비스마다 비슷하기 때문에 다른 외부 API들도 어렵지 않게 사용할 수 있다는 자신감을 얻게 되었다.
댓글