如何在离子电容器 React 上设置验证码

Question

有人设法使 recapcha 在 ionic 上工作吗？

我计划使用 Appflow 进行部署。

我设法让它在我的本地环境中工作，但我的问题是当我将它部署在应用程序流上时。它有错误“不在该站点密钥支持的域列表中。”

我正在使用该套件

react-google-recaptcha

。

<ReCAPTCHA
    ref={recaptchaRef}
    name="captcha"
    sitekey={siteKey}
    onChange={onChange}
    onExpired={() => {
        recaptchaRef.current.reset();
        onExpired();
    }}
/>

移动应用程序没有正确的域，那么我该如何使其工作？

或者移动应用程序是否有替代验证码来防止垃圾邮件？

Answer 1

您是否尝试过切换到特定于移动设备的 recaptcha 软件包，例如适用于 Android 的 safetyNet 或 recaptcha ios sdk？您使用 Appflow 的 React-google-recaptcha 组件实现的效果非常适合基于 Web 的应用程序，但由于域验证要求，在移动应用程序环境中可能会出现问题。

但是，如果您想继续使用

react-google-recaptcha

包

，您可以考虑这是一个解决方法

• 在 google recaptcha 管理控制台中将域设置为 localhost
• 您仍将实现服务器端验证

在客户端捕获验证码响应

<ReCAPTCHA
  ref={recaptchaRef}
  name="captcha"
  sitekey={siteKey}
  onChange={onChange}
  onExpired={() => {
    recaptchaRef.current.reset();
    onExpired();
  }}
/>

此外，在您的服务器上使用

siteverify

验证验证

const axios = require('axios');

// Example POST request for server-side validation
const verifyRecaptcha = async (recaptchaToken) => {
  const secretKey = 'your_secret_key';

  const response = await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`,
    {},
    {
      params: {
        secret: secretKey,
        response: recaptchaToken,
      },
    }
  );

  const { success, score } = response.data;
  if (success) {
    // reCAPTCHA was successfully validated
    return true;
  } else {
    // reCAPTCHA validation failed
    return false;
  }
};