使用 nuxt.js google recaptcha 模块

问题描述

有一个问题浪费了太多时间。我安装了 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: '...' },

私有运行时配置：{ 秘钥：process.env.GOOGLE_SECRET },

模块：[

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

],

解决方法

您的模板中似乎没有 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 功能的使用示例：

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