게시글
velca
벨바카
5주
개발 서버를 위한 임시 도메인, ngrok

구글 OAuth 인증이 포함된 웹 앱을 웹뷰WebView를 이용한 하이브리드 앱으로 만드는 과정에서 도메인 문제가 발생했다.

일반적으로 웹 개발을 할 때 localhost 하나면 충분했는데 앱의 웹뷰에서는 IP를 이용하거나 도메인을 이용한 url을 제공해야만 했다.

처음엔 IP를 이용해서 웹뷰를 실행했는데 문제는 구글 OAuth의 승인된 JavaScript 원본승인된 리디렉션 URI에 IP와 포트를 입력할 수 없다는 것이었다.

그래서 문제 해결을 위한 방법을 알아보다가 Ngrok 라는 것을 알게 됐다.

Ngrok는 외부망에서 localhost로 접속할 수 있게 도와주는 툴로, 설치 후 명령어 몇 줄로 간단하게 시작할 수 있다.

설치 방법은 여기 들어가면 자세히 나온다.

내 경우 Windows를 사용하기 때문에 Chocolatey를 이용하거나 직접 설치 파일을 다운 받을 수 있는데, 그냥 마음 편하게 설치 파일로 설치했다.

참고로 설치 파일은 그냥 .exe 파일 하나인데, 파일을 다운 받고 나면 환경 변수에서 해당 파일에 접근할 수 있게 해줘야 ngrok 명령어를 사용할 수 있게 된다.

설정이 완료되면 우선 인증 절차를 진행해줘야 한다.

Ngrok 홈페이지에서 계정을 생성하고 대시보드에 들어가면 제공되는 명령어를 통해 인증을 진행할 수 있다.

ngrok config add-authtoken ${your-auth-token}

이후 아래 명령어를 이용해 현재 localhost의 특정 포트를 위한 임시 도메인을 생성할 수 있다.

ngrok http http://localhost:4200

줄여서 포트 번호만 제공할 수도 있다.

ngrok http 4200

위와 같이 나오면 성공이다.

여기서 Forwarding 부분에 있는 도메인을 구글 OAuth 인증 정보에 등록해주고, 웹뷰에서 해당 도메인으로 localhost에 실행중인 앱에 접근하면 된다.