PHP

Tambahkan Contoh Google reCaptcha V3 dengan PHP

Posted on by administrator
19
Aug

oleh Vincy. Terakhir diubah pada 11 Agustus 2022.

Google reCaptcha V3 adalah versi terbaru yang disediakan dengan keamanan tertinggi dibandingkan. Google berisi layanan captcha yang berbeda dengan reCaptcha V2. Ada kotak centang (Saya bukan Robot), captcha tak terlihat, dan lain-lain.

Dengan V3, Google menjamin tidak ada gesekan saat memprediksi skor untuk interaksi situs web. Skor dan laporan respons yang dikembalikan oleh reCaptcha V3 adalah ukuran keamanan yang sangat baik. Ini membantu untuk mengambil tindakan yang sesuai untuk melindungi situs web.

Seperti konsep reCaptcha Google lainnya, V3 juga memiliki lebih dari satu metode untuk mengintegrasikan tantangan captcha. Mereka adalah dua seperti yang tercantum di bawah ini.

  1. Panggilan terprogram dari tantangan.
  2. Pengikatan otomatis tantangan dengan tombol formulir.

Artikel ini menjelaskan untuk menerapkan kedua metode dengan membuat contoh.

Diagram di bawah ini akan membantu untuk melihat sekilas 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. Kustomisasi reCAPTCHA Google Invisible di Halaman Web.

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

proses validasi google recaptcha

Cara mendapatkan kunci Google reCaptcha

Ini adalah proses sederhana dua langkah 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.

Langkah1: Daftarkan domain situs Anda

Buka konsol admin recaptcha Google untuk mendaftarkan domain guna mengintegrasikan reCaptcha V3.

Tangkapan layar di bawah menutupi data yang terkait dengan domain dan detail pemilik situs. Masukkan detail situs Anda di tempat data bertopeng.

daftar domain buat kunci

Langkah2: Salin kunci situs reCaptcha dan kunci rahasia.

Setelah pendaftaran selesai, kunci reCaptcha V3 ditampilkan di bawah ini. Salin detail ini dan konfigurasikan ke dalam kode situs web.

Itu kunci situs digunakan untuk merender Google reCaptcha di sisi klien. Dan, kunci rahasia digunakan untuk verifikasi sisi server.

Contoh berikut berisi file konfigurasi aplikasi untuk ini. Lanjutkan membaca untuk mengetahui cara mengkonfigurasi.

kunci recaptcha google

Tentang contoh ini

Contoh ini merender skrip dan elemen reCaptcha di UI arahan. Ini memiliki konfigurasi untuk membuat situs web reCaptcha siap dengan kunci API.

Itu mendapat token dari Google reCaptcha API dan menambahkannya ke formulir. Saat dikirim, skrip PHP sisi server menerima token untuk mengirim verifikasi situs permintaan ke API.

API reCaptcha mengembalikan respons JSON dengan skor, boolean sukses, dan detail lainnya. Berdasarkan skor (antara 0 sampai 1), membantu mengukur standar interaksi. Kami telah mengaktifkan solusi captcha khusus berdasarkan standar validitas login.

Ini mengintegrasikan tantangan terprogram Google reCaptcha V3 di root. Jika Anda ingin menerapkan metode “pengikatan otomatis”, maka itu ada di folder terpisah.

Struktur di bawah ini menunjukkan urutan dan lokasi file contoh reCaptcha. Akan sangat membantu untuk mengatur kode ini dengan benar di lingkungan pengembangan.

google recaptcha file php

File konfigurasi aplikasi

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

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

config.php

<?php

class Config
{

    const GOOGLE_RECAPTCHA_SITE_KEY = '';

    const GOOGLE_RECAPTCHA_SECRET_KEY = '';
}

?>

Metode 1: Secara terprogram menggunakan token Google reCaptcha melalui skrip

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

Selama eksekusi eksplisit, ia menetapkan parameter ke permintaan. Parameter ini dapat dikembalikan dengan respons Google reCaptcha V3. Ini akan membantu untuk verifikasi tambahan.

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

Itu mengeksekusi permintaan Google reCaptcha secara eksplisit. Fungsi panggilan balik dari tindakan ini akan mengembalikan token reCaptcha.

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

Setelah mendapatkan bidang token, formulir dikirimkan melalui JavaScript. Itu menyerahkan formulir fungsi memposting data formulir ke PHP melalui AJAX. Pada artikel sebelumnya, kita telah melihat cara mengaktifkan captcha kustom PHP menggunakan AJAX.

index.php (Javascript Google reCaptcha mengeksekusi)

// 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 interaksi situs web menggunakan Google reCaptcha V3 API

Formulir mengirimkan tindakan memanggil skrip PHP ini dengan mengirimkan token reCaptcha. Itu membangun 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 diberikan oleh Google API.

Ini mengembalikan skor tentang interaksi yang dilakukan di situs web. Skor ini akan berada di antara peringkat 0,0 (lebih rendah) dan 1,1 (lebih tinggi). Ini membantu untuk memprediksi langkah-langkah 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: Panggilan balik pengikatan otomatis dengan tombol kirim

Ini adalah metode dasar dan sederhana untuk mengintegrasikan Google reCaptcha V3 untuk sebuah situs. Dalam pengikatan otomatis tantangan reCaptcha ini, ia mendapatkan token dalam panggilan balik.

HTML situs untuk mengikat tantangan reCaptcha secara otomatis

Ini memuat Google reCaptcha JavaScript API seperti yang kita lakukan pada metode 1.

Itu g-recaptcha bidang mengikat kunci situs panggilan balik, tindakan, dan 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 balik JavaScript untuk menambahkan bidang token ke formulir

Fungsi panggilan balik ini ditautkan dengan elemen Google reCaptcha, yang merupakan tombol kirim formulir. Jadi, saat mengklik tombol kirim, itu memanggil diKirim fungsi JavaScript.

Panggilan balik ini memiliki token reCaptcha untuk ditambahkan ke data formulir.

pengikatan otomatis/index.php (panggilan balik 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 Google reCaptcha

Di PHP, itu memverifikasi situs dan memeriksa skor interaksi. Ini berisi kode yang sama dengan form-action.php kita gunakan dalam metode 1.

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

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

administrator