如何在React Native WebView中登录后加载WordPress WebApp

方案1：直接在WebView内完成原生登录流程 #

这是最直接的实现方式，让WebView加载WordPress WebApp的首页（未登录状态下会自动跳转到登录页），用户在WebView的页面内输入账号密码完成登录后，WebView会自动保存WordPress的会话Cookie，后续访问WebApp时就能维持登录状态。

需要注意WebView的Cookie配置，确保会话持久化：

• 使用react-native-webview库时，显式开启sharedCookiesEnabled
• iOS端需设置thirdPartyCookiesEnabled={true}，避免Cookie被拦截
• Android端默认自动保存Cookie，无需额外配置

示例代码：

import { WebView } from 'react-native-webview';

const WordPressWebView = () => {
  return (
    <WebView
      source={{ uri: 'https://your-wordpress-webapp-url.com' }}
      sharedCookiesEnabled={true}
      thirdPartyCookiesEnabled={true}
      style={{ flex: 1 }}
    />
  );
};

export default WordPressWebView;

方案2：React Native原生登录，同步会话到WebView #

如果希望用户在React Native原生界面完成登录，再将状态同步到WebView，可以借助WordPress的REST API实现：

1. 在WordPress后台安装并启用JWT Authentication for WP REST API插件，在wp-config.php中配置JWT密钥
2. 在React Native中调用JWT登录接口获取token，再通过token获取会话Cookie，最后注入到WebView中

示例代码：

import { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { WebView } from 'react-native-webview';

const WordPressLoginWebView = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [webViewUri, setWebViewUri] = useState('');
  const [injectScript, setInjectScript] = useState('');

  const handleLogin = async () => {
    // 调用JWT登录接口
    const response = await fetch('https://your-wordpress-url.com/wp-json/jwt-auth/v1/token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password }),
    });
    const data = await response.json();

    if (data.token) {
      // 获取会话Cookie
      const cookieRes = await fetch('https://your-wordpress-url.com/wp-admin/admin-ajax.php?action=get_current_user', {
        headers: { Authorization: `Bearer ${data.token}` },
      });
      const cookies = cookieRes.headers.get('set-cookie');
      
      // 生成注入WebView的Cookie脚本
      const script = `document.cookie = "${cookies}"; window.location.href = "https://your-wordpress-webapp-url.com";`;
      setInjectScript(script);
      setWebViewUri('https://your-wordpress-webapp-url.com');
    }
  };

  return (
    <View style={{ flex: 1 }}>
      {!webViewUri ? (
        <View style={{ padding: 20 }}>
          <TextInput
            placeholder="用户名"
            value={username}
            onChangeText={setUsername}
            style={{ borderBottomWidth: 1, marginBottom: 10, padding: 8 }}
          />
          <TextInput
            placeholder="密码"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
            style={{ borderBottomWidth: 1, marginBottom: 20, padding: 8 }}
          />
          <Button title="登录" onPress={handleLogin} />
        </View>
      ) : (
        <WebView
          source={{ uri: webViewUri }}
          injectedJavaScriptBeforeContentLoaded={injectScript}
          sharedCookiesEnabled={true}
          style={{ flex: 1 }}
        />
      )}
    </View>
  );
};

export default WordPressLoginWebView;

方案3：手动管理WebView Cookie #

如果需要更灵活的Cookie控制，可以使用react-native-cookies库同步Cookie：

1. 安装依赖：npm install @react-native-cookies/cookies --save
2. 在React Native中登录后，将WordPress的会话Cookie存入原生Cookie存储
3. WebView加载时会自动读取这些Cookie，实现登录状态同步

示例代码：

import { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { WebView } from 'react-native-webview';
import CookieManager from '@react-native-cookies/cookies';

const WordPressCookieWebView = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = async () => {
    // 调用WordPress登录接口获取Cookie
    const response = await fetch('https://your-wordpress-url.com/wp-login.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: `log=${username}&pwd=${password}&wp-submit=Log+In`,
    });

    const cookies = response.headers.get('set-cookie');
    if (cookies) {
      // 提取并设置登录Cookie
      const loggedInCookie = cookies.split('wordpress_logged_in=')[1].split(';')[0];
      await CookieManager.set('https://your-wordpress-webapp-url.com', {
        name: 'wordpress_logged_in',
        value: loggedInCookie,
        domain: '.your-wordpress-webapp-url.com',
        path: '/',
        secure: true,
        httpOnly: true,
      });
      setIsLoggedIn(true);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      {!isLoggedIn ? (
        <View style={{ padding: 20 }}>
          <TextInput
            placeholder="用户名"
            value={username}
            onChangeText={setUsername}
            style={{ borderBottomWidth: 1, marginBottom: 10, padding: 8 }}
          />
          <TextInput
            placeholder="密码"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
            style={{ borderBottomWidth: 1, marginBottom: 20, padding: 8 }}
          />
          <Button title="登录" onPress={handleLogin} />
        </View>
      ) : (
        <WebView
          source={{ uri: 'https://your-wordpress-webapp-url.com' }}
          sharedCookiesEnabled={true}
          style={{ flex: 1 }}
        />
      )}
    </View>
  );
};

export default WordPressCookieWebView;

内容的提问来源于stack exchange，提问作者farshid.chegini