使用 nuxt.js 谷歌 recaptcha 模块

Question

有一个问题浪费了太多时间。我安装了 Nuxt js recaptcha 模块。但文档中提供的信息不充分。我以前没用过recaptcha。我应该如何使用它。

<template>
  <div class="mx-auto mt-5" style="width: 500px; max-width:90%">
    <div class="mx-auto mt-5" style="width: 230px;">
      <img
        src="@/assets/media/images/site/logo.png"
        style="width: 110px"
      />.com'a Üye Olun
    </div>
    <div class="bg-white p-4 mt-2" style="border-radius:20px">
      <b-form @submit.prevent="onSubmit" @reset="onReset" v-if="show">
        <b-form-group id="input-group-2" label-for="input-2">
          <b-form-input
            id="input-2"
            class="form-control form-control-lg"
            v-model="form.userFullName"
            placeholder="İsim soyisim"
            required
          ></b-form-input>
        </b-form-group>
        <b-form-group id="input-group-2" label-for="input-2">
          <b-form-input
            id="input-5"
            class="form-control form-control-lg"
            v-model="form.userName"
            placeholder="Kullanıcı adı"
            required
          ></b-form-input>
        </b-form-group>
        <b-form-row>
          <b-col>
            <b-form-input
              id="input-1"
              v-model="form.userEmail"
              type="email"
              class="form-control form-control-lg"
              placeholder="E-mail adresiniz"
              required
            ></b-form-input>
          </b-col>
          <b-col>
            <b-form-input
              id="input-3"
              v-model="form.userPassword"
              class="form-control form-control-lg"
              placeholder="Şifreniz"
              required
            ></b-form-input>
          </b-col>
        </b-form-row>

        <b-form-group
          id="input-group-4"
          class="mt-3"
          v-slot="{ ariaDescribedby }"
        >
          <b-form-checkbox-group
            v-model="form.checked"
            id="checkboxes-4"
            :aria-describedby="ariaDescribedby"
          >
            <b-form-checkbox class="text-dark" value="1"
              >Beni Hatırla</b-form-checkbox
            >
          </b-form-checkbox-group>
        </b-form-group>

        <b-button
          :disabled="isClickSubmit"
          type="submit"
          class="btn btn-dark btn-lg btn-block"
          variant="primary"
        >
          <b-spinner v-if="isClickSubmit" small style="margin-bottom:3px" type="grow"></b-spinner>
          Kaydol</b-button
        >
      </b-form>
    </div>
  </div>
</template>

import axios from "axios";
export default {
  layout: "default",
  data() {
    return {
      isClickSubmit: false,
      form: {
        userEmail: "",
        userFullName: "",
        userName: "",
        userPassword: null
      },
      show: true
    };
  },
  methods: {
    async mounted() {
      try {
        const bune = await this.$recaptcha.init();
        console.log(bune);
      } catch (e) {
        console.log(e);
      }
    },
    async onSubmit(event) {
      this.isClickSubmit = true;
      this.onReset();
      try {
        console.log(this.$recaptcha);
        const token = await this.$recaptcha.execute("login");
        console.log("ReCaptcha token:", token);
        //  await this.$recaptcha.reset()
        const form = this.form;

        const sonuc = await axios.post("http://localhost:3000/api/users", {
          form
        });
        this.isClickSubmit = false
      } catch (error) {
        console.log("Login error:", error);
      }

      //   console.log(JSON.stringify(this.form));
    },

    onReset() {
      this.form.userEmail = "";
      this.form.userFullName = "";
      this.form.userName = "";
      this.form.userPassword = null
    }
  }
};

nuxt.config.js：

环境：{ GOOGLE_SECRET: '...' },

privateRuntimeConfig: { 密钥：process.env.GOOGLE_SECRET },

模块：[

[
  "@nuxtjs/recaptcha",
 {
   siteKey:process.env.GOOGLE_SECRET ,
   version: 3,
 }    ]

],

Answer 1

您的模板中似乎没有 recaptcha 元素。

<!-- Add this where you want the captcha, regardless of version -->
<recaptcha @error="onError" @success="onSuccess" @expired="onExpired" />

<script>
export default {
    data() {
        return {
            isClickSubmit: false,
            form: {
                userEmail: "",
                userFullName: "",
                userName: "",
                userPassword: null,
                token: null
            },
            show: true
        };
    },
    methods: {
        onSuccess(token) {
            this.form.token = token;
        },
        onExpired() {
            this.$recaptcha.reset();
        },
        onError(error) {
            console.error(error);
        }
    }
}

在您提出请求之前，您需要向 Google 发送一些内容。您将在处理任何请求之前进行此调用。这个函数来自我的一个项目。

// Backend code
function Recaptcha(token, ip, callback) {
    axios.post(`https://www.google.com/recaptcha/api/siteverify?secret=${SECRET_KEY}&response=${token}`,
        {
            remoteip: ip,
        },
        {
            headers: {
                'Content-Type':
                    'application/x-www-form-urlencoded; charset=utf-8',
            },
        },
    )
    .then(callback);
}

Recaptcha 函数使用示例：

希望这可以帮助您更好地理解它。