LaravelでReCAPTCHAを複数の処理で使用する方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

使っているパッケージ
前提
結論
まとめ

オススメ本

WEB+DB PRESS Vol.136

Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう！！

Amazon

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

Amazon

楽天

⇨ 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 にご連絡ください。

それでは！