cordova/phonegap 应用程序中的 reCaptcha 使用情况

Question

我正在尝试将 google recaptcha 与 cordova html5 应用程序集成。但是cordova在应用中使用了文件协议。因此，在应用程序中使用验证码会得到 "Error: invalid domain for site key"。

我正在使用 cordova 3.5.0 构建应用程序，<access origin="*" /> 添加到 config.xml。

recaptcha 是否只能用于 Web 应用程序而不能用于 hybrid/native aapplications？

Answer 1

由于协议问题，reCaptcha 不能直接在cordova 项目中使用。

-我们必须在单独的 webview

中加载 reCaptcha url

-使用 secure token 加载他们最近引入的 reCaptcha 的方式 (https://developers.google.com/recaptcha/docs/secure_token)

Answer 2

您现在应该使用您的应用程序包名称（2017 年 11 月）。作为 reCaptcha 配置的一部分，您指定将使用该服务的域或移动包名称。如果您使用 "localhost" 进行开发，则必须将其添加到域列表中。

对于移动用户，API密钥对仅对指定的包名称（例如，com.google.recaptcha.test）唯一。

但是，如果您的域名或包名称列表非常长、不稳定或未知，您可以选择在 reCAPTCHA 端关闭域名或包名称检查，而是在您的服务器上进行检查。

安全令牌的使用不建议，因为这现在是已弃用的功能。

参考：

• Domain/Package Name Validation

Answer 3

我使用 cordova-plugin-ionic-webview

成功让它工作

请注意，我的项目不是 Ionic 项目，因此任何 cordova 项目都可以使用它

我做了什么：

• 配置 Re-Captcha admin console 以允许 myapp.local 域
• 配置cordova-plugin-ionic-webview preferences：
  • 在 config.xml 文件中添加一个 <preference name="Hostname" value="myapp.local" />
  • 在 config.xml 文件中添加一个 <allow-navigation href="https://www.google.com/recaptcha/*" />
  • 在 config.xml 文件的 android 的特定部分添加 <allow-navigation href="http://myapp.local/*" />
• 安装 ionic webview 插件：cordova plugin add cordova-plugin-ionic-webview@4.1.3
• 将 recaptcha（在我的例子中是 v3）添加到你的 index.html 文件中：<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=MY_RECAPTCHA_KEY_HERE"></script>

• 在您的 JS 代码中调用 recaptcha API：

  grecaptcha.ready(function() {
    grecaptcha.execute("MY_RECAPTCHA_KEY_HERE", {action: 'my-page'}).then(function(token) {
      console.log("Acquired recaptcha token : ", token);
    }, function() {
      console.error("ReCaptcha token acquisition failed", arguments);
    });
  });