recaptcha

recaptcha 中间件为 Flame 实例提供 Google reCAPTCHArecaptcha - 图1在新窗口打开 验证服务的集成。

你可以在 GitHubrecaptcha - 图2在新窗口打开 上阅读该中间件的源码或通过 pkg.go.devrecaptcha - 图3在新窗口打开 查看 API 文档。

下载安装

Go 语言的最低版本要求为 1.16。

  1. go get github.com/flamego/recaptcha

用法示例

注意

本小结仅展示 recaptcha 中间件的相关用法，示例中的用户验证方案绝不可以直接被用于生产环境。

reCAPTCHA v3

recaptcha.V3recaptcha - 图4在新窗口打开 可以配合 recaptcha.Optionsrecaptcha - 图5在新窗口打开 用于集成 reCAPTCHA v3recaptcha - 图6在新窗口打开，并使用 recaptcha.RecaptchaV3.Verify 来进行验证码的校验：

  • main.go
  • templates/home.tmpl
  1. package main
  3. import (
  4.     "fmt"
  5.     "net/http"
  7.     "github.com/flamego/flamego"
  8.     "github.com/flamego/recaptcha"
  9.     "github.com/flamego/template"
  10. )
  12. func main() {
  13.     f := flamego.Classic()
  14.     f.Use(template.Templater())
  15.     f.Use(recaptcha.V3(
  16.         recaptcha.Options{
  17.             Secret:    "<SECRET>",
  18.             VerifyURL: recaptcha.VerifyURLGoogle,
  19.         },
  20.     ))
  21.     f.Get("/", func(t template.Template, data template.Data) {
  22.         data["SiteKey"] = "<SITE KEY>"
  23.         t.HTML(http.StatusOK, "home")
  24.     })
  25.     f.Post("/", func(w http.ResponseWriter, r *http.Request, re recaptcha.RecaptchaV3) {
  26.         token := r.PostFormValue("g-recaptcha-response")
  27.         resp, err := re.Verify(token)
  28.         if err != nil {
  29.             w.WriteHeader(http.StatusBadRequest)
  30.             _, _ = w.Write([]byte(err.Error()))
  31.             return
  32.         } else if !resp.Success {
  33.             w.WriteHeader(http.StatusBadRequest)
  34.             _, _ = w.Write([]byte(fmt.Sprintf("Verification failed, error codes %v", resp.ErrorCodes)))
  35.             return
  36.         }
  37.         w.WriteHeader(http.StatusOK)
  38.         _, _ = w.Write([]byte("Verified!"))
  39.     })
  40.     f.Run()
  41. }
  1. <html>
  2. <head>
  3.   <script src="https://www.google.com/recaptcha/api.js"></script>
  4. </head>
  5. <body>
  6. <script>
  7.   function onSubmit(token) {
  8.     document.getElementById("demo-form").submit();
  9.   }
  10. </script>
  11. <form id="demo-form" method="POST">
  12.   <button class="g-recaptcha"
  13.     data-sitekey="{{.SiteKey}}"
  14.     data-callback='onSubmit'
  15.     data-action='submit'>Submit</button>
  16. </form>
  17. </body>
  18. </html>

因为 reCAPTCHA v3 采用非侵入式的校验方式，所以不会在网页中看到任何验证码。

reCAPTCHA v2

recaptcha.V2recaptcha - 图7在新窗口打开 可以配合 recaptcha.Optionsrecaptcha - 图8在新窗口打开 用于集成 reCAPTCHA v2recaptcha - 图9在新窗口打开，并使用 recaptcha.RecaptchaV2.Verify 来进行验证码的校验。

下面的例子才采用了 “I’m not a robot” Checkbox 类型的校验形式：

  • main.go
  • templates/home.tmpl
  1. package main
  3. import (
  4.     "fmt"
  5.     "net/http"
  7.     "github.com/flamego/flamego"
  8.     "github.com/flamego/recaptcha"
  9.     "github.com/flamego/template"
  10. )
  12. func main() {
  13.     f := flamego.Classic()
  14.     f.Use(template.Templater())
  15.     f.Use(recaptcha.V2(
  16.         recaptcha.Options{
  17.             Secret:    "<SECRET>",
  18.             VerifyURL: recaptcha.VerifyURLGoogle,
  19.         },
  20.     ))
  21.     f.Get("/", func(t template.Template, data template.Data) {
  22.         data["SiteKey"] = "<SITE KEY>"
  23.         t.HTML(http.StatusOK, "home")
  24.     })
  25.     f.Post("/", func(w http.ResponseWriter, r *http.Request, re recaptcha.RecaptchaV2) {
  26.         token := r.PostFormValue("g-recaptcha-response")
  27.         resp, err := re.Verify(token)
  28.         if err != nil {
  29.             w.WriteHeader(http.StatusBadRequest)
  30.             _, _ = w.Write([]byte(err.Error()))
  31.             return
  32.         } else if !resp.Success {
  33.             w.WriteHeader(http.StatusBadRequest)
  34.             _, _ = w.Write([]byte(fmt.Sprintf("Verification failed, error codes %v", resp.ErrorCodes)))
  35.             return
  36.         }
  37.         w.WriteHeader(http.StatusOK)
  38.         _, _ = w.Write([]byte("Verified!"))
  39.     })
  40.     f.Run()
  41. }
  1. <html>
  2. <head>
  3.   <script src="https://www.google.com/recaptcha/api.js"></script>
  4. </head>
  5. <body>
  6.   <form method="POST">
  7.     <div class="g-recaptcha" data-sitekey="{{.SiteKey}}"></div>
  8.     <input type="submit" name="button" value="Submit">
  9.   </form>
  10. </body>
  11. </html>

下图为程序运行时浏览器中所展示的内容：

Form with reCAPTCHA