React Native WebView如何加载处于已登录状态的网站？

方案1：同步登录Cookie（最常用） #

WordPress默认通过Cookie维持登录会话，只要把App端登录后获取的Cookie注入WebView，就能让WebView自动继承登录状态。

实现步骤： #

1. App端完成WordPress登录后，保存返回的核心Cookie（通常包含wordpress_logged_in_*、wordpress_sec_*这类标识）
2. 在WebView加载页面前，将Cookie注入到WebView的浏览器环境中

修改你的代码如下：

import React, { useState } from 'react';
import { ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';

const YourComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  // 替换为App登录后实际获取到的WordPress登录Cookie
  const wordPressAuthCookie = 'wordpress_logged_in_xxxx=xxx; wordpress_sec_xxxx=xxx';

  const injectCookieScript = `
    document.cookie = "${wordPressAuthCookie}";
    window.location.reload();
  `;

  return (
    <>
      <ActivityIndicator visible={isLoading} />
      <WebView
        source={{ uri: 'https://你的WordPress网址' }}
        onLoadStart={() => setIsLoading(false)}
        // 页面加载前注入Cookie
        injectedJavaScriptBeforeContentLoaded={injectCookieScript}
        // 开启Cookie共享
        sharedCookiesEnabled={true}
        // iOS需额外开启第三方Cookie权限
        thirdPartyCookiesEnabled={true}
      />
    </>
  );
};

export default YourComponent;

注意事项：

• 确保Cookie的domain和path与你的WordPress网站完全匹配，否则Cookie无法生效
• Android端需在AndroidManifest.xml中配置网络权限，并确保WebView允许Cookie存储
• iOS端需在Info.plist中开启相关Cookie权限设置

方案2：通过WordPress REST API自动登录 #

借助WordPress的JWT认证插件，在WebView中注入JS代码调用登录接口，自动完成登录。

实现步骤： #

1. 先给WordPress安装并启用JWT Authentication for WP REST API插件
2. App端从安全存储（如react-native-keychain）中取出用户登录凭据
3. 在WebView中注入登录脚本

示例代码：

import React, { useState } from 'react';
import { ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import * as Keychain from 'react-native-keychain';

const YourComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [loginCreds, setLoginCreds] = useState(null);

  React.useEffect(() => {
    // 从安全存储中获取用户登录信息
    const getCreds = async () => {
      const creds = await Keychain.getGenericPassword();
      if (creds) setLoginCreds(creds);
    };
    getCreds();
  }, []);

  const autoLoginScript = loginCreds ? `
    fetch('https://你的WordPress网址/wp-json/jwt-auth/v1/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: "${loginCreds.username}",
        password: "${loginCreds.password}"
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.token) {
        // 将令牌存入Cookie，让WordPress识别登录状态
        document.cookie = "jwt_token=" + data.token + "; path=/; domain=你的域名";
        window.location.reload();
      }
    });
  ` : '';

  return (
    <>
      <ActivityIndicator visible={isLoading} />
      {loginCreds && (
        <WebView
          source={{ uri: 'https://你的WordPress网址' }}
          onLoadStart={() => setIsLoading(false)}
          injectedJavaScriptBeforeContentLoaded={autoLoginScript}
        />
      )}
    </>
  );
};

export default YourComponent;

注意事项：

• 绝对不能在代码中硬编码用户密码，必须从安全存储中读取
• 需在WordPress后台配置JWT插件的密钥和允许的跨域域名

方案3：URL参数传递令牌（仅临时测试用，不推荐生产环境） #

通过URL拼接登录令牌，在WordPress端检测参数并自动登录。

React Native端代码： #

<WebView
  source={{ uri: 'https://你的WordPress网址?auth_token=你的有效令牌' }}
  onLoadStart={() => setIsLoading(false)}
/>

WordPress端代码（添加到主题functions.php）： #

add_action('init', 'auto_login_from_app');
function auto_login_from_app() {
  if (isset($_GET['auth_token']) && !is_user_logged_in()) {
    // 这里需要实现令牌验证逻辑，验证通过后获取用户ID
    $user_id = validate_app_auth_token($_GET['auth_token']);
    if ($user_id) {
      wp_set_current_user($user_id);
      wp_set_auth_cookie($user_id);
      // 重定向去掉URL中的令牌参数，避免泄露
      wp_redirect(home_url());
      exit;
    }
  }
}

注意：此方式存在令牌泄露风险，仅用于临时测试，生产环境禁止使用。

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