验证 Nuxt 中的 reCaptcha v3 是否正常工作

Question

我正在我的 nuxt 项目上安装 @nuxtjs/recaptcha，即 google reCaptcha V3。它看起来运行良好，它总是从如下服务器返回 success 结果。

{success: true, challenge_ts: '2022-05-05T11:37:06Z', hostname: 'localhost', score: 0.9}

但我不确定这是否能正常工作，因为挑战没有出现。据我所知，Recaptcha 应该有一个必须满足的挑战。但是为什么挑战没有出现在这里呢？

也许它需要用一些事件处理程序来触发？但是在文档示例中我没有看到任何相关的东西或者我只是没有意识到它。
可能我遗漏了一些重要的东西，所以我需要你的帮助来解决这个问题。

我的模板代码

<template>
  <div class="container">
    <h1 align="center">SEND EMAIL TO US!</h1>

    <div class="layout">
      <form @submit.prevent="onSubmit">
        <div class="basic-info">
          <div class="name">
            <label for="">Name :</label>
            <b-form-input v-model="data.name" placeholder="Name"></b-form-input>

            <div v-if="validation.name" class="mt-2">
              <b-alert show variant="danger">{{ validation.name[0] }}</b-alert>
            </div>
          </div>
          <div class="email">
            <label for="">Email :</label>
            <b-form-input
              v-model="data.email"
              placeholder="Email"
            ></b-form-input>
            <div v-if="validation.email" class="mt-2">
              <b-alert show variant="danger">{{ validation.email[0] }}</b-alert>
            </div>
          </div>
          <div class="messege">
            <label for="">Messege :</label>
            <b-form-textarea
              id="textarea"
              v-model="data.messege"
              placeholder="Enter Messege..."
              rows="8"
              max-rows="8"
            ></b-form-textarea>
            <div v-if="validation.messege" class="mt-2">
              <b-alert show variant="danger">
                {{ validation.messege[0] }}
              </b-alert>
            </div>
          </div>

          <hr />
          <b-button type="submit" variant="outline-primary">
            SEND EMAIL
          </b-button>
          <hr />
          <b-alert v-model="alert" show :variant="variant">
            {{ result_messege }}
          </b-alert>
        </div>
      </form>
    </div>
  </div>
</template>

我的脚本代码

<script>
export default {
  async mounted() {
    try {
      await this.$recaptcha.init()
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    async onSubmit() {
      try {
        this.loading = true

        // Start the verification process
        const response = await this.verifyCaptcha()

        console.log(response)

        // Display error message if verification was not successful
        if (!response.success) {
          this.$recaptcha.reset()
          this.loading = false
          this.errorStatus = true
          this.notificationMessage =
            'There was an error with your reCaptcha verification. Please try again.'
          return
        }

        // If verification was successful, send the message
        await this.sendMail()

        this.errorStatus = false
        this.notificationMessage =
          'Thank you for reaching out. We will get back to you as soon as possible'

        this.loading = false
        this.$recaptcha.reset()
      } catch (error) {
        this.loading = false
        console.log(error)
      }
    },

    async verifyCaptcha() {
      try {
        const token = await this.$recaptcha.execute()
        console.log(token)

        const response = await this.$axios.$post(
          `/captcha-api/siteverify?secret=${process.env.SECRET_KEY}&response=${token}`
        )

        return response
      } catch (error) {
        this.loading = false
        return error
      }
    },
  },
}
</script>

Answer 1

这是完全正常的，这是 v3 的全部概念，如您在此视频中所见：https://youtu.be/tbvxFW4UJdU

更多详情也在这里：https://developers.google.com/recaptcha/docs/v3
在这里：https://www.google.com/recaptcha/about/

到目前为止，该功能是这样的：不需要用户进行任何交互，而是使用一些鼠标 trackers/AI 来了解它是否具有潜在的恶意。