通过自行修改源代码和编译添加 Cloudflare Turnstile 验证码支持

[TransparentLC]

隔壁 #1593 #2048 有提议过这个，不过被 stale 了。其实 Turnstile 的 API 和 reCAPTCHA V2 大部分相同，适配起来非常简单。我自己尝试修改源代码然后自行编译添加了 Turnstile 的支持，可以正常使用。

不过，因为我完全不熟悉 golang 导致这个实现方式非常简单粗暴（其实就是复用 reCAPTCHA 相关的代码），所以应该不会考虑提交 PR，只把修改的部分写在这里，供有需要的人尝鲜体验和参考。

以下源代码修改基于 v3.8.3 版本：

Cloudreve：

diff --git a/pkg/recaptcha/recaptcha.go b/pkg/recaptcha/recaptcha.go
index 75354bd..2a99008 100644
--- a/pkg/recaptcha/recaptcha.go
+++ b/pkg/recaptcha/recaptcha.go
@@ -7,9 +7,11 @@ import (
 	"net/http"
 	"net/url"
 	"time"
+	"strings"
 )
 
 const reCAPTCHALink = "https://www.recaptcha.net/recaptcha/api/siteverify"
+const turnstileLink = "https://challenges.cloudflare.com/turnstile/v0/siteverify"
 
 // VERSION the recaptcha api version
 type VERSION int8
@@ -72,13 +74,19 @@ func NewReCAPTCHA(ReCAPTCHASecret string, version VERSION, timeout time.Duration
 	if ReCAPTCHASecret == "" {
 		return ReCAPTCHA{}, fmt.Errorf("recaptcha secret cannot be blank")
 	}
+	secret := ReCAPTCHASecret
+	link := reCAPTCHALink
+	if strings.HasPrefix(secret, "turnstile:") {
+		secret = strings.TrimPrefix(secret, "turnstile:")
+		link = turnstileLink
+	}
 	return ReCAPTCHA{
 		client: &http.Client{
 			Timeout: timeout,
 		},
 		horloge:       &realClock{},
-		Secret:        ReCAPTCHASecret,
-		ReCAPTCHALink: reCAPTCHALink,
+		Secret:        secret,
+		ReCAPTCHALink: link,
 		Timeout:       timeout,
 		Version:       version,
 	}, nil
@@ -169,7 +177,7 @@ func (r *ReCAPTCHA) confirm(recaptcha reCHAPTCHARequest, options VerifyOption) (
 			return
 		}
 	}
-	if result.ErrorCodes != nil {
+	if result.ErrorCodes != nil && len(result.ErrorCodes) > 0 {
 		Err = fmt.Errorf("remote error codes: %v", result.ErrorCodes)
 		return
 	}

修改最后这个 result.ErrorCodes 的判断是因为验证成功的情况下 reCAPTCHA 的 response 是没有 error-codes 字段的，但是 Turnstile 仍然会有一个空数组 []。参见两边的文档：

• https://developers.cloudflare.com/turnstile/get-started/server-side-validation/
• https://developers.google.com/recaptcha/docs/verify

frontend (assets)：

diff --git a/src/component/Login/ReCaptcha.js b/src/component/Login/ReCaptcha.js
index b6c6f83..473e60b 100644
--- a/src/component/Login/ReCaptcha.js
+++ b/src/component/Login/ReCaptcha.js
@@ -4,12 +4,12 @@ import makeAsyncScriptLoader from "react-async-script";
 const callbackName = "onloadcallback";
 const globalName = "grecaptcha";
 
-function getURL() {
-    const hostname = "recaptcha.net";
-    return `https://${hostname}/recaptcha/api.js?onload=${callbackName}&render=explicit`;
-}
+export const ReCaptcha = makeAsyncScriptLoader(`https://recaptcha.net/recaptcha/api.js?onload=${callbackName}&render=explicit`, {
+    callbackName,
+    globalName,
+})(ReCAPTCHA);
 
-export default makeAsyncScriptLoader(getURL, {
+export const Turnstile = makeAsyncScriptLoader(`https://challenges.cloudflare.com/turnstile/v0/api.js?onload=${callbackName}&render=explicit&compat=recaptcha`, {
     callbackName,
     globalName,
 })(ReCAPTCHA);
diff --git a/src/hooks/recaptcha.js b/src/hooks/recaptcha.js
index cb76236..37748de 100644
--- a/src/hooks/recaptcha.js
+++ b/src/hooks/recaptcha.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { FormControl } from "@material-ui/core";
-import ReCaptcha from "../component/Login/ReCaptcha";
+import { ReCaptcha, Turnstile } from "../component/Login/ReCaptcha";
 import { defaultValidate, useStyle } from "./useCaptcha";
 
 const Recaptcha = ({ captchaRef, setLoading }) => {
@@ -22,16 +22,29 @@ const Recaptcha = ({ captchaRef, setLoading }) => {
     return (
         <div className={classes.captchaContainer}>
             <FormControl margin="normal" required fullWidth>
-                <div>
-                    <ReCaptcha
-                        style={{
-                            display: "inline-block",
-                        }}
-                        sitekey={reCaptchaKey}
-                        onChange={(value) => setCaptcha(value)}
-                        id="captcha"
-                        name="captcha"
-                    />
+                <div style={{textAlign: "center"}}>
+                    {reCaptchaKey.startsWith("turnstile:") ? (
+                        <Turnstile
+                            style={{
+                                display: "inline-block",
+                            }}
+                            sitekey={reCaptchaKey.replace(/^turnstile:/, "")}
+                            onChange={(value) => setCaptcha(value)}
+                            id="captcha"
+                            name="captcha"
+                            theme={(window.matchMedia && window.matchMedia("(prefers-color-scheme:dark)").matches) ? "dark" : "light"}
+                        />
+                    ) : (
+                        <ReCaptcha
+                            style={{
+                                display: "inline-block",
+                            }}
+                            sitekey={reCaptchaKey}
+                            onChange={(value) => setCaptcha(value)}
+                            id="captcha"
+                            name="captcha"
+                        />
+                    )}
                 </div>
             </FormControl>{" "}
         </div>

然后自行编译就可以了。使用方法是在管理面板的验证码选项中继续选择 reCAPTCHA，直接输入你注册的 Turnstile 的 sitekey 和 secret，并加上 turnstile: 的前缀。

效果如下图所示。

[TransparentLC]

@Jonathan523

[TransparentLC]

用 Github Actions 做了自动编译：

https://github.com/TransparentLC/cloudreve-turnstile-build

[NikoCat233]

感谢