reCAPTCHA-V3をPHPで導入する方法 #HTML5

用意

１：index.phpとsent.phpを作成する(必要ならばstyle.cssも)
２：Googleアカウントを作成する

手順

１：reCAPTCHAのサイトに行き、サイトキーとシークレットキーを取得する
２：index.phpにAPIのソースコードを記述する
３：sent.phpに認証の処理を記述する

注意

●ドメインを登録しないといけないところがあり、
ローカル環境で動かしたい場合、127.0.0.1などのIPアドレスは有効だが、localhostやlocalhost:8000などは登録できない。ポートは記述しないようにする。

●reCAPTCHAのアイコンが邪魔だと感じる場合は、wordpressだとアイコンを消す用のプラグインがあるので調べてみてください。
wordpress以外で消す方法がわからないので、分かる方、教えてください。

コードの大体の流れ

１：index.phpでサイトキーからトークンを生成する
２：生成したトークンをsent.phpに渡して、シークレットキーを用いて認証処理をする

参考

https://knowledge.moshimore.jp/entry/recaptcha_introduction
https://developers.google.com/recaptcha/docs/v3

完成形

index.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>reCAPTCHAテスト</title>
  <link rel="stylesheet" type="text/css" href="style.css">

  <!-- 以下を追加する========================================================= -->
  <script src="https://www.google.com/recaptcha/api.js?render=サイトキーを記述する"></script>
  <script>
      grecaptcha.ready(function () {
        grecaptcha.execute("サイトキーを記述する", {action: "sent"}).then(function(token) {
          var recaptchaResponse = document.getElementById("recaptchaResponse");
          recaptchaResponse.value = token;
        });
      });
  </script>
  <!-- ==================================================================== -->

</head>
<body>
<div class="main">
  <div class="contact-form">
    <div class="form-title">
      お問い合わせ
    </div>
    <form method="post" action="sent.php">

      <div class="form-item">名前</div>
      <input type="text" name="name">

      <div class="form-item">内容</div>
      <textarea name="body"></textarea>

      <!-- 以下を追加する===================================================== -->
      <input type="hidden" name="recaptchaResponse" id="recaptchaResponse">
      <!-- ================================================================ -->

      <input type="submit" value="送信">
    </form>

  </div>
</div>
</body>
</html>

sent.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>reCAPTCHAテスト</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!-- 以下を追加========================================================================== -->
<?php
if (isset($_POST["recaptchaResponse"]) && !empty($_POST["recaptchaResponse"]))
{
    $secret = "シークレットキーを記述する";
    $verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST["recaptchaResponse"]);
    $reCAPTCHA = json_decode($verifyResponse);
    if ($reCAPTCHA->success)
    {
      echo "認証成功";
    }
    else
    {
      echo "認証エラー";
    }
}
else
{
    echo "エラーエラー";
}
?>
<!-- ==================================================================== -->

  <div class="main">
    <div class="thanks-message">お問い合わせいただきありがとうございます。</div>
    <div class="display-contact">
      <div class="form-title">入力内容</div>

      <div class="form-item">■ 名前</div>
      <?php echo $_POST["name"]; ?>

      <div class="form-item">■ 内容</div>
      <?php echo $_POST["body"]; ?>

    </div>
  </div>
</body>
</html>

style.css

* {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.header {
  height: 65px;
  border-bottom: 1px solid #dddddd;
}

.header-left {
  float: left;
  padding: 10px 60px;
  color: #ED7000;
  font-size: 30px;
}

.header-right {
  float: right;
  color: #808080;
}

.header-right li {
  float: left;
  padding: 20px 30px;
  border-left: 1px solid #dddddd;
}

.selected {
  color: #ED7000;
}

.main {
  min-width: 800px;
}

.contact-form {
  width: 70%;
  margin: 60px auto;
  padding: 50px;
  background-color: #F5F5F5;
  color: #333;
}

.form-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 30px;
}

.form-item {
  padding: 20px 0 10px 0;
  font-weight: bold;
}

input[type="text"] {
  width: 30%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
}

input[type="submit"] {
  margin-top: 30px;
  width: 30%;
  border: 1px solid #5cb85c;
  border-radius: 4px;
  padding: 12px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  font-size: 14px;
  line-height: 1.428571429;
  color: white;
  background-color: #5cb85c;
}

textarea {
  width: 90%;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
}

.thanks-message {
  margin-top: 50px;
  text-align: center;
  font-size: 24px;
}

.display-contact {
  width: 70%;
  margin: 30px auto;
  padding: 50px;
  background-color: #F5F5F5;
  color: #333;
}

.footer {
  height: 200px;
  clear: left;
  border-top: 1px solid #dddddd;
}

.footer-left {
  float: left;
  width: 200px;
  padding: 30px 100px;
}

.footer-left li {
  margin-bottom: 5px;
  color: #808080;
  border-bottom: 1px dotted #808080;
}

.like-box {
  float: left;
  padding: 30px;
}