2018年6月1日金曜日

react-nativeでWebView内のCookieをjsのコードのみで削除するには的なお話

  • このエントリーをはてなブックマークに追加

そもそもWebViewのCookieを削除する場面ってある?と思ったんだけども、最近instagramのAPIを簡単に扱うためのライブラリを作った。
watanabeyu/react-native-simple-instagram
これはまぁ以前作ったwatanabeyu/react-native-simple-twitterとほぼ同じ的なもので、
とりあえずreact-native linkとか必要なしにjsだけでinstagramのAPIを叩けるようにしましょう的な。
Twitterと違ってInstagramのAPIはかなり実装は楽だった。

ただ問題になるのはAPIを使うためにTwitterもだしInstagramもだけど、ログインをする必要がある。
Twitterの場合は都度このアカウントでよいですか?みたいな表示を出してくれるけど、Instagramの場合はそういうアラートも出ないのでアカウントの切り替えが出来ない。
Cookieが残っているからというのが理由なんだけど、WebViewのメソッドだったりでCookieを削除するようなものはなかったりする。
ちなみにiOSだったらNSHTTPCookieStorageに保存されているのでここをいじらなければいけない。
ということで今日はnativeをbridgeしなくてもWebViewのCookieを削除するには的なお話をば。

通常Cookieを削除するにはreact-native-cookiesみたいなブリッジ系のライブラリを使わないといけない。
ただ今回の趣旨というか自分なりのこだわりというかjsオンリーでいきたい。

で、先に結論からいうと、NativeModules.Networking.clearCookiesというメソッドを使えばCookieを削除できる。
ちなみにこれはhttps://facebook.github.io/react-native/には記載されていない。
というよりもNativeModulesの情報についてがあまり載っていないというのが正確な言い方になるんじゃないかと。

RCTNetworking.ios.js
とにかくまぁこのNativeModules.Networking.clearCookies(callback)を任意のタイミングで使ってあげることで削除できる。
ちなみにコールバックを入れないとクラッシュしてしまうので要注意。

componentDidMount(){
  NativeModules.Networking.clearCookies(() => {})
}

こんな感じで。

ってなわけでドキュメントだけじゃなくてソースコードも見ることで可能性が広がるわけで。
個人的にはブリッジとかexpoとかCRNAのデタッチなんかはよほどのことがない限りする必要はないと思っているわけで。
ということでNativeModulesをちゃんと掘っていけば意外となんとかなるんじゃないかということがわかった的なみたいな。

Adsense