web-dev-qa-db-ja.com

Google Recaptcha v3のサンプルデモ

これまでは、Google Recaptcha v2を使用していましたが、最新バージョン（v3）を使用してWebAppを更新したいと考えています。

動作するデモが見つからないため、基本的なフォームに完全に動作するGoogle Recaptcha v3の例を追加することは誰にも可能ですか？

本当にありがたいです。

どうもありがとうございました。

PS：サーバーサイドでJavaサーブレットを使用していますが、PHPなどを使用して説明してもかまいません。

servletsrecaptcharecaptcha-v3
23
Ommadawn

リンクは次のとおりです。

https://recaptcha-demo.appspot.com/

V3のスコアをリクエストすると、JSONで応答が返されます

11
Suleman

ReCaptcha v3を実装する簡単なコード

基本的なJSコード

<script src="https://www.google.com/recaptcha/api.js?render=your reCAPTCHA site key here"></script>
<script>
    grecaptcha.ready(function() {
    // do request for recaptcha token
    // response is promise with passed token
        grecaptcha.execute('your reCAPTCHA site key here', {action:'validate_captcha'})
                  .then(function(token) {
            // add token value to form
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
</script>

基本的なHTMLコード

<form id="form_id" method="post" action="your_action.php">
    <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
    <input type="hidden" name="action" value="validate_captcha">
    .... your fields
</form>

基本的なPHPコード

    if(isset($_POST['g-recaptcha-response'])){
            $captcha=$_POST['g-recaptcha-response'];
        }
        else
            $captcha = false;

        if(!$captcha){
            //Do something with error
        }
        else{
            $secret = 'Your secret key here';
            $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
// use json_decode to extract json response
            if($response.success==false)
            {
                //Do something with error
            }
        }
... The Captcha is valid you can continue with the rest of your code
27
kikerrobles

サイトキーとシークレットがあることを前提としています。この手順に従ってください。

HTMLファイルにスクリプトを追加します。

 <script src="https://www.google.com/recaptcha/api.js?render=put your site key here"></script>

また、簡単なイベント処理のためにjQueryを使用してください。

これがシンプルなフォームです。

 <form id="comment_form" action="form.php" method="post" >
      <input type="email" name="email" placeholder="Type your email" size="40"><br><br>
      <textarea name="comment" rows="8" cols="39"></textarea><br><br>
      <input type="submit" name="submit" value="Post comment"><br><br>
    </form>

Google recaptchaを初期化し、readyイベントをリッスンする必要があります。その方法を次に示します。

     <script>
       // when form is submit
    $('#comment_form').submit(function() {
        // we stoped it
        event.preventDefault();
        var email = $('#email').val();
        var comment = $("#comment").val();
        // needs for recaptacha ready
        grecaptcha.ready(function() {
            // do request for recaptcha token
            // response is promise with passed token
            grecaptcha.execute('put your site key here', {action: 'create_comment'}).then(function(token) {
                // add token to form
                $('#comment_form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
                    $.post("form.php",{email: email, comment: comment, token: token}, function(result) {
                            console.log(result);
                            if(result.success) {
                                    alert('Thanks for posting comment.')
                            } else {
                                    alert('You are spammer ! Get the @$%K out.')
                            }
                    });
            });;
        });
  });
  </script>

サンプルPHPファイルを次に示します。 ServletまたはNodeまたは任意のバックエンド言語を代わりに使用できます。

<?php

        $email;$comment;$captcha;
        if(isset($_POST['email'])){
          $email=$_POST['email'];
        }if(isset($_POST['comment'])){
          $comment=$_POST['comment'];
        }if(isset($_POST['token'])){
          $captcha=$_POST['token'];
          }
        if(!$captcha){
          echo '<h2>Please check the the captcha form.</h2>';
          exit;
        }
        $secretKey = "put your secret key here";
        $ip = $_SERVER['REMOTE_ADDR'];

        // post request to server

        $url =  'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secretKey) .  '&response=' . urlencode($captcha);
        $response = file_get_contents($url);
        $responseKeys = json_decode($response,true);
        header('Content-type: application/json');
        if($responseKeys["success"]) {
                echo json_encode(array('success' => 'true'));
        } else {
                echo json_encode(array('success' => 'false'));
        }
?>

チュートリアルリンクは次のとおりです。 https://codeforgeek.com/2019/02/google-recaptcha-v3-tutorial/

それが役に立てば幸い。

4
Shaikh Shahid