今回は、さて、驚くほど簡単にreCapthca認証でBOT、スパム対策を行おう！！（フロントエンド偏）書いた続きを書いていきます。
フロントで取得したトークンが本当に正しいのかを判別していきます。
ちなみに使用言語はLaravelです。
また、バックエンドではシークレットキーを使っていくのでGoogleReCPTCHAの方からシークレットキーをコピーして来てください。
それでは一緒に説明を見ていきましょう！
#シークレットキーの環境変数を設定#
こちらの記事初心者必見！固定値（キー、URLなど）は.envファイルに書いて再利用しよう！！（Laravel偏）にも書いてるのですが、固定値などは環境変数として設定するのが良いでしょう。
一応こちらでも書くので、わからなかったらこの記事を見て下さい。
RECAPTCHA_SECRET_KEY='SECRET_KEY'
// グーグルリキャプチャのシークレットキー
'RECAPTCHA_SECRET_KEY' => env('RECAPTCHA_SECRET_KEY'),
#HTTP通信を行うためのセットアップ#
次に、API通信を行うためにguzzlehttpをインストールします。
composer require guzzlehttp/guzzle
また、詳しいやり方はこちらの記事guzzle で Http通信するに書いてあるのでぜひご覧ください。
#トークンが正しいかの判定#
最後に、何らかの形で発行したトークンが本当に正しいのかを判定します。
###クライアントおよびシークレットキーの宣言###
先ほど環境変数として設定したシークレットキーとインストールしたguzzlehttpを使用します。
また、今回はコントローラーを使用するのですが、コントローラーでなくても実装できるので自分の用途に合わせて適時変更してください。
public function post(Request $request) {
// reCaptchaのトークン認証を行う
$client = new \GuzzleHttp\Client();
// シークレットキー
$secret = config('app.RECAPTCHA_SECRET_KEY');
}
###トークンの取得およびreCPATCHAへのリクエスト###
フロントからトークンを取得します。
今回はクエリ情報として受け取り、guzzlehttpでトークンが正しいのかをリクエストします。
public function post(Request $request) {
// reCaptchaのトークン認証を行う
$client = new \GuzzleHttp\Client();
// シークレットキー
$secret = config('app.RECAPTCHA_SECRET_KEY');
// トークン
$token = $request->token;
// トークンが無い場合
if(!isset($token)){
// tokenが無かった場合の処理
return response()->json([
'data' => '',
'message' => 'The token is undefiend'
]);
}
$response = $client->request(
'POST',
'https://www.google.com/recaptcha/api/siteverify?secret=' . $secret . '&response=' . $token, // URLを設定
);
return response()->json([
'data' => $response->getBody()->getContents(),
'message' => 'Getting recapcha`s score is success'
]);
}
$client->requestで得た結果をresponse()->jsonでフロントへと返します。
###結果の受け取り###
await this.$axios
.post(process.env.VUE_APP_LARAVEL_SITE_KEY + '/api/recaptchafetchapi', {
token: token
})
.then((result) => {
// jsonファイルのオブジェクト化
const resultToObject = JSON.parse(result.data.data)
if (resultToObject.success && resultToObject.score >= 0.3) {
// トークン認証が成功かつスコアが0.3以上だった場合アカウントを作成できるようにしている
} else {
// token認証が通らなかったときの処理
}
})
返ってきた値を参照するには、JSON.parseを行いオブジェクト化します。
その中に、success（認証がせいこうしたか）やscore（人間らしい動きをしているか）などのプロパティがあるので、これらを使ってページの制御を行ってみてください。
いかがだったでしょうか？
僕自身初めての経験だったので、めちゃめちゃ時間かかりました。
なので、この記事を参考にして少しでも時間を有効活用してもらえたらなと思います。
以上、「さて、驚くほど簡単にreCapthca認証でBOT、スパム対策を行おう！！（バックエンド偏）」でした！
良ければ、LGTM、コメントお願いします。
また、何か間違っていることがあればご指摘頂けると幸いです。
他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！
Thank you for reading