如何将Recaptcha v2添加到Laravel和Vue js？

问题描述

我正在关注有关如何将Recaptcha v2添加到Laravel和Vue js项目的文章。 https://github.com/python/cpython/blob/3.7/Lib/

我正在尝试在我的项目中实现它，但是在页面上却出现此错误：

The recaptcha verification Failed. Try again.

在“网络”标签中，此错误：

{recaptcha: ["The recaptcha verification Failed. Try again."]}

在控制台中：

POST http://highrjobsadminlte.test/submit 422 (Unprocessable Entity)

我正在尝试在我的Contact.vue页面上的“联系表”上实现该功能。

Contact.vue：

<form @submit.prevent="submit">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="name" id="name" v-model="fields.name" />
                            <div v-if="errors && errors.name" class="text-danger" style="font-size: 13px;">{{ errors.name[0] }}</div>
                        </div>

                        <div class="form-group">
                            <label for="email">E-mail</label>
                            <input type="email" class="form-control" name="email" id="email" v-model="fields.email" />
                            <div v-if="errors && errors.email" class="text-danger" style="font-size: 13px;">{{ errors.email[0] }}</div>
                        </div>

                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea class="form-control" id="message" name="message" rows="5" v-model="fields.message"></textarea>
                            <div v-if="errors && errors.message" class="text-danger" style="font-size: 13px;">{{ errors.message[0] }}</div>
                        </div>

                        <div class="form-group">
                            <vue-recaptcha
                                v-model="fields.recaptcha"
                                ref="recaptcha"
                                @verify="onVerify"
                                sitekey="6LcAHcoZAAAAAFDOejn9e2LrogSpF41rmlXtrpDa">
                            </vue-recaptcha>
                        </div>
                        <div v-if="errors && errors.recaptcha" class="text-danger" style="font-size: 13px;">{{ errors.recaptcha[0] }}</div>

                        <button type="submit" class="btn btn-primary mt-3">Send message</button>
                    </form>

export default {
        name: "Contact",data() {
            return {
                fields: {},errors: {},}
        },methods: {
            onVerify(response) {
                this.fields.recaptcha = response;
            },submit() {
                this.errors = {};
                axios.post('/submit',this.fields,{
                    headers:{
                        'Content-Type':'application/json','Accept':'application/json'
                    }
                }).then(({data: {fields}}) => {
                    this.$toast.success('Message sent successfully!');
                    this.$refs.recaptcha.reset();
                }).catch(error => {
                    if (error) {
                        this.errors = error.response.data.errors || {};
                    }
                });
            },},}

Recaptcha.PHP（这是一条规则）：

<?PHP

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;
use Zttp\Zttp;

class Recaptcha implements Rule
{
    const URL = 'https://www.google.com/recaptcha/api/siteverify';

    /**
     * Determine if the validation rule passes.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @return bool
     */
    public function passes($attribute,$value)
    {
        return Zttp::asFormParams()->post(static::URL,[
            'secret' => config('services.recaptcha.secret'),'response' => $value,'remoteip' => request()->ip()
        ])->json()['success'];
    }

    /**
     * Get the validation error message.
     *
     * @return string
     */
    public function message()
    {
        return 'The recaptcha verification Failed. Try again.';
    }

    /**
     * Determine if Recaptcha's keys are set to test mode.
     *
     * @return bool
     */
    public static function isInTestMode()
    {
        return Zttp::asFormParams()->post(static::URL,'response' => 'test','remoteip' => request()->ip()
        ])->json()['success'];
    }
}

ContactFormController.PHP：

<?PHP

namespace App\Http\Controllers;

use App\Mail\ContactEmail;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use App\Rules\Recaptcha;

class ContactFormController extends Controller
{
    public function submit(Request $request,Recaptcha $recaptcha) {

        $this->validate($request,[
            'name' => 'required|string','email' => 'required|email','message' => 'required','recaptcha' => ['required',$recaptcha],]);

        $contact = [];

        $contact['name'] = $request->get('name');
        $contact['email'] = $request->get('email');
        $contact['subject'] = $request->get('subject');
        $contact['message'] = $request->get('message');

        // Mail Delivery logic goes here
        Mail::to(config('mail.from.address'))->send(new ContactEmail($contact));

        return response(['contact' => $contact],200);
    }

}

web.PHP：

Route::post('/submit','ContactFormController@submit');

我已经在config / services.PHP中设置了recaptcha密钥和密钥，以指向在.env文件中设置的.env变量。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）