React Native WebView无法自动登录：APP已登录仍需输入凭证

问题原因 #

WebView拥有独立的浏览器会话，和APP原生的登录状态（如本地存储的token、Cookie）不共享，导致Web端无法识别用户已在APP内完成登录。

解决方案 #

1. 直接加载URL并注入登录Cookie（推荐）

去掉当前代码中的iframe嵌套，直接用WebView加载目标链接，并将APP的登录Cookie注入WebView的会话中，确保Web端能识别登录状态。

首先安装Cookie管理库：

npm install @react-native-cookies/cookies --save
# 或 yarn add @react-native-cookies/cookies

修改Details.js：

import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import CookieManager from '@react-native-cookies/cookies';
import Colors from './path-to-your-colors'; // 替换为你的Colors文件路径
import { StatusBarHeight } from './path-to-your-statusbar-util'; // 替换为你的StatusBarHeight工具

const Details = ({ route }) => {
  const { link, tokenID } = route.params;

  // 注入登录Cookie到WebView
  const injectAuthCookie = async () => {
    // 替换为Web端实际使用的Cookie键名，比如auth_token、session_id等
    await CookieManager.set({
      name: 'auth_token',
      value: tokenID,
      domain: 'my-website.com', // 必须和目标网站的域名一致
      path: '/',
      secure: false, // 网站是HTTPS则设为true
      httpOnly: false,
    });
  };

  return (
    <View style={{flex: 1, backgroundColor: Colors.white}}>
      <WebView
        style={{flex: 1, marginTop: StatusBarHeight}}
        originWhitelist={['*']}
        javaScriptEnabled={true}
        onLoadStart={injectAuthCookie} // 页面加载前注入Cookie
        source={{ uri: link }} // 直接加载目标URL，移除iframe嵌套
      />
    </View>
  );
};

export default Details;

2. 通过JavaScript注入传递token

如果Web端支持通过JS接收token并自动完成登录，可以在WebView加载后注入脚本，将token传递给网页：

修改Details.js的WebView部分：

<WebView
  style={{flex: 1, marginTop: StatusBarHeight}}
  originWhitelist={['*']}
  javaScriptEnabled={true}
  injectedJavaScript={`
    // 向网页发送登录token
    window.postMessage({ type: 'APP_LOGIN_TOKEN', token: '${tokenID}' }, '*');
  `}
  onMessage={(event) => {
    // 可选：处理网页返回的登录结果
    const message = JSON.parse(event.nativeEvent.data);
    if (message.type === 'LOGIN_SUCCESS') {
      // 登录成功后的逻辑
    }
  }}
  source={{ uri: link }}
/>

同时需要在Web端的页面中添加监听逻辑：

window.addEventListener('message', (event) => {
  if (event.data.type === 'APP_LOGIN_TOKEN') {
    const token = event.data.token;
    // 调用Web端的登录接口或设置本地存储，完成自动登录
    localStorage.setItem('auth_token', token);
    // 刷新页面或触发登录状态更新
    window.location.reload();
  }
});

3. 确保URL参数被Web端正确处理

你当前的链接已经携带了token_id，但需要确认Web端是否能从URL中提取该参数并自动完成登录。如果Web端未处理该参数，需要在Web端的登录逻辑中添加从URL获取token_id并验证的代码。

关键注意事项 #

• 确保Cookie的domain和path与Web端的设置完全一致，否则Cookie无法生效
• 若网站使用HTTPS，将secure设为true，提升安全性
• 避免在URL中暴露敏感凭证（如token），优先使用Cookie或JS注入的方式

内容的提问来源于stack exchange，提问作者Nomel