sunJ0120
commented
3 months ago 이거 react와 같은 웹앱의 경우는 localhost:3000번 포트를 기반으로 동작하는 거라 localhost가 열려있어서 이런 화면이 안뜨는건데, 우리같은 네이티브 어플의 경우 웹뷰를 띄우기는 하지만 따로 localhost 서버가 연동이 되어 있는것이 아니라, 웹뷰만 띄운 것이기 때문에 redirect url인 localhost:3000을 처리해줄 서버가 띄워져 있지 않아서 발생하는 에러입니다!
차후 redirect url이 도메인 주소로 변경된다면 해결 될 것으로 예상하고 있긴 한데, 시도를 해봐야 할 것 같습니다. 관련된 자세한 내용은 영상으로 찍어서 올리겠습니다!
타임페이의 카카오 로그인과 연결하여 카카오 서버에서 토큰을 받아오고 auth서버에서 user정보를 가져오는 것에는 문제가 없지만 타임페이의 프론트는 웹앱으로 구현된것과 달리 시간은행은 네이티브 앱으로 구현되어 카카오 로그인 화면(웹)에서 다시 네이티브앱으로 돌아오는 부분이 매끄럽지 못하다.
카카오에서는 네이티브 앱방식으로 로그인 인가 토큰을 전달하는 방식을 제공하고 있지만 rest api를 기반으로 구현된 백엔드 방식과 맞지 않아 flutter_inappwebview를 사용하여 rest api방식으로 변경하였다. 이 부분에서 앱이 redirect uri를 제대로 받아들이지 못하고 웹화면에ERR_CONNECTION_REFUSED 에러가 계속 발생하였다.
그래서 인가 코드랑 값은 모두 받아올 수 있지만 웹화면이 돌아오지 못하는 문제를 해결하고자 카카오에서 필요한 정보를 읽어온 이후에 프론트에서 강제로 웹화면을 종료하고 앱으로 돌아오게 구현했다.
이 방식으로 생긴 문제점