Question

我正在尝试在Clojurescript / Reagent SPA中使用Google的recaptcha，如下面的代码所示。

(ns myapp.captcha
  (:require  [reagent.core :as r]
             [cljs.core.async :refer [<! >! chan]])
  (:require-macros [cljs.core.async.macros :refer [go go-loop]]))

(def captcha-ch (chan))

(defn ^:export data-callback [human-proof]
  (go (>! captcha-ch {:captcha-data human-proof})))

(defn ^:export data-expired-callback []
  (go (>! captcha-ch {:captcha-expired true})))

(defn captcha [site-key]
  (let [grecaptcha-script (doto (.createElement js/document "script")
                            (.setAttribute "id" "grecaptcha-script")
                            (.setAttribute "src" "https://www.google.com/recaptcha/api.js"))
        out-ch (chan)
        comp (r/create-class
              {:component-did-mount (fn [this]
                                      (.appendChild (.-body js/document)
                                                    grecaptcha-script))
               :component-will-unmount (fn [this]
                                         (.removeChild (.-body js/document)
                                                       (.getElementById js/document "grecaptcha-script"))
                                         (go (>! captcha-ch {:exit true})))
               :reagent-render (fn [this]
                                 [:div.g-recaptcha
                                  {:data-sitekey site-key
                                   :data-callback "myapp.captcha.data_callback"
                                   :data-expired-callback "myapp.captcha.data_expired_callback"}])})]
    (go-loop []
      (let [msg (<! captcha-ch)]
        (if-not (:exit msg)
          (>! out-ch msg)
          (recur))))

    {:chan out-ch :comp comp}))

当验证码被解决并且应该调用数据回调时，我得到一个错误说：

ReCAPTCHA无法找到用户提供的功能： myapp.captcha.data_callback

另一方面，如果我从浏览器的调试器控制台调用myapp.captcha.data_callback，则该功能可见并正确执行。

PS：现在请忽略全球陈，这是另一回事。为了解决这个问题，我必须明确地调用验证码渲染，这使我处于一些显然与脚本加载顺序相关的竞争条件。我承认这可能是一种更清洁的方法，但现在看看这里的问题很有意思。

Answer 1

我有一个解决方法，但这有点像黑客。

我在recaptcha脚本之前添加了一个脚本元素。在这个脚本元素中，我定义了回调，它将调用转发给我的clojurescript函数。

请参阅下面的代码。

仍然很高兴理解为什么我不能直接使用我的Clojurescript回调。

(defn captcha [handler]
  (let [callback-hooks (let [s (.createElement js/document "script")]
                         (.setAttribute s "id" "captcha-callbacks")
                         (set! (.-text s)
                               (str "var captcha_data_callback = function(x) { myapp.captcha.data_callback(x)};"
                                    "var captcha_data_expired_callback = function() { myapp.captcha.data_expired_callback()};"))
                         s)
        grecaptcha-script (doto (.createElement js/document "script")
                            (.setAttribute "id" "grecaptcha-script")
                            (.setAttribute "src" "https://www.google.com/recaptcha/api.js"))
        captcha-div [:div.g-recaptcha
                     {:data-sitekey config/grecaptcha-client-key
                      :data-callback "captcha_data_callback"
                      :data-expired-callback "captcha_data_expired_callback"}]]

    (go-loop []
      (let [msg (<! captcha-ch)]
        (handler msg)

        (if-not (:end msg)
          (recur))))

    (r/create-class
     {:component-did-mount (fn [this]
                             (doto (.-body js/document)
                               (.appendChild callback-hooks)
                               (.appendChild grecaptcha-script)))
      :component-will-unmount (fn [this]
                                (doto (.-body js/document)
                                  (.removeChild (.getElementById js/document "captcha-callbacks"))
                                  (.removeChild (.getElementById js/document "grecaptcha-script")))
                                (go (>! captcha-ch {:end true})))
      :reagent-render (fn [this] captcha-div)})))

Answer 2

我与您的处境相同，只能通过列出的方式解决此问题-通过提供一个JS脚本将函数调用传递给CLJS。

但是，我发现，尽管您将回调函数定义为对象属性（在JS中），但是Recaptcha仍然无法找到该函数，即使该函数确实存在。

我在<head>的{{1}}中定义了一个脚本标记

index.html

因此，考虑到这个问题似乎不是ClojureScript问题，而是recaptcha问题。如果有一种方法可以将ClojureScript函数直接导出到其命名空间之外的全局范围中（我不确定是否可行），那么从理论上讲，您应该能够直接从recaptcha访问CLJS回调。

希望这会有所帮助！

Answer 3

这是因为Closure编译器在编译期间会混淆您的代码，包括重命名您的函数。最简单的解决方案是首先确保编译器优化遵守您的函数名（或简单地通过阴影:optimization :none使用影子cljs禁用优化。

接下来，您要确保要使用的功能已导出。这是通过^:export完成的，例如： (defn ^:export my-exported-fun [] ...)

最后，在引用函数时传递完整的名称空间，例如myapp.frontend.my-exported-fun。

希望这对未来的旅行者有所帮助：）

为什么我不能将Clojurescript函数作为回调传递给Javascript？

3 个答案: