Tambahkan Contoh Google reCaptcha V3 dengan PHP

Programming

oleh Vinci terakhir diubah pada 11 Agustus 2022.

Google reCaptcha V3 adalah versi terbaru yang ditawarkan dengan keamanan tertinggi dibandingkan. Google menyertakan berbagai layanan captcha dengan reCaptcha V2. Ada kotak centang (saya bukan robot), captcha tak terlihat, dll.

Dengan V3, Google memastikan tidak ada gesekan saat memprediksi skor untuk interaksi situs web. Laporan skor dan respons yang disediakan oleh reCaptcha V3 adalah ukuran keamanan yang sangat baik. Ini membantu untuk mengambil langkah-langkah yang diperlukan untuk melindungi situs web.

Seperti konsep reCaptcha Google lainnya, V3 memiliki lebih dari satu cara untuk mengintegrasikan tantangan captcha. Keduanya adalah sebagai berikut.

  1. Tantang panggilan terprogram.
  2. Tantangan pengikatan otomatis dengan tombol formulir.

Artikel ini menjelaskan penerapan kedua metode dengan membuat contoh.

Diagram di bawah ini akan membantu Anda mendapatkan gambaran singkat tentang alur proses Google reCaptcha V3. Lanjutkan membaca untuk mempelajari cara mendapatkan kunci API dan mengintegrasikan reCaptcha untuk situs web Anda.

Baca juga,

  1. Formulir kontak PHP dengan Google reCAPTCHA.
  2. Sesuaikan reCAPTCHA Google yang tidak terlihat di halaman web.

Jika Anda lebih suka kode captcha khusus menggunakan PHP, Anda dapat memeriksa artikel tertaut untuk contoh kode.

Proses validasi recaptcha Google

Cara mendapatkan kunci Google reCaptcha

Ini adalah proses dua langkah sederhana untuk mendapatkan kunci API untuk menambahkan Google reCaptcha ke situs web.

Langkah-langkah ini tercantum di bawah ini dengan tangkapan layar.

  1. Daftarkan domain situs Anda.
  2. Salin kunci situs reCaptcha dan kunci rahasia.

Langkah 1: Daftarkan domain Anda

Untuk mendaftarkan domain untuk integrasi reCaptcha V3, buka konsol admin Google recaptcha.

Gambar di bawah menyembunyikan informasi domain dan detail pemilik situs. Masukkan detail situs Anda di bidang data bertopeng.

Pembuatan kunci pendaftaran domain

Langkah 2: Salin kunci situs reCaptcha dan kunci rahasia.

Setelah registrasi, kunci reCaptcha V3 akan ditampilkan di bawah ini. Salin detail ini dan konfigurasikan dalam kode situs web.

ini Kunci situs Digunakan untuk merender Google reCaptcha di sisi klien. Dan kunci rahasia Digunakan untuk otentikasi sisi server.

Contoh berikut berisi file konfigurasi aplikasi untuk tugas ini. Lanjutkan membaca untuk mempelajari cara mengonfigurasi.

Kunci recaptcha Google

Tentang contoh ini

Contoh ini menyediakan skrip dan elemen reCaptcha di UI arahan. Ini dikonfigurasi untuk menyiapkan situs web reCaptcha dengan kunci API.

Ia menerima token dari Google reCaptcha API dan menambahkannya ke formulir. Saat mengirim, skrip PHP sisi server menerima kata sandi pengiriman Konfirmasi situs Permintaan ke API

ReCaptcha API mengembalikan respons JSON dengan skor, boolean sukses, dan detail lainnya. Berdasarkan skor (antara 0 dan 1), ada baiknya mengukur standar interaksi. Kami telah mengaktifkan solusi captcha khusus berdasarkan kredensial login standar.

Tantangan pemrograman ini mengintegrasikan Google reCaptcha V3 di root. Jika Anda ingin menerapkan metode “koneksi otomatis”, itu ada di folder terpisah.

Struktur di bawah ini menunjukkan urutan dan lokasi file sampel reCaptcha. Mengatur kode ini dengan benar akan berguna dalam lingkungan pengembangan.

php google recaptcha file

File konfigurasi aplikasi

Situs ini mengonfigurasi Google reCaptcha V3 dan kunci rahasia yang digunakan dalam contoh di bawah.

Kunci situs digunakan untuk merender elemen rekaptcha Google di sisi klien. Kunci rahasia digunakan dalam file PHP untuk membuat parameter permintaan verifikasi situs.

config.php

<?php

class Config
{

    const GOOGLE_RECAPTCHA_SITE_KEY = '';

    const GOOGLE_RECAPTCHA_SECRET_KEY = '';
}

?>

Metode 1: Panggil token Google reCaptcha secara terprogram melalui skrip

Metode ini digunakan ketika pengembang ingin memiliki lebih banyak kontrol pemrograman atas kata sandi reCaptcha.

Selama eksekusi eksplisit, ia menetapkan parameter untuk permintaan. Parameter ini dapat dikembalikan oleh respons Google reCaptcha V3. Ini akan membantu untuk verifikasi lebih lanjut.

Halaman HTML merender formulir dengan reCaptcha JS

Laman landas ini memuat API JavaScript saat merender UI formulir. Ini menggunakan kunci situs Google reCaptcha saat memuat JavaScript.

index.php

<?php
require_once __DIR__ . '/Config.php';
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://phppot.com/php/google-recaptcha-v3-php/css/form.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Form with Google reCaptcha V3</title>

<script
    src="https://www.google.com/recaptcha/api.js?render=<?php echo Config::GOOGLE_RECAPTCHA_SITE_KEY; ?>"></script>
</head>
<body>
    <div class="phppot-container tile-container">
        <h3 class="text-center">Google reCaptcha V3</h3>

        <form id="frm" name="frm" method="post"
            onSubmit="getToken(event)">
            <div>
                <div class="row">
                    <label>Feedback</label> <input type="text"
                        name="txt_report" class="full-width" required>
                </div>
                <div class="row">
                    <input type="submit" value="Send" class="full-width">
                </div>
                <div id="ack-message"></div>
            </div>
        </form>
    </div>
</body>
</html>

Jalankan ReCaptcha JavaScript API untuk token

Mengeksekusi permintaan Google reCaptcha secara eksplisit. Fungsi panggilan balik dari tindakan ini mengembalikan token reCaptcha.

Kemudian, callback secara dinamis membuat elemen input menggunakan JavaScript. Memuat token ke dalam elemen ini dan menambahkannya ke formulir.

Setelah menerima bidang token, formulir dikirimkan melalui JavaScript. partikel untuk objek langsung Kirim formulir Fungsi mengirimkan data formulir ke PHP melalui AJAX. Pada artikel sebelumnya, kita melihat cara mengaktifkan captcha PHP khusus menggunakan AJAX.

index.php (eksekusi Google reCaptcha JavaScript)

// Execute Google reCaptcha v3 to get token 
function getToken(event) {
	event.preventDefault();

	grecaptcha.ready(function() {
		grecaptcha.execute('<?php echo Config::GOOGLE_RECAPTCHA_SITE_KEY; ?>', { action: 'submit' }).then(function(token) {

			var button = document.createElement('input');
			button.type="hidden";
			button.name="recaptcha_token";
			button.id = 'recaptcha_token';
			button.value = token;

			var form = document.getElementById("frm");
			form.appendChild(button);

			submitForm();
		});;
	});
}

// Submit reCaptcha token to the PHP
function submitForm() {
	const form = document.getElementById('frm');
	const formData = new FormData(form);
	var xhttp = new XMLHttpRequest();
	xhttp.open('POST', 'form-action.php', true);
	xhttp.send(formData);
	xhttp.onreadystatechange = function() {
		if (xhttp.readyState == 4 && xhttp.status == 200) {
			document.getElementById("ack-message").innerHTML = xhttp.responseText;
			document.getElementById('recaptcha_token').remove();
		}
	}
}

Verifikasi keterlibatan situs web menggunakan Google reCaptcha V3 API

Tindakan pengiriman formulir memanggil skrip PHP ini dengan mengirimkan token reCaptcha. Menghasilkan parameter posting dengan kunci dan token rahasia Google reCaptcha v3.

Skrip PHP ini menggunakan cURL untuk mengirim permintaan ke reCaptcha API. Respons cUrl mengembalikan data JSON seperti yang disediakan oleh Google API.

Mengembalikan skor untuk interaksi yang dilakukan di situs web. Skor ini akan berada di antara peringkat 0,0 (lebih rendah) dan 1,1 (lebih tinggi). Ini membantu memprediksi tindakan yang diperlukan untuk melindungi situs.

form-action.php

//PHP reCaptcha validation
<?php
require_once __DIR__ . '/Config.php';

$reCaptchaToken = $_POST['recaptcha_token'];
$postArray = array(
    'secret' => Config::GOOGLE_RECAPTCHA_SECRET_KEY,
    'response' => $reCaptchaToken
);

$postJSON = http_build_query($postArray);

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, "https://www.google.com/recaptcha/api/siteverify");
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $postJSON);
$response = curl_exec($curl);
curl_close($curl);
$curlResponseArray = json_decode($response, true);

if ($curlResponseArray["success"] == true && ! empty($curlResponseArray["action"]) && $curlResponseArray["score"] >= 0.5) {
    mail("admin@site.com", "New report", $_POST["txt_report"]);
    $output = "<div id='phppot-message' class="success">Feedback received.</div>";
} else {
    $output = "<div id='phppot-message' class="error">Invalid request.</div>";
}
print $output;
exit();

Metode 2: Jawab panggilan otomatis yang mengikat dengan tombol kirim

Ini adalah cara sederhana dan mendasar untuk mengintegrasikan Google reCaptcha V3 untuk sebuah situs. Dalam koneksi tantangan reCaptcha otomatis ini, ia menerima kata sandi dalam panggilan balik.

Situs HTML untuk koneksi tantangan reCaptcha otomatis

Seperti yang kami lakukan di Metode 1, ini memuat API JavaScript reCaptcha Google.

ini g-recaptcha Bidang panggilan balik mengikat tindakan dan kunci situs reCaptcha dengan atribut data HTML5.

pengikatan otomatis/index.php

<?php
session_start();
require_once __DIR__ . '/../Config.php';
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://phppot.com/php/google-recaptcha-v3-php/./css/form.css" />
<link rel="stylesheet" type="text/css" href="./../css/style.css" />
<title>Form with Google reCaptcha V3</title>

<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>
    <div class="phppot-container tile-container">
        <h3 class="text-center">Google reCaptcha Automatic Binding</h3>

        <form id="frm" name="frm" method="post" action="action.php">
            <div>
                <div class="row">
                    <label>Feedback</label> <input type="text"
                        name="txt_report" class="full-width" required>
                </div>
                <div class="row">
                    <input type="button" class="g-recaptcha full-width"
                        data-sitekey="<?php echo Config::GOOGLE_RECAPTCHA_SITE_KEY; ?>"
                        data-callback='onSubmit' data-action='submit'
                        value="Send" />
                </div>
            <?php
            if (! empty($_SESSION["ack_message"])) {
                ?>
            <div id="ack-message"><?php echo $_SESSION["ack_message"]; ?></div>
            <?php
            }
            $_SESSION["ack_message"] = "";
            ?>
        </div>
        </form>
    </div>
</body>
</html>

Panggilan JavaScript untuk menambahkan bidang kata sandi ke formulir

Fungsi panggilan balik ini dikaitkan dengan elemen Google reCaptcha, yang merupakan tombol kirim formulir. Jadi, mengklik tombol kirim akan memanggilnya dalam mengirim fungsi JavaScript

Panggilan balik ini memiliki token reCaptcha yang perlu ditambahkan ke data formulir.

pengikatan otomatis/index.php (muat ulang JavaScript)

// JavaScript
function onSubmit(token) {
	var button = document.createElement('input');
	button.type="hidden";
	button.name="recaptcha_token";
	button.value = token;

	var form = document.getElementById("frm");
	form.appendChild(button);
	form.submit();
}

Tindakan PHP untuk memprediksi skor reCaptcha Google

Di PHP, ini memvalidasi situs dan memeriksa skor keterlibatan. Ini berisi kode yang sama form-action.php Kami menggunakan metode 1.

Perbedaannya adalah bahwa respons dikirim ke panggilan balik AJAX melalui sesi alih-alih dicetak.

pengikatan otomatis/action.php

//Google reCaptcha V3 server-side verification
<?php
require_once __DIR__ . '/Config.php';

$reCaptchaToken = $_POST['recaptcha_token'];

$postArray = array(
    'secret' => Config::GOOGLE_RECAPTCHA_SECRET_KEY,
    'response' => $reCaptchaToken
);

$postJSON = http_build_query($postArray);

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, "https://www.google.com/recaptcha/api/siteverify");
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $postJSON);
$response = curl_exec($curl);
curl_close($curl);

$curlResponseArray = json_decode($response, true);

if ($curlResponseArray["success"] == true && $curlResponseArray["score"] >= 0.5) {
    mail("admin@site.com", "New report", $_POST["txt_report"]);
    $output = "<div id='phppot-message' class="success">Feedback received.</div>";
} else {
    $output = "<div id='phppot-message' class="error">Invalid request.</div>";
}

$_SESSION["ack_message"] = $output;
header("Location: automatic-binding.php");
?>

Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.