⇨ Laravel 記事の目次はこちら

Laravel で ReCAPTCHA を Ajax や axios などを使って、複数の処理で使用する方法についてまとめました。

Laravel 6
"arcanedev/no-captcha": "10.*"
ReCAPTCHA v3

使っているパッケージ

noCAPTCHA というこちらのパッケージを使っています。

前提

ReCAPTCHA は、一度その token を使うともう同じ物は使えなくなるので、再生成する必要があります。

なので、再生成するコードを非同期の処理の際に、動かしてあげるような書き方をすれば、Vue であろうと jQuery であろうと動くはずです。

この記事では、複数の処理で使う方法について書いています。基本的な実装の仕方は無限に記事があるのでそちらを参照してください。

結論

grecaptcha.ready(function () {
  reloadGrecaptcha()
})

function reloadGrecaptcha() {
  grecaptcha.execute("ここにサイトキー", { action: "login" }).then(token => {
    $("#g-recaptcha-response").val(token)
  })
}

このように、関数を定義して、ページが読み込まれた時に生成（前述の ready のとき）、POST した際に再生成（後述）してあげれば良いと思います。

$.ajax({
  //割愛
}).done(data => {
  reloadGrecaptcha()
})

axios.post("post", obj).then(res => {
  reloadGrecaptcha()
})

まとめ

以上です。

誰かの参考になればと思います。

感想・苦情は TwitterDM にご連絡ください。

それでは！

人気記事

PHP7.4 ＋ Laravel6 のプロジェクトを AWS EC2 にデプロイする

【laravel-breadcrumbs】Laravel でパンくずリストを実装する