[플러터] 로그인 경험을 한단계 끌어올리기 (feat.웹뷰 리액트)

들어가며

사이드 프로젝트를 하면서 브라우저로 제공하던 서비스를 웹뷰형태로 확장을 했습니다.

근데 간편 로그인이 제대로 동작하지 않는 문제가 발생했고,

결국 플러터에서 로그인을 처리하여 브라우저에 넘기는 식으로 리펙토링했던 경험에 대해 살펴보겠습니다.

문제 인식 | 간편 로그인이 안되요

일단 간편 로그인이 무엇인지에 대해 살펴보겠습니다.

사이드 프로젝트에서 카카오톡을 이용한 간편 로그인을 지원하고 있습니다.

바로 아래 사진을 보면 브라우저의 경우 카카오톡으로 로그인 버튼을 누르게 되면 해당 핸드폰에 카카오톡이 설치되어 있으면 별도의 입력 없이 카카오톡으로 인증을 하고 로그인이 완료됩니다.

물론 카카오톡에서 해당 서비스(여기서는 사이드 프로젝트)에서 로그인을 허용하겠냐는 다이얼로그 창과 함께요.

간편로그인 적용 전 후

쨋든 이게 왜 문제가 되느냐 하면 이게 하이브리드의 웹뷰로 가면 보안상 또는 개발 여력 상의 이후로 웹뷰상태에서 카카오톡 간편 로그인을 지원하지 않습니다.

그래서 아이디와 비밀번호를 통해 로그인을 해야 하죠. 하지만 대다수의 유저들은 카카오톡의 아이디와 비밀번호를 모르고 있습니다. 특히나 중장년층의 경우 더욱 모르지만 우리 서비스는 생각보다 중장년층의 이용률이 높은 서비스였습니다.

문제 해결

이제 문제를 인식했으니 해결방법을 생각해보겠습니다.

1. userAgent를 건드려서 앱이 아닌 브라우저 인척 해보자
2. 어떻게든 방법을 찾아내서 웹뷰에서 인증시켜보자
3. 플러터에서 처리하고 정보만 리액트로 넘기자

방법 1 | userAgent 건드리기 - 패스

일단 1번 과정을 시도해봤습니다. userAgent를 가져와서 웹뷰상에 userAgent를 가지고 와서 동작시켜봤습니다.

일단 적용시켜보기 전에 플러터의 웹뷰에 대해 간략히 설명해보겠습니다.

flutter_inappwebview | Flutter Package

플러터에서는 패키지를 통해 해당 기능을 사용할 수 있는데, 그중에 웹뷰로 유명한 패키지는 Inappwebview가 있습니다.

그리고 해당 패키지는 userAgent를 설정하는 옵션을 제공하고 있습니다.

flutter inappwebview의 option

일단 저렇게 제공을 하게 되면 로그인이 브라우저 인척 동작은 합니다.

근데 userAgent를 바꾸는 방법은 올바른 방법이 아닌 사파적인 방법인듯하여 좀 더 좋은 방법을 찾아보기로 했습니다.

방법 2 | 어떻게든 인식시켜보자 - 실패

솔직히 이 방법이 최고라고 생각했습니다. 그리고 여러 가지 우회방법이 있다는 글을 찾고 성공했다는 글을 봤는데,

아무래도 플러터에 대한 공부가 깊지 않고 시간을 쓰기 애매해서 이 방법도 넘어가기로 했습니다.

방법 3 | 플러터에서 로그인 처리 - 성공

결국 돌고 돌아 정석인 방법으로 돌아왔습니다.

카카오 개발 문서상에서도 플러터 로그인을 공식적으로 지원하고 있습니다.

Kakao Developers

그래서 들어가서 공식문서를 따라가면서 기본적인 간편 로그인은 성공하였습니다.

리액트와 연결하기

간편 로그인을 처리하고 플러터에서 데이터를 들고 있는데 이제 이 정보를 리액트(자바스크립트)로 전달하는 방법이 필요했습니다.

그리고 전달하는 방법은 크게 3가지가 있습니다.

• JavaScript Handlers
• Web Message Channels
• Web Message Listeners

저는 이중에 JavaScript Handlers를 통한 통신으로 구현하기로 하였습니다.

코드로 보면 로그인 버튼에 이벤트를 붙이면 됩니다.

여기서 localStorage에 { "roundin" : "webview" }가 있는지 확인하는 코드가 있습니다.

그리고 이 값을 통해 flutter에 callKakaoLogin을 콜 하는가 아니면 브라우저 단에서 로그인을 처리하는가를 판단하게 됩니다.

근데 하필 왜 localStorage에 해당 값을 통해 판별하는 방식으로 구현을 했느냐 하면, 

webview라고 판단할 수 있는 공식적인 방법이 없다는 것이었습니다. 라이브러리를 검색해보면 아직 주류가 될만한 라이브러리가 없기도 하고 최신화가 안되어있어 라이브러리를 사용하기엔 약간 문제가 생길 것 같다는 판단을 했습니다.

그래서 아래와 같이 flutter의 inappwebview로 실행되면 localStorage에 해당 값을 저장하고 이후 사용하는 방식으로 구현을 해보았습니다.

flutter와 통신을 위한 채널링 컴포넌트

그리고 flutter의 코드에서 webViewController에 자바스크립트 핸들러를 붙이고 같은 핸들러 이름으로 선언을 하면 됩니다.

또한 카카오톡 로그인 자체가 비동기 처리이다 보니 모든 처리가 완료되면 return 하는 식으로 구현하시면 되겠습니다.
(저는 테스트를 위해 현재 시간을 주는 방식으로 코드는 작성했습니다.)

flutter inappwebview 내부 코드

Tip | flutter webview 개발환경

flutter와 webview 내부의 리액트 앱과 통신을 테스트하기 위해서 다음과 같은 과정을 거쳤어야만 했습니다.

1. flutter 코드 수정 -> 바로 반영
2. 리액트 코드 수정 -> 빌드 후 배포 -> flutter 새로고침

근데 빌드 후 배포되는 과정이 aws amplify상으로 10분이 걸리는지라 간단한 테스트하기가 무척이나 귀찮았습니다.

그럴 때는 https://ngrok.com/ 를 통해 localhost를 public으로 변환하여 해당 url로 flutter 웹뷰를 동작시키면 됩니다.

ngrok - Online in One Line

그렇게 되면 상대적으로 속도는 느릴지라도 바로 localhost에서 작성한 코드를 flutter webview에 적용시킬 수 있어 수월한 개발환경을 가져갈 수 있습니다.

마치며

실제 운영되는 서비스와 연습용 서비스는 완성도와 편의성에서 차이가 납니다.

솔직하게 만약 연습용 서비스였다면 간편 로그인을 구현하는 건 귀찮아서 생략했을 겁니다. 하지만 아무래도 실제 운영하는 서비스이다 보니 좀 더 좋은 사용자 경험을 위해 이번에 구현을 하고 간략하게 정리해보았습니다.

혹시 더 좋은 방법과 잘못된 부분이 있다면 말씀해주시면 감사하겠습니다 ^^