웹뷰에서 소셜 로그인시 문제 해결하기

🧐 Intro

웹뷰에서 소셜로그인을 구현하는게 이렇게 어려울줄이야!
웹뷰 환경에서 소셜로그인에 대한 레퍼런스도 적어서 힘들었다.

🏞️ Environment

개발 환경은 다음과 같다.

• web: next.js
• app: react-natvie, expo

RN 앱에서 웹뷰 브라우저를 사용해 web을 띄운 애플리케이션이다.

👿 문제

개발 환경 문제

기존 소셜로그인의 redirect_url은 localhost, 배포된 도메인을 등록해두었다.
실제 모바일 기기에서는 localhost로 접속할 수 없고 내부 IP(192.0.140.1 등)로 접속해야한다.
그러면 redirect_url missmatch 에러가 뜰 것이다. 내부 IP가 등록되어 있지 않으니까!

개발자 개개인의 내부 IP를 등록하는 것은 말이 안된다.
내부 IP는 자동으로 언제 바뀔지 모른다.

Kakao Login

Kakao Login을 사용할 때는, kakaotalk 애플리케이션과 연동이 안되는 문제가 있었다.
모바일 애플리케이션에서 카카오톡과 시작하기 버튼이 나타나지 않았다.
ID, PW를 일일이 쳐야한다면 UX가 너무너무너무 나빠진다.

Google Login

403 error: disallowed_useragent
Google 에서는 webview 브라우저 자체를 차단한다.

다른 블로그들은 userAgent를 강제로 바꾸어 우회하는 방법을 소개했다.
하지만 userAgent를 바꿔버리면 다양한 문제가 발생할 수 있다.
어떤 OS를 사용하는지, 어떤 기기인지 식별할 수 없게된다.
이러한 정보들로 최적화된 콘텐츠를 제공할텐데, 그럴 수 없게된다.
절대 바꾸지말자

👼🏻 해결

개발 환경 문제

에뮬레이터나 시뮬레이터 등 가상 모바일 기기를 띄우는 방법을 선택했다.
가상 기기에서는 localhost 서버로 접근이 가능하다.

Google, Kakao Login

외부 브라우저를 사용하면 Google, Kakao 문제 모두 해결된다.
웹뷰가 아닌 외부 브라우저를 띄우게 된다면 카카오톡과 연동하기 버튼이 나타나고,
chrome, safari 등의 브라우저는 Google에서 당연히 차단하지 않는다.

전제적인 흐름은 아래 그림과 같다.

외부브라우저에서 소셜로그인 완료시 받은 code 또는 token을 웹뷰로 넘겨받아야한다.

이게 가능하려면

• 외부 브라우저 → 앱
• 앱 → 웹뷰

통신이 가능해야한다.
결론 부터 말하면 가능하다.

웹뷰와 외부 브라우저가 바로 통신하면 더 간단하지만 불가능하다.
같은 브라우저 끼리는 message event 통신이 가능하지만, 다른 브라우저라면 불가능하다.

외부 브라우저 → 앱

deep link를 사용하면 통신할 수 있다.
공식 문서에 자세하게 설명 되어있으니 간단하게만 짚고가자.

// app.config.js or app.json
{
  "expo": {
    "scheme": "myapp"
  }
}

위와 같이 설정해두면, myapp:// 으로 redirect 시키면 앱으로 이동한다.
query parameter를 사용해 소셜로그인 후 받은 코드 또는 토큰을 앱으로 전송할 수 있다.
myapp://?code=code

앱 → 웹뷰

message event로 통신이 가능하다.
이것도 아래 블로그에 잘 설명해두었다.
RN-웹뷰-통신하기

이것도 간단하게만 짚고 넘어가자

앱에서 이렇게 보낼 수 있고

// app
webviewRef.current.postMessage("메시지입니다.")

웹에서 이렇게 받을 수 있다.

// web
window.addEventListner("message", handler);

🙃 느낀점

아주 간단한 Oauth라고 생각했지만, Webview에서 예상치 못한 문제를 여러번 만났다.
처음엔 'webview에서 Oauth 자체가 불가능한가?' 생각도 들었지만, 하나 하나 해결할 때마다 쾌감이 😀
-끝-