在cordova/phonegap應用程序中使用reCaptcha

Question

我正在嘗試將 google recaptcha 與cordova html5 應用程序集成。 但是cordova 在應用程序中使用文件協議。 因此，在應用程序中使用驗證碼會給出"Error: invalid domain for site key" 。

我正在使用cordova 3.5.0 來構建應用程序，並且在config.xml 中添加了<access origin="*" /> 。

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首選項：
  • 在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); }); });

Answer 3

您現在應該使用您的應用程序包名稱（2017 年 11 月）。 作為 reCaptcha 配置的一部分，您指定將使用該服務的域或移動包名稱。 如果您使用“localhost”進行開發，則必須將其添加到域列表中。

對於移動用戶，API 密鑰對僅對指定的包名稱（例如 com.google.recaptcha.test）唯一。

但是，如果您的域或包名稱列表非常長、不固定或未知，您可以選擇關閉 reCAPTCHA 端的域或包名稱檢查，而是檢查您的服務器。

不建議使用安全令牌，因為這現在是一項已棄用的功能。

參考：

• 域/包名稱驗證