react-native-webview안에서 구글 로그인을 사용하는 방법

한 3일 동안 삽질하다가 드디어 해결했습니다.

다른 분들은 고통받지 않길 바라며... 여기에 해결법을 공유하고자 합니다.

환경

react app에서 react-google-login을 사용하는 웹앱을 하나 만들고, 해당 앱을 expo + react-native + react-native-webview를 사용하여 호스팅 할 때 생기는 오류들이며, 해결방법입니다.

1. Authorization Error
Error 403: disallowed_useragent 오류

해당 오류는 구글 측의 보안 강화로 인하여 특정 웹브라우저만 API 이용을 허용하게 되면서 발생하는 오류입니다.

해결방법은 간단합니다. 해당 웹뷰의 웹브라우저 정보를 변조해서 보내주시면 됩니다.

 

react-native Code:

react-native-webview 컨트롤에 userAgent 칸에 아래와 같이 입력해줍니다.

userAgent='Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36'

 

전체 코드

import * as React from 'react'
import { StatusBar } from 'react-native'
import { WebView } from 'react-native-webview'

export default class App extends React.Component {
  render() {
    return (
      <>
        <StatusBar backgroundColor='#121212' barStyle='light-content' />
        <WebView
          source={{ uri: 'URL' }}
          // To avoid 403 disallowed useragent
          userAgent='Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36'
          sharedCookiesEnabled={true}
          thirdPartyCookiesEnabled={true}
        />
      </>
    )
  }
}

 

다른 User Agent를 원하시면, https://developers.whatismybrowser.com/useragents/explore/operating_system_name/android/

Android User Agents

여기에서 흔한 User Agent들을 찾으실 수 있습니다.

해당 코드를 입력하고 나면, 위와 같이 정상적으로 기능을 사용하실 수 있습니다.

로그인 후 "One moment please..." 무한 로딩

해당 오류는 react-native-webview의 popup 기능에서 발생하는 오류입니다.

해당 오류는 react-native에서 쉽사리 해결할 수는 없으며, react app에서의 react-google-login을 수정해주셔야 합니다.

 

react-google-login code:

수정을 위해 Google Login element 에다가 아래의 코드를 입력해줍니다.

uxMode='redirect'
isSignedIn={true}

일단 uxMode='redirect' 코드는 popup에서 redirect로 형식을 바꿔줍니다. 즉 react-native-webview에서 popup이 안 닫혀서 무한 로딩하는 것을 막아줍니다.

하지만 저 코드만 넣는다면 redirect후 onSuccess event가 정상적으로 트리깅되지 않아서 유저 정보가 돌아오지 않습니다.

그래서 필요한 것이 isSignedIn={true} 코드입니다.

위의 코드는 웹이 로딩될 때 로그인 정보가 들어오는지 확인하고, onSuccess callback을 때려주는 코드입니다.

 

아래는 전체 코드입니다.

<GoogleLogin
        clientId='Client ID'
        buttonText='Sign in with Google'
        onSuccess='On success callback fucntion'
        onFailure='On failure callback fucntion'
        cookiePolicy='cookiePolicy'
        uxMode='redirect'
        isSignedIn={true}
        redirectUri='Redirect Uri'
      />

이 코드를 적용하고 나면, 구글 로그인 코드가 로딩된 후 자동으로 사용자 정보가 넘어오게 됩니다.

프로젝트 다 만들어놓고 3일 동안 이 오류에 발목 잡혀 있었네요...

이런 문제를 가지고 있으신 분들이 있으시다면 이걸로 해결되었으면 좋겠네요.

이상입니다. 감사합니다.