Laravel Jetstream（Inertia栈）登录时Google reCAPTCHA v3验证失败求助

环境信息 #

• Jetstream Version 4.0
• Jetstream Stack: Inertia
• Laravel Version 10.10
• PHP Version 8.1

问题描述 #

我正在给Jetstream的登录功能集成Google reCAPTCHA v3，但一直卡在验证失败的问题上。排查后发现，Inertia搭配Jetstream的登录流程会发送两次请求，导致Google拒绝了验证请求。

我在Fortify的authenticateUsing闭包里做了reCAPTCHA验证逻辑，日志里明明显示Google返回了success: true的响应，但代码还是会抛出“ReCAPTCHA verification failed. Please try again.”的验证异常。我尝试在前端的Inertia请求里加上preserveScroll: true和preserveState: true，但问题依旧没有解决。

后端Fortify配置代码 #

Fortify::authenticateUsing(function (Request $request) {
    $recaptchaResponse = Http::asForm()->post('https://www.google.com/recaptcha/api/siteverify', [
        'secret' => env('RECAPTCHA_SECRET_KEY'),
        'response' => $request->input('recaptcha_token'),
    ])->json();

    // 调试日志
    Log::info('Recaptcha Response:', $recaptchaResponse);

    if (!(isset($recaptchaResponse['success']) && $recaptchaResponse['success'] == true)) {
        throw ValidationException::withMessages([
            'email' => ['ReCAPTCHA verification failed. Please try again.'],
        ]);
    }
});

前端Vue/Inertia代码 #

登录提交函数

const submit = () => {
    grecaptcha.ready(() => {
        grecaptcha.execute('GOOGLE_RECAPTCHA_TOKEN', { action: 'login' }).then((token) => {
            form.recaptcha_token = token
            form
                .transform((data) => ({
                    ...data,
                    remember: form.remember ? 'on' : '',
                }))
                .post(route('login'), {
                    preserveScroll: true,
                    preserveState: true,
                    onFinish: () => form.reset('password'),
                })
        })
    })
}

登录表单组件

<form @submit.prevent="submit">
    <div class="mb-3">
        <InputLabel for="email" value="Email or Mobile" />
        <TextInput id="email" v-model="form.email" type="text" class="form-control" autofocus placeholder="Please enter email or mobile" required :class="{ 'is-invalid': form.errors.email }" />
        <InputError :message="form.errors.email" />
    </div>

    <div class="mb-3">
        <div class="float-end">
            <Link v-if="canResetPassword" :href="route('password.request')" class="text-muted">Forgot password?</Link>
        </div>
        <InputLabel for="password" value="Password" />
        <div class="position-relative auth-pass-inputgroup mb-3">
            <input :type="togglePassword ? 'text' : 'password'" class="form-control pe-5" placeholder="Enter password" id="password-input" v-model="form.password" autocomplete="password" required :class="{ 'is-invalid': form.errors.password }" />
            <BButton variant="link" class="position-absolute end-0 top-0 text-decoration-none text-muted" type="button" id="password-addon" @click="togglePassword = !togglePassword">
                <i class="ri-eye-fill align-middle"></i>
            </BButton>
            <InputError :message="form.errors.password" />
        </div>
    </div>

    <div class="form-check">
        <Checkbox v-model:checked="form.remember" name="remember" class="form-check-input" id="auth-remember-check" />
        <label class="form-check-label" for="auth-remember-check">Remember me</label>
    </div>

    <div class="mt-4">
        <BButton variant="success" class="w-100" type="submit" :disabled="form.processing">Sign In</BButton>
        <InputError :message="form.errors.recaptcha_token" />
    </div>
</form>

有没有大佬遇到过类似的问题？麻烦帮忙看看哪里出问题了，万分感谢！

内容来源于stack exchange