Manually set cookies for webview

robertying · Feb 15, 2023 · a97190e · a97190e
1 parent 7ea636b
commit a97190e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -646,6 +646,8 @@ PODS:
   - React-jsinspector (0.71.2)
   - React-logger (0.71.2):
     - glog
+  - react-native-cookies (6.2.1):
+    - React-Core
   - react-native-document-picker (8.1.3):
     - React-Core
   - react-native-pager-view (6.1.4):
@@ -838,6 +840,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - "react-native-cookies (from `../node_modules/@react-native-cookies/cookies`)"
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
@@ -956,6 +959,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-cookies:
+    :path: "../node_modules/@react-native-cookies/cookies"
   react-native-document-picker:
     :path: "../node_modules/react-native-document-picker"
   react-native-pager-view:
@@ -1062,6 +1067,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: c7e028406112db456ac3cf5720d266bc7bc20938
   React-jsinspector: ea8101acf525ec08b2d87ddf0637d45f8e3b4148
   React-logger: 97987f46779d8dd24656474ad0c43a5b459f31d6
+  react-native-cookies: f54fcded06bb0cda05c11d86788020b43528a26c
   react-native-document-picker: 958e2bc82e128be69055be261aeac8d872c8d34c
   react-native-pager-view: b58cb9e9f42f64e50cab3040815772c1d119a2e2
   react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-clipboard/clipboard": "1.11.1",
     "@react-native-community/eslint-config": "3.2.0",
+    "@react-native-cookies/cookies": "6.2.1",
     "@react-navigation/bottom-tabs": "6.5.5",
     "@react-navigation/native": "6.1.4",
     "@react-navigation/native-stack": "6.9.10",

diff --git a/src/components/AutoHeightWebView.tsx b/src/components/AutoHeightWebView.tsx
@@ -1,15 +1,19 @@
-import {useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {Linking, Platform} from 'react-native';
 import WebView, {WebViewProps} from 'react-native-webview';
 import {
   WebViewMessageEvent,
   WebViewNavigation,
+  WebViewSource,
+  WebViewSourceHtml,
 } from 'react-native-webview/lib/WebViewTypes';
+import CookieManager from '@react-native-cookies/cookies';
 
 const AutoHeightWebView: React.FC<
   React.PropsWithChildren<WebViewProps>
 > = props => {
   const [height, setHeight] = useState(0);
+  const [cookieString, setCookieString] = useState('');
 
   const webViewRef = useRef<WebView>(null);
 
@@ -45,6 +49,16 @@ const AutoHeightWebView: React.FC<
     true;
   `;
 
+  useEffect(() => {
+    CookieManager.get('https://learn.tsinghua.edu.cn').then(cookies => {
+      setCookieString(
+        Object.entries(cookies)
+          .map(([key, value]) => `${key}=${value.value}`)
+          .join('; '),
+      );
+    });
+  }, []);
+
   return (
     <WebView
       ref={webViewRef}
@@ -56,8 +70,18 @@ const AutoHeightWebView: React.FC<
       onNavigationStateChange={onNavigationStateChange}
       decelerationRate="normal"
       originWhitelist={['*']}
-      sharedCookiesEnabled
       {...props}
+      source={
+        {
+          baseUrl: (props.source as WebViewSourceHtml | undefined)?.html
+            ? 'https://learn.tsinghua.edu.cn'
+            : undefined,
+          headers: {
+            Cookie: cookieString,
+          },
+          ...props.source,
+        } as WebViewSource
+      }
       style={[
         {
           height,

diff --git a/yarn.lock b/yarn.lock
@@ -1842,6 +1842,13 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.3.0.tgz#9e558170c106bbafaa1ef502bd8e6d4651012bf9"
   integrity sha512-+zDZ20NUnSWghj7Ku5aFphMzuM9JulqCW+aPXT6IfIXFbb8tzYTTOSeRFOtuekJ99ibW2fUCSsjuKNlwDIbHFg==
 
+"@react-native-cookies/[email protected]":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@react-native-cookies/cookies/-/cookies-6.2.1.tgz#54d50b9496400bbdc19e43c155f70f8f918999e3"
+  integrity sha512-D17wCA0DXJkGJIxkL74Qs9sZ3sA+c+kCoGmXVknW7bVw/W+Vv1m/7mWTNi9DLBZSRddhzYw8SU0aJapIaM/g5w==
+  dependencies:
+    invariant "^2.2.4"
+
 "@react-native/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"