README

此包是Google的reCAPTCHA PHP客户端库的封装。它提供了一个便捷的验证规则recaptcha，可用于验证表单请求中的reCAPTCHA令牌。

您可以使用此包与任何类型的reCAPTCHA一起使用

Google reCAPTCHA v2
Google reCAPTCHA v3

安装

您可以通过Composer安装此包

composer require chitranu/google-recaptcha

使用方法

从https://www.google.com/recaptcha/admin/获取您应用程序的Google reCAPTCHA密钥，并将其放在根目录下的.env文件中，如下所示。

GOOGLE_RECAPTCHA_SECRETKEY=YOUR_RECAPTCHA_SECRET_KEY

设置密钥后，转到您的请求验证器，并添加一个字段，规则为recaptcha，如下所示以验证表单请求中收到的令牌。

$request->validate([
    '...' // other fields
    'recaptcha-token' => 'required|recaptcha'
]);

设置分数阈值

如果您收到大量的垃圾邮件提交，您可以通过设置分数阈值来利用设置验证规则，设置一个介于0.1 - 1.0之间的值。有关分数阈值的更多信息，请参阅此处：https://developers.google.com/recaptcha/docs/v3#interpreting_the_score

$request->validate([
    '...' // other fields
    'recaptcha-token' => 'required|recaptcha:0.5' // Specify threshhold
]);

示例

在前端使用（vue-recaptcha-v3插件）

此包旨在与vue-recaptcha-v3 npm插件一起使用。您可以通过创建以下Vue表单组件来使用它。

使用vue-recaptcha-v3插件注册您的站点密钥

import Vue from "vue";
import { VueReCaptcha } from "vue-recaptcha-v3";

Vue.use(VueReCaptcha, { siteKey: "YOUR_GOOGLE_SITE_KEY" });

创建一个Vue组件用于表单，并使用以下方式提交reCAPTCHA令牌

<template>
  <form @submit.prevent="onFormSubmit()" ref="contactform">
    <input type="text" name="name" placeholder="Your Name" />
    <input type="email" name="email" placeholder="Your Email" />
    <textarea name="message" placeholder="Your Message"></textarea>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    async onFormSubmit() {
      // Wait until recaptcha has been loaded.
      await this.$recaptchaLoaded();

      // Execute reCAPTCHA with action "login".
      const token = await this.$recaptcha("login");

      // Prepare form data
      let formData = new FormData(this.$refs.contactform);

      // Appended token in formData
      formData.append("recaptcha-token", token);

      // Make an ajax request to your Laravel endpoint.
      axios.post("/your-form-endpoint", formData).then(
        (response) => {
          // handle response
        },
        (error) => {
          // handle errors
        }
      );
    },
  },
};
</script>

在前端使用（vue-recaptcha插件）

如果您正在使用vue-recaptcha插件（较旧版本），您仍然可以通过创建以下Vue表单组件来使用它

<template>
  <form @submit.prevent="onFormSubmit()" ref="contactform">
    <input type="text" name="name" placeholder="Your Name" />
    <input type="email" name="email" placeholder="Your Email" />
    <textarea name="message" placeholder="Your Message"></textarea>
    <vue-recaptcha
      ref="recaptcha"
      @verify="onCaptchaVerified"
      @expired="resetCaptcha"
      :sitekey="sitekey"
      :loadRecaptchaScript="true"
    />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import VueRecaptcha from "vue-recaptcha";

export default {
  components: {
    VueRecaptcha,
  },
  computed: {
    sitekey() {
      return "YOUR_GOOGLE_RECAPTHCA_SITE_KEY";
    },
  },
  methods: {
    onFormSubmit() {
      this.$refs.recaptcha.execute();
    },
    onCaptchaVerified(token) {
      // Prepare form data
      const formData = new FormData(this.$refs.contactform);

      // Appended token in formData
      formData.append("recaptcha-token", token);

      // Make an ajax request to your Laravel endpoint.
      axios.post("/your-form-endpoint", formData).then(
        (response) => {
          // handle response
        },
        (error) => {
          // handle errors
        }
      );
    },
    resetCaptcha() {
      this.$refs.recaptcha.reset();
    },
  },
};
</script>

变更日志

有关最近更改的更多信息，请参阅CHANGELOG。

贡献

有关详细信息，请参阅CONTRIBUTING。

安全性

如果您发现任何安全相关的问题，请通过电子邮件swapnil@chitranu.com报告，而不是使用问题跟踪器。

鸣谢

许可

MIT许可（MIT）。有关更多信息，请参阅许可文件。

chitranu / google-recaptcha

维护者

详细信息