質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

Laravel8でのreCAPTCHA v2 が実装できない

kk0128
kk0128

総合スコア1

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1回答

0グッド

0クリップ

240閲覧

投稿2022/12/07 08:07

編集2022/12/07 17:16

解決したいこと

Laravel8recaptcha v2 Checkboxを実装したいのですが認証が成功しません
ログイン、アカウント作成フォームでの認証はLaravelの標準機能 Laravel/ui で実装しています
ログインフォーム、アカウント作成フォーム両方での認証が失敗します
recaptcha v2実装の際のパッケージとしてbiscolab/laravel-recaptchaを使用しています
biscolab/laravel-recaptcha

バージョン

OS: Windows10
Laravel: 8.83.26
php: 8.0.6

現状

チェックボックスにチェックを入れると、チェックボックスが処理中のグルグルマークに代わりますが、ずっとグルグルで認証が成功しません

自分で試したこと

ドキュメント
biscolab/laravel-recaptcha
に従い、
composer require biscolab/laravel-recaptcha

php artisan vendor:publish --provider="Biscolab\ReCaptcha\ReCaptchaServiceProvider"
の実行

.envファイルに
RECAPTCHA_SITE_KEY
RECAPTCHA_SECRET_KEY
の登録

config/recaptcha.phpversion => v2の定義

php:/config/app.php

1/** 2 * 3 * ReCATCHA version 4 * Supported: "v2", "invisible", "v3", 5 * 6 * get more info @ https://developers.google.com/recaptcha/docs/versions 7 * 8 */ 9 'version' => 'v2',

config cacheのリロード
php artisan config:cache

Bladeのヘッダに埋め込み

php:/resources/views/layouts/app.blade.php

1<head> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 5 <!-- CSRF Token --> 6 <meta name="csrf-token" content="{{ csrf_token() }}"> 7 8 <title></title> 9 10 <!-- Scripts --> 11 <script src="{{ secure_asset('js/app.js') }}" defer></script> 12 13 <!-- Fonts --> 14 <link rel="dns-prefetch" href="//fonts.gstatic.com"> 15 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 16 17 <!-- Styles --> 18 <link href="{{ secure_asset('css/app.css') }}" rel="stylesheet"> 19 20 <!--goole recaptcha v2--> 21 {!! htmlScriptTagJsApi() !!} 22</head>

BladeのFormへの埋め込み
login.blade.phpも同様

php:/resources/views/auth/register.blade.php

1<form method="POST" action="{{ route('register') }}"> 2 @csrf 3 <div class="row mb-3"> 4 <label for="name" class="col-md-4 col-form-label text-md-end">{{ __('Name') }}</label> 5 6 <div class="col-md-6"> 7 <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus> 8 9 @error('name') 10 <span class="invalid-feedback" role="alert"> 11 <strong>{{ $message }}</strong> 12 </span> 13 @enderror 14 </div> 15 </div> 16 17 <div class="row mb-3"> 18 <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label> 19 20 <div class="col-md-6"> 21 <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email"> 22 23 @error('email') 24 <span class="invalid-feedback" role="alert"> 25 <strong>{{ $message }}</strong> 26 </span> 27 @enderror 28 </div> 29 </div> 30 31 <div class="row mb-3"> 32 <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label> 33 34 <div class="col-md-6"> 35 <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password"> 36 37 @error('password') 38 <span class="invalid-feedback" role="alert"> 39 <strong>{{ $message }}</strong> 40 </span> 41 @enderror 42 </div> 43 </div> 44 45 <div class="row mb-3"> 46 <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label> 47 48 <div class="col-md-6"> 49 <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password"> 50 </div> 51 </div> 52 53 <div class="row mb-0"> 54 <div class="col-md-6 offset-md-4"> 55 <!-- Google reCaptcha v2 --> 56 {!! htmlFormSnippet() !!} 57 <button type="submit" class="btn btn-primary"> 58 {{ __('Register') }} 59 </button> 60 </div> 61 </div> 62</form>

こちらのサイトではValidationも追加していたのでValidationも追加しました。
https://makitweb.com/adding-google-recaptcha-v2-to-form-in-laravel/

アカウント登録時のValidation

php:RegistController.php

1/** 2 * Get a validator for an incoming registration request. 3 * 4 * @param array $data 5 * @return \Illuminate\Contracts\Validation\Validator 6 */ 7 protected function validator(array $data) 8 { 9 return Validator::make($data, [ 10 'name' => ['required', 'string', 'max:255'], 11 'email' => ['required', 'string', 'email', 'max:255', 'unique:users'], 12 'password' => ['required', 'string', 'min:8', 'confirmed'], 13 'g-recaptcha-response' => 'recaptcha', //Google recaptcha v2 14 ],); 15 }

ログイン時のValidation

php:/vendor/laravel/ui/auth

1/** 2 * Validate the user login request. 3 * 4 * @param \Illuminate\Http\Request $request 5 * @return void 6 * 7 * @throws \Illuminate\Validation\ValidationException 8 */ 9 protected function validateLogin(Request $request) 10 { 11 $request->validate([ 12 $this->username() => 'required|string', 13 'password' => 'required|string', 14 'g-recaptcha-response' => 'required|recaptcha', // Google recaptcha v2 15 ],); 16 }

参考にしたサイト

biscolab / laravel-recaptcha
https://github.com/biscolab/laravel-recaptcha

biscolab/laravel-recaptchaを使って実装の解説をしているサイト
https://makitweb.com/adding-google-recaptcha-v2-to-form-in-laravel/

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

認証ができない場合、スーパーリロードしてもう一度チェックを入れると認証が通るようになりました。
しかし、スーパーリロードしても認証が通らなく、何度かスーパーリロードすると通るようになるなど、動作が不安定です…

投稿2022/12/08 12:49

kk0128

総合スコア1

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。