cordova/phonegap应用程序中的reCaptcha用法

Question

我正在尝试将google recaptcha与cordova html5应用程序集成.但是cordova在应用程序中使用文件协议.因此,在应用程序中使用验证码会出现"错误:站点密钥的无效域".

我使用cordova 3.5.0构建应用程序,<access origin="*" />并添加到config.xml中.

recaptcha只能用于Web应用程序而不能用于混合/本机应用程序吗？

Answer 1

由于协议问题,reCaptcha不能直接在cordova项目中使用.或

- 我们必须在单独的webview中加载reCaptcha url

- 使用最近引入的加载reCaptcha的安全令牌方式(https://developers.google.com/recaptcha/docs/secure_token)

Answer 2

我通过使用成功使它工作 cordova-plugin-ionic-webview

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

我做了什么 ：

• 配置Re-Captcha 管理控制台以允许myapp.local域
• 配置cordova-plugin-ionic-webview首选项：
  • <preference name="Hostname" value="myapp.local" />在config.xml文件中添加一个
  • <allow-navigation href="https://www.google.com/recaptcha/*" />在config.xml文件中添加一个
  • <allow-navigation href="http://myapp.local/*" />在config.xml文件中的 android 特定部分添加一个
• 安装 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);
    });
  });