react-native-webviewは以前ご紹介したとおり、既存のWeb資産をreact-nativeアプリ上で使いまわせるため非常に便利ですが、いくつか注意点があります。 例えばOAuth認証をしている画面を描画した場合などです。特にGoogleはWebViewからのOAuth認証をブロックしているため、通常では利用することができません。
react-native-webviewを導入済みreact-native-webviewでGoogleのOAuthを行う場合、403が返ってきて使用することができません。
これは、Googleが2016年に公開した記事でも語っているとおり、ネイティブのweb-viewからの認証をブロックしているためです。
react-nativeからGoogleのOAuthを行う場合、google-signinなどの専用ライブラリを使うことが推奨されています。
今回は、あくまで裏技的な方法でreact-native-webviewでGoogleのOAuthをできるようにした内容なので、実際にリリースするアプリ等で使用することはオススメしません。
方法はいたって簡単で、WebViewのuserAgentを改竄するだけです。
どうやらGoogle側はuserAgentの内容を参照しているようで、403が返るかどうかは下記のように分かれました。
// NG
Mozilla/5.0 (Linux; Android 10; 【機種名】; wv)....
// OK
Mozilla/5.0 (Linux; Android 10; 【機種名】)....どうやらwvの文字列の有無でチェックしているようです。
react-native-webviewにはuserAgentというプロパティが用意されているので、そこに任意の内容を記載するだけで突破できました。
import {WebView} from 'react-native-webview';
// ...略
<WebView source={{uri : "...任意のURL"}} userAgent={"test"} />再度注意ですが、これはあくまで裏技のようなものです。 実際にアプリ開発を行う場合は、正規の方法で認証を行うようにしましょう。
今回は、GoogleのOAuth認証に関するWebViewのブロックをuserAgentの改竄という方法で突破できた件をご紹介しました。
内部的にWebViewであるかどうかの判定はどうやっているのかな？と気になっていたので、userAgentで判別しているということが分かり、少し拍子抜けしました。
いずれこの抜け道も改修される可能性が高いので、認証を通す際は正規の手順で行いましょう。