如何在提交reCAPTCHA时在WebView中添加JavaScript函数并稍后从HTML调用它

Question

我在WebView中添加了这样的JavaScript函数（科特琳）：

val webView = findViewById(R.id.webview) as WebView
webView.getSettings().setJavaScriptEnabled(true)
webView.addJavascriptInterface(this, "android")
webView.getSettings().setBuiltInZoomControls(false)
webView.loadUrl(url)

webView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView, url: String) {
        super.onPageFinished(view, url)
        webView.loadUrl("javascript:(function captchaResponse (token){" +
                        "      android.reCaptchaCallbackInAndroid(token);" +
                        "    })()")
    }
}

该函数工作正常，但是问题是，当我在WebView中添加它时，它可以立即运行。我只想将其包含为JavaScript函数，并且当用户填写reCAPTCHA时，只能从HTML调用它。我该怎么办？

Answer 1

为了从JavaScript运行您的reCaptchaCallbackInAndroid公开方法，当用户提交成功 reCAPTCHA响应时，首先请确保实际收听通过g-recaptcha tag attributes reCAPTCHA callback：

<div class="g-recaptcha"
     data-sitekey="{{your site key}}"
     data-callback="myCustomJavaScriptCallback"
></div>

或通过reCAPTCHA JavaScript API：

grecaptcha.render(
  'g-recaptcha-element-id', {
    sitekey: '{{your site key}}',
    callback: 'myCustomJavaScriptCallback'
  }
)

然后，在页面WebView中完成加载后，使用webView.loadUrl将JavaScript回调函数添加到window object：

webView.loadUrl("""
    javascript:(function() {
        window.myCustomJavaScriptCallback = function(token) {                
            android.reCaptchaCallbackInAndroid(token);
            /* also add your additional JavaScript functions
               and additional code in this function */
        }
    })()
""".trimIndent())

最后，当用户提交成功的reCAPTCHA响应时，您的myCustomJavaScriptCallback将被调用，并通过reCAPTCHA {{1 }}。

• 在这种情况下，由于您使用的是Kotlin，因此只需使用multiline string literals。

• 由于您要向JavaScript公开方法，因此请确保了解security concerns。

• 如果将来需要额外的JavaScript注入（更多方法公开，DOM操作等），请check out this post。

---

在您的情况下：

设置reCAPTCHA以通过reCaptchaCallbackInAndroid调用token JavaScript函数：

captchaResponse

或通过其tag attribute：

<div class="g-recaptcha"
     ...
     data-callback="captchaResponse"
     ...
></div>

并将您的API回调函数添加到grecaptcha.render( '...', { ... callback: 'captchaResponse' ... } ) ：

captchaResponse

---

测试：

这是一个简单的window，在Android Studio中具有基本的webView.loadUrl(""" javascript:(function() { window.captchaResponse = function(token) { android.reCaptchaCallbackInAndroid(token); /* also you can add further JavaScript functions and additional code in this function */ } })() """.trimIndent()) （布局中的Empty Activity和LinearLayout） EditText：

Button

然后使用simple reCAPTCHA test website，在成功提交reCAPTCHA后调用MainActivity.kt函数，并使用Android模拟器在Toast中部分显示reCAPTCHA令牌：

---

全面披露：我做了reCAPTCHA test website来准备/测试/调试类似情况。

Answer 2

尝试像这样注入脚本，

function addCode(code){
var addedScript= document.createElement('script');
addedScript.text= code;
document.body.appendChild(addedScript);}

现在调用类似的函数

val codeToExec = "function captchaResponse (token){" +
                    "android.reCaptchaCallbackInAndroid(token);" +
                    "}";

现在是exec loadurl，

webview.loadUrl("javascript:(function addCode(code){
var addedScript= document.createElement('script');
addedScript.text= code;
document.body.appendChild(addedScript);})(codeToExec));