LoginSignup
ishiguro3
@ishiguro3

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

【reCAPTCHA V3】の実装と検証について

解決したいこと

WordPressにて【Contact Form 7】のプラグインを使用した「お問い合わせ」ページに【reCAPTCHA V3】の実装を試みたのですが、
Google reCAPTCHAの簡易コンソール画面で確認したところ、
「注: ライブ トラフィックがまだ十分にないサイトでは、スコアが正確でない可能性があります。詳しくは、Google のデベロッパー サイトをご覧ください。」と表示が出ました。
まず、調べてみたのですが「ライブ トラフィックがまだ十分にないサイト」の意味がわかりません。どういう状況を差すのでしょうか?
PHP等のコードに誤りがあるということでしょうか?

又、「リクエスト」と「スコア」も【reCAPTCHA V3】を設置してから2日ぐらいはちゃんと動作しているように見受けられたのですが、それ以降は何も動作していないように見えます。
これはトークンの期限切れ?というやつでしょうか・・・それとも何かソースコードが不十分ということなのでしょうか?

今回は「【reCAPTCHA V3】を実装するプラグインを使わずにPHPで」との指示でして、PHPでちゃんと動作するように実装して検証までしたいと考えております。

下記に[page-content.php]及び[Contact Form 7]に記載したソースコードを貼り付けていますので、どこに問題があるか解決策のご教授をしていただけたら幸いです。

また、検証の仕方も、調べてもイマイチわからず、おすすめの記事が載っているサイトがありましたらご教示いただけたら幸いです。

発生している問題・エラー

reCAPTCHA01.png

reCAPTCHA02.png

reCAPTCHA03.png

該当するソースコード

お問い合わせ[page-contact.php]は下記の通りです。
※'サイトキー'と'シークレットキー'は実際にはちゃんと取得したものを貼り付けてあります。

<?php
// サイトキーを入力
$key = 'サイトキー';
// シークレット キーを入力
$secretKey = 'シークレットキー';
if (isset($_POST['your-company']) && isset($_POST['your-name'])) 
{
  $Response = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['g-recaptcha-response']);
  $result = json_decode($Response);
  if ($result->success) 
  {
    $message = 'success';
    $status = 'success';
  } 
  else 
  {
    $message = $result->{'error-codes'}[0];
    $status = 'danger';
  }
}
?>

<?php get_header(); ?>
    <main>
        <section id="contact">
            <div class="breadcrumbBox">
                <ul class="breadcrumb">
                    <li class="">HOME</li>
                    <li class="">お問い合わせ</li>
                </ul>
            </div>
            <div class="boxTtl">
                <h2 class="">お問い合わせ</h2>    
            </div>
        </section>

        <section id="contactBox">
            <div class="contactTxtBox">
                <p class="contactTxtTop">お気軽にお問い合わせください。</p>
                <p class="contactTxtBottom">お電話でのお問い合わせ<br>
                TEL 000-0000-0000</p>
            </div>

            <?php echo do_shortcode('[contact-form-7 id="99" title="コンタクトフォーム 1"]'); ?>

        </section>
    </main>

<?php get_footer(); ?>

  <script src="https://www.google.com/recaptcha/api.js?render=<?php echo $key ?>"></script>
  <script>
  grecaptcha.ready(function() {
    grecaptcha.execute('<?php echo $key ?>', {action:'wpcf7_submit'}).then(function(token) {
    var reCAPTCHA = document.getElementById('recaptcha');
         reCAPTCHA.value = token;
    });
  });
  </script>

下記は[Contact Form 7]プラグイン内に記述した、ソースコードです。

<div class="form">

<div class="formItem cf fi">
<p class="formItemLabel cf">会社名<span class="must">必須</span></p>
<labe>[text* your-company class:formItemInput]</label>
</div>

<div class="formItem cf fi">
<p class="formItemLabel">お名前<span class="must">必須</span></p>
<labe>[text* your-name class:formItemInput]</label>
</div>

<div class="formItem cf fi">
<p class="formItemLabel">フリガナ<span class="must">必須</span></p>
<label>[text* your-kana class:formItemInput]</label>
</div>

<div class="formItem cf fi">
<p class="formItemLabel">メールアドレス<span class="must">必須</span></p>
<label>[email* your-email class:formItemInput]</label>
</div>

<div class="formItem cf fi">
<p class="formItemLabel">お電話番号<span class="must">必須</span></p>
<label>[tel* your-tel class:formItemInput]</label>
</div>

<div class="formItem cf fi">
<p class="formItemLabel">ご住所</p>
<label>[text your-address class:formItemInput]</label>
</div>

<div class="formItem cf fi">
<p class="formItemLabel isMsg">お問い合わせ内容<span class="must">必須</span></p>
<label>[textarea* your-message  class:formItemTextarea]</label>
</div>

<div class="wpBtn">
<input type="hidden" name="recaptchaResponse" id="recaptchaResponse" />
[confirm class:formBtn class:fi "確認する"][back "修正する"][submit class:formBtn class:fi "送信する"]
</div>

</div>

以下のソースコードは今回の件とは全く関係ないかと思いますが、
念のため[function.php]も記載いたします。

<?php
function wpcf7_validate_spam_message( $result, $tag ) {
  $value = str_replace(array(PHP_EOL,' '), '', esc_attr($_POST['your-message']));
  if (!empty($value)) {
    if (preg_match('/^[!-~]+$/', $value)) {
      $result['valid'] = false;
      $result['reason'] = array('your-message' => '日本語で入力してください');
    }
  }
  return $result;
}
add_filter( 'wpcf7_validate', 'wpcf7_validate_spam_message', 10, 2 );
?>

※とある案件のために、現在個人で製作したサイトで試運転を試みております。(Googleコンソールには登録しておりません。)

0

2Answer

実装したサイトから実行されたreCAPTCHAの件数が少ないだけです。コードは見ていませんが、実装したコードで動作しているのなら問題ないと思います。リクエストが溜まれば、その表示は消えます。リクエストとスコアについても設置したサイトからのreCAPTCHAの実行がないだけではないかと思います。一般に公開しているサイトでなければ、第三者からの実行はまずないと思いますし、質問者さんがテストで実行したのが設置から2日だけなのではないでしょうか。
最後に、1つ目のコード中の電話番号大丈夫ですか?

1Like

Comments

  1. @ishiguro3

    Questioner
    ご回答ありがとうございます!!

    @soratakoさんのおっしゃる通りで、
    確かに【reCAPTCHA】を実装してから2日だけテストメールをして反応を確かめていただけでした。
    この質問を投稿した後に何度かテストメールをしましたところ、昨夜に「リクエスト」と「スコア」に反応があることを確認はできましたので、動作はやはり問題ないのかなと思い、@soratakoさんのご回答で確信を持てました。

    又、電話番号についてのご指摘もありがとうございます。

    たいへん助かりました!!

質問投稿後に一晩寝かせて確認したら「リクエスト」と「スコア」に反応がありました:thinking:
reCAPTCHA04.png

0Like

Your answer might help someone💌