Question

我正在尝试将google recaptcha与cordova html5应用程序集成。但是cordova在应用程序中使用文件协议。因此，在应用中使用验证码可以提供＆＃34;错误：网站密钥的无效域＆＃34; 。

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

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

Answer 1

由于协议问题，

reCaptcha不能直接在cordova项目中使用。

- 我们必须在单独的 webview

中加载reCaptcha网址

- 使用安全令牌加载最近引入的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：
- 在<preference name="Hostname" value="myapp.local" />文件中添加config.xml
- 在<allow-navigation href="https://www.google.com/recaptcha/*" />文件中添加config.xml
- 在<allow-navigation href="http://myapp.local/*" />文件的android的特定部分中添加config.xml
安装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);
  });
});

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

3 个答案:

参考：