ওয়ার্ডপ্রেসে বিভিন্ন কাজে আমি যখনই পাবলিক এজাক্স রিকুয়েস্ট করি, সেটা যদি বেশি ডেটা নেয় বা কুয়েরি করে, সেক্ষেত্রে সেই এপিআইকে প্রটেকশন দেওয়ার জন্য গুগল রিক্যাপচা ব্যবহার করি। আজকে লিখবো গুগল রিক্যাপচার ভার্সন টু নিয়ে।
ভার্সন টু তে দুই ধরনের ক্যাপচা পাবেন।
১। আই এম নট রোবট চেকবক্স: একটা বক্স থাকবে, ইউজার সেখানে ক্লিক করে ভেরিফাই করবে। যেহেতু ক্লিক ইভেন্ট ইনিশিয়েট করতে হয়, এটা বেশি সিকিউর।
২। ইনভিজিবল ক্যাপচা: সাইট লোড হওয়ার সাথে সাথেই রিক্যাপচা ইউজারকে অটো ভেরিফাই করে নিবে। এই জন্য রিক্যাপচার একটা সিম্বল সাইটের ডানে লোড হবে স্টিকি হয়ে।
রিক্যাপচা কিভাবে কাজ করে?
একটা জাভাস্ক্রীপ্ট লোড হয়। আপনার কম্পিউটারের কিছু তথ্য, আপনার আইপির কিছু তথ্য নিয়ে একটা হ্যাশ জেনারেট হয় লোড হওয়ার সময়। তারপর সেটাকে ভেরিফিকেশনের জন্য রিক্যাপচার সার্ভারে পাঠানো হয় ফ্রন্টেন্ড কি দিয়ে। ফিরতি রেসপন্সে একটা কি হয় সার্ভার লেভেলে ভ্যালিডেশনের জন্য।
সার্ভার লেভেলে আপনার সিক্রেট কি দিয়ে ভেলিডেশন হয় একই প্রক্রিয়া। তবে এই ধাপে আপনার সার্ভার রিক্যাপচার সার্ভারে যোগাযোগ করে দেখে নেয় যে ইউজার ভ্যালিড কিনা।
চলুন শুরু করি
প্রথমে গুগলের রিক্যাপচা সাইটে গিয়ে একটা কি জেনারেট করে নিন। ভার্সন ২ সিলেক্ট করবেন। গুগল থেকে একটা সাইট কি দিবে এবং একটা সিক্রেট কি দিবে, সংরক্ষন করে রাখুন।
ওয়ার্ডপ্রেসের ফাংশন পিএইচপি দিয়ে রিক্যাপচার ফ্রন্টেন্ড রিজলভারকে এড করে নিন। চাইলে যেই পেজে লোড হওয়া দরকার শুধু সেই পেজেও লোড করতে পারবেন।
function your_prefix_enqueue_recaptcha() {
wp_enqueue_script( 'google-recaptcha', 'https://www.google.com/recaptcha/api.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'your_prefix_enqueue_recaptcha' );
এজাক্স রিকোয়েস্টের ফর্মের সাবমিটের ঠিক আগে রিক্যাপচার মার্কআপ বসিয়ে দিন।
<form id="your-form-id">
<!-- Your form fields here -->
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
<input type="submit" value="Submit">
</form>
your-site-key
এর স্থানে সাইট কি দিন। ফ্রন্টেন্ডে গিয়ে রিলোড করে দেখুন সঠিকভাবে রিক্যাপচা লোড হচ্ছে কিনা।
ফর্ম সাবমিটের সময় রিক্যাপচা রেসপন্স টোকেন জেনারেট করুন। চাইলে এখানে কনসোল লগ করে দেখতে পারেন সঠিকভাবে হচ্ছে কিনা।
jQuery(document).ready(function($) {
$('#your-form-id').on('submit', function(e) {
e.preventDefault();
// Get the reCAPTCHA response token
var recaptchaResponse = grecaptcha.getResponse();
// Check if reCAPTCHA is solved
if (recaptchaResponse.length === 0) {
alert('Please complete the reCAPTCHA');
return false;
}
var formData = $(this).serialize() + '&recaptcha_response=' + recaptchaResponse;
// Perform AJAX request
$.ajax({
url: your_ajax_handler_url,
type: 'POST',
data: formData,
success: function(response) {
alert(response);
},
error: function() {
alert('There was an error. Please try again.');
}
});
});
});
সার্ভার লেভেলে ভেলিডেশন করতে হবে এখন। মূলত https://www.google.com/recaptcha/api/siteverify
এই ইউআরএল এ পোস্ট রিকোয়েস্ট করতে হবে ফ্রন্টেন্ড থেকে পাওয়া কি এবং আবার সিক্রেট কি দিয়ে।
function handle_recaptcha_validation() {
if (isset($_POST['recaptcha_response'])) {
$recaptcha_response = sanitize_text_field($_POST['recaptcha_response']);
$secret_key = 'your-secret-key';
$response = wp_remote_post(
'https://www.google.com/recaptcha/api/siteverify',
array(
'body' => array(
'secret' => $secret_key,
'response' => $recaptcha_response,
)
)
);
$response_body = wp_remote_retrieve_body($response);
$result = json_decode($response_body);
if ($result->success) {
// Proceed with form submission or whatever action you want to take
} else {
// Handle failure
wp_send_json_error('reCAPTCHA failed.');
}
}
wp_die();
}
add_action('wp_ajax_nopriv_recaptcha_validation', 'handle_recaptcha_validation');
add_action('wp_ajax_recaptcha_validation', 'handle_recaptcha_validation');
আশাকরি বুঝতে পেরেছেন। কোন প্রশ্ন থাকলে করবেন।