[RN] ReactNative Webview 구글 로그인 403: disallowed_useragent 오류

 

[오류 내용]

현재 구현되어 있는 구글 로그인은 구글 로그인 후 타겟 웹 페이지로 Redirect하는 방식으로 로그인을 완료해야하는 Flow이다. 이 과정에서 구글 로그인 페이지로 이동을 하면 disallowed_useragent 에러가 발생이 되어 더 이상 로그인 절차를 진행 할 수 없었다.

---

[오류 원인]

구글이 2016년 10월 20일부터 WebView로 구글 인증을 하지 못하도록 막았기 때문이라고 한다. (참고자료)

---

​[발생 문제]

구글 인증을 위해서는 userAgent 값을 수정하여 우회가 필요하였다.

userAgent 값을 수정하여 우회 하는 방법을 사용하였을 경우, React에서 사용되는 모바일 체크 관련된 기능이 대부분 userAgent를 통해 체크를 하다보니 aos/ios 의 구분이 필요한 기능이나 웹뷰에 맞춰진 기능들이 모두 비정상적으로 작동하였다.

모바일 환경에서 실제 발생 되었던 문제 리스트

• IOS/AOS 구분할 수 있는 방법이 없음. (OS 구분이 필요한 특정 기능에 대한 사용 불가능)
• nice 인증 모듈 같은 경우 화면이 갑자기 확대되어 표시되는 등 오류 발생. (pc버전으로 인식)
• React에서의 모바일 관련된 lib 들이 모두 먹통.
• 간편결제 네이버페이 팝업창 해제 요청 및 기능 사용 불가. (PC버전으로 인식하면서 팝업 오류 발생)

---

[해결 방법]

1. 구글 인증 링크를 WebView로 구현된 인앱 브라우저가 아닌 ChromeCustomTabs로 Open.
   • ChromeCustomTabs에 대해..
2. WebView를 열 때 user-agent를 변경하여 우회.
   • IOS 아이폰 환경에서 앱 실행 했을 경우 UserAgent 예시
     • Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148
   • * IOS 일 경우 “Safari/604.1” 값에 대한 존재 유무에 따라 Webview 구분으로 추정
     • Local Web Chrome 환경에서 userAgent 값 비교하여 확인
     • Safari/604.1 값을 마지막에 추가하여 해결 (없을 경우 Webview ⭕️, 존재할 경우 Webview ❌)
   • AOS 갤럭시 환경에서 앱 실행 했을 경우 UserAgen 예시
     • Mozilla/5.0 (Linux; Android 12; SM-S901N Build/SP1A.210812.016; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/103.0.5060.71 Mobile Safari/537.36
   • * AOS 일 경우 “Chrome/103.0.5060.71" 값에 대한 존재 유무에 따라 Webview 구분으로 추정
     • userAgent 값 중 하나씩 제거해보면서 디버깅
     • Chrome/103.0.5060.71 값을 제거하여 해결

import UserAgent from 'react-native-user-agent'; // React-Native UserAgen 값 받아오는 lib

// Hooks
const [customUserAgent, setCustomUserAgent] = useState('customUserAgent');

// 최초 앱이 실행되고, componentDidMount 시점에 실행.
const changeUserAgent = async () => {
    // UserAgent 데이터 변경
    const userAgent = await UserAgent.getWebViewUserAgent() //asynchronous
      .then(result => {

        const agent =
          Platform.OS === 'ios'
            ? result + ' Safari/604.1' //IOS 인 경우, 마지막에 해당 값 추가
            : result?.substring(0, result?.indexOf('Chrome')); //AOS인 경우, Chrome 부터 제거

        setCustomUserAgent(agent); // 값 세팅

        return result;
      })
      .catch(e => e);
 };

// userAgent 값 변경
<WebView
	userAgent={customUserAgent}
/>

 

 

[참고 자료]

[Chrome custom-tabs]

[error] 403. Error: disallowed_useragent.

[Google Login gives "This browser or app may not be secure"]Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148