如何在Expo Web中实现reCAPTCHA 解决postMessage读取报错问题

报错原因 #

你遇到的Cannot read properties of undefined (reading 'postMessage')报错，是因为react-native-web-webview的Web端基于iframe实现，但没有完全对齐原生WebView的API接口，postMessage方法的调用上下文丢失。你用到的第三方reCAPTCHA库依赖WebView的postMessage做跨上下文通信，所以也会触发相同报错。

最优实现方案（无需WebView） #

Expo Web本质就是标准React Web应用，完全不需要嵌套WebView/iframe实现reCAPTCHA，直接对接官方脚本即可，稳定性更高，也不会出现通信报错。

实现步骤 #

1. 在Expo项目的Web入口HTML文件（默认路径为web/index.html）的<head>标签内添加reCAPTCHA官方脚本
2. 封装跨平台reCAPTCHA组件，仅在Web端渲染验证码逻辑
3. 业务代码直接调用组件获取验证token即可

代码示例 #

1. 入口HTML添加脚本

<script src="https://www.google.com/recaptcha/api.js"></script>

2. 封装ReCaptcha组件

import { useEffect, useRef } from 'react';
import { Platform } from 'react-native';

const ReCaptcha = ({ siteKey, onVerify, onError }) => {
  const captchaContainerRef = useRef(null);
  const widgetIdRef = useRef(null);

  useEffect(() => {
    // 非Web端直接返回
    if (Platform.OS !== 'web') return;
    if (!window.grecaptcha) {
      onError?.('reCAPTCHA脚本加载失败');
      return;
    }
    // 渲染验证码组件
    widgetIdRef.current = window.grecaptcha.render(captchaContainerRef.current, {
      sitekey: siteKey,
      callback: (verifyToken) => onVerify?.(verifyToken),
      'expired-callback': () => onVerify?.(null),
      'error-callback': () => onError?.('验证码加载异常')
    });
    // 组件卸载时重置验证码
    return () => {
      if (widgetIdRef.current) {
        window.grecaptcha.reset(widgetIdRef.current);
      }
    };
  }, [siteKey, onVerify, onError]);

  if (Platform.OS !== 'web') return null;
  return <div ref={captchaContainerRef} />;
};

export default ReCaptcha;

3. 业务代码调用

<ReCaptcha
  siteKey="你的reCAPTCHA站点key"
  onVerify={(token) => {
    if (token) {
      // 验证通过，将token传给后端完成二次校验
      console.log('验证成功，token为：', token);
    } else {
      // 验证码过期，提示用户重新验证
      console.log('验证码已过期');
    }
  }}
  onError={(err) => console.error('验证码错误：', err)}
/>

常见疑问解答 #

• 是否需要使用HTML和脚本进行开发？仅需要在入口HTML添加一行脚本引用，后续逻辑全部用React代码实现即可，无需额外开发独立HTML页面。
• 如果需要兼容原生端（Android/iOS），可以在原生端继续使用WebView方案，上述组件已经做了平台判断，不会影响原生端逻辑。

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