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

Question

我像这样在 WebView 中添加一个 JavaScript 函数 (Kotlin):

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

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

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

或通过 reCAPTCHA v2 JavaScript API :

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

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

webView.loadUrl("""
    javascript:(function() {
        window.myCustomJavaScriptCallback = function(token) {                
            android.reCaptchaCallbackInAndroid(token);
        }
    })()
""".trimIndent())

最后，当用户提交成功的 reCAPTCHA 响应时，您的 myCustomJavaScriptCallback将被调用，通过它，您的暴露 reCaptchaCallbackInAndroid方法也与 reCAPTCHA token .

• 由于您使用的是 Kotlin，在这种情况下，您可以简单地使用 multiline string literals .

• 由于您要向 JavaScript 公开方法，因此请务必了解 security concerns .

• 如果您将来需要额外的 JavaScript 注入(inject)(更多方法公开、DOM 操作等)，check out this post .

---

在你的情况下:

设置 reCAPTCHA 调用您的 captchaResponse JavaScript 函数通过 tag attribute :

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

或通过其 API :

grecaptcha.render(
  '...', {
    ...
    callback: 'captchaResponse'
    ...
  }
)

并添加您的 captchaResponse回调函数 window :

webView.loadUrl("""
    javascript:(function() {
        window.captchaResponse = function(token) {
            // your code here before the Android callback...

            android.reCaptchaCallbackInAndroid(token);
            
            // ...or after the Android callback
        }
    })()
""".trimIndent())

---

测试:

这是一个简单的 Empty Activity在 Android Studio(使用 Kotlin)中使用基本的 LinearLayout (布局中的 EditText 和 Button) 和 MainActivity.kt :

package com.richrdkng.injectjsintowebview

import android.net.Uri
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.webkit.JavascriptInterface
import kotlinx.android.synthetic.main.activity_main.*
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        sendButton.setOnClickListener { loadWebpage() }
    }

    @Throws(UnsupportedOperationException::class)
    fun buildUri(authority: String) : Uri {
        val builder = Uri.Builder()
        builder.scheme("https")
                .authority(authority)
        return builder.build()
    }

    @JavascriptInterface
    fun reCaptchaCallbackInAndroid(token: String) {
        val tok = token.substring(0, token.length / 2) + "..."
        Toast.makeText(this.applicationContext, tok, Toast.LENGTH_LONG).show()
    }

    fun loadWebpage() {
        webView.getSettings().setJavaScriptEnabled(true)
        webView.addJavascriptInterface(this, "android")
        webView.getSettings().setBuiltInZoomControls(false)
        webView.loadUrl("https://www.richrdkng.com/recaptcha-v2-test/")

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

然后使用 simple reCAPTCHA v2 test website , window.onCaptchaSuccess函数在成功提交 reCAPTCHA 时调用，reCAPTCHA token 部分显示在 Toast 中使用 Android 模拟器:

---

全面披露:我制作了 reCAPTCHA v2 test website准备/测试/调试类似情况。