() translation by (you can also view the original English article)
ক্যাপচা সমাধান করা সম্ভবত ওয়েবের মধ্যে সবচেয়ে বেশি বিরক্তিকর কাজ। এগুলো বেশীরভাগ ব্যবহারকারীর জন্য ঝামেলাপূর্ণ, বিশেষ করে যারা দৃষ্টিশক্তিহীন অথবা যারা প্রতিবন্ধী এবং ইন্টারনেট চালানোর জন্য বিভিন্ন সহায়ক টেকনোলজির উপর নির্ভরশীল, যেমন স্ক্রিন-রিডার। তবে, দুঃখের বিষয় হচ্ছে, স্প্যামের বিরুদ্ধে যুদ্ধ করতে ক্যাপচাগুলি একেবারে অপরিহার্য।
মজার ব্যপার হচ্ছে, যদিও এই ট্রাডিশনাল "বিকৃত পাঠ্য" ক্যাপচাগুলি মানুষ ব্যবহারকারীদের পড়ার জন্য বিরক্তিকর, কিন্তু আধুনিক কৃত্রিম বুদ্ধিমত্তাসম্পন্ন প্রযুক্তি এগুলো সমাধান করতে ব্যর্থ হয়েছে। এমনকি গুগলও একই ধরনের টেকনোলোজি ব্যবহার করে গুগলের স্ট্রীট ভিউ লোকেশন যেমনঃ হাউজ নম্বর, রোড সাইন ইত্যাদি নিশ্চিত করে থাকে!
এটা শুধুমাত্র সংখ্যানির্ভর, যার ফলে ২০১৪ সালের শেষের দিকে, গুগলের ডেভেলপাররা সবচেয়ে সেরা ক্যাপচা সমাধান নিয়ে এসেছে। নো-ক্যাপচা রি-ক্যাপচার জন্য কিছুই লাগে না শুধু একটু আঙ্গুলের স্পর্শ, একটি মাউস ক্লিক অথবা কী-বোর্ড দিয়ে ইনপুটের উপর ফোকাস করা এবং স্পেসবারে চাপ দেয়াই যথেষ্ট।
এটা খুবই সহজ, কিন্তু গুগলের রিস্ক এনালাইসিস যদি এখনো নিশ্চিত হতে না পারে যে আপনি মানুষ কিনা, তাহলে দ্বিতীয় প্রম্পট প্রদর্শিত হবে।
আপনি এটি ইতিমধ্যেই ওয়েব জুড়ে বিভিন্ন সাইটে দেখতে পাবেন, উদাহরণস্বরূপ submission page of @materialup এ যেমন দেখা যাচ্ছে।
নো-ক্যাপচা রিক্যাপচা কীভাবে পাবেন
চলুন তাহলে এবার ওয়েবসাইটের ঝুঁকি এড়াতে নিজের ওয়েবসাইটে একটি নো-ক্যাপচা সেটআপ করে নেই।
ধাপ ১
প্রথমত, আমাদের একটি API কী দরকার, সেজন্য নীচের ঠিকানায় যেতে হবে https://www.google.com/recaptcha/admin। এই পেইজে অ্যাক্সেস করতে আপনাকে একটি গুগল একাউণ্টে লগ-ইন করতে হবে। আপনাকে আপনার ওয়েবসাইট নিবন্ধন করতে বলা হবে, তাই একটি উপযুক্ত নাম দিন, তারপর নির্দিষ্ট ডোমেইন তালিকাভুক্ত করুন (উদাহরণস্বরূপ tutsplus.com) যেখানে এই নির্দিষ্ট রিক্যাপচাটি ব্যবহার করা হবে। সাবডোমেইনসমূহ (যেমন webdesign.tutsplus.com এবং code.tutsplus.com) স্বয়ংক্রিয়ভাবে এই একাউণ্টে যুক্ত হয়ে যাবে।
ধাপ ২
এগুলো সম্পন্ন করলে আপনাকে একটি সাইট কী এবং তার অংশিদারীত্বের গোপন কী দেয়া হবে:
ধাপ ৩
এই কী গুলোর নীচে আপনি বেশ কিছু কোড স্নিপেট দেখতে পাবেন যা দিয়ে আপনার ওয়েবসাইটে রি-ক্যাপচা অন্তর্ভুক্ত করতে পারবেন। প্রথমে আছে জাভাস্ক্রিপ্ট:
1 |
<script src='https://www.google.com/recaptcha/api.js'></script> |
কোড স্ট্রিং-এ একটি প্যারামিটার যোগ করে আপনি ৪০ টি সমর্থিত ভাষার কোনটি ব্যবহার করছেন তা নির্ধারণ করতে পারেন। আমরা এখানে es যোগ করছি যেটা আমাদের স্প্যানিশ ভাষার রি-ক্যাপচা ব্যবহারের সু্যোগ দিবে:
1 |
<script src='https://www.google.com/recaptcha/api.js?hl=es'></script> |
এই স্ক্রিপ্ট ট্যাগটি আপনার পেইজের ফুটারে যুক্ত করুন (অথবা যেই ফরমে আপনার রি-ক্যাপচাটি দেখাবে, তার ঠিক নীচে যুক্ত করুন, এটা নির্ভর করে আপনি কীভাবে আপনার পেইজটি লোড করতে চাচ্ছেন তার উপর)।
ধাপ ৪
তারপর আছে স্থানধারক বা প্লেসহোল্ডার যেটা আপনি আপনার ফরম মার্কআপ বা কোডে যুক্ত করবেন, ঠিক যেখানে আপনি রিক্যাপচাটি দেখাতে চান।
1 |
<div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div> |
দ্রষ্টব্য: data-sitekey অ্যাট্রিবিউট আপনার কী-এর প্রকৃত মান ধারণ করবে, উদাহরণস্বরূপ দেয়া নকল মানটি নয়।
এই পর্যন্ত এসে আরও বেশ কিছু অ্যাট্রিবিউট আছে যা আপনি আপনার রি-ক্যাপচাটির গঠন ও কার্যকারিতা পরিবর্তন করতে ব্যবহার করতে পারেন। উদাহরন স্বরূপ, এই div এ data-theme="dark" যুক্ত করলে আপনি একটি গাড় রঙের সংস্করণ পাবেন, যেটা হয়তোবা আপনার ইউজার ইণ্টারফেসের সাথে আরও ভালোভাবে মানিয়ে যাবে:
আপনার রি-ক্যাপচা কনফিগার করার আরো বিশদ বিবরণের জন্য developers.google.com দেখুন।
সব একত্র করুন।
এখন আমরা আমাদের প্রাথমিক উপাদানগুলো পেয়েছি। এবার এগুলোকে কর্মক্ষেত্রে প্রয়োগ করার পালা।
ধাপ ১
চলুন আমরা আমাদের স্ক্রিপ্ট ট্যাগ এবং প্লেসহোল্ডারকে একটি সহজ ফর্মের মধ্যে রাখি:
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title> |
5 |
</head>
|
6 |
|
7 |
<body>
|
8 |
|
9 |
<form action="" method="post"> |
10 |
|
11 |
<label for="name">Name:</label> |
12 |
<input name="name" required><br /> |
13 |
|
14 |
<label for="email">Email:</label> |
15 |
<input name="email" type="email" required><br /> |
16 |
|
17 |
<div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div> |
18 |
|
19 |
<input type="submit" value="Submit" /> |
20 |
|
21 |
</form>
|
22 |
|
23 |
<!--js-->
|
24 |
<script src='https://www.google.com/recaptcha/api.js'></script> |
25 |
|
26 |
</body>
|
27 |
</html>
|
এখানে আমরা একটি খালি পেইজ কাঠামো ব্যবহার করেছি যাতে শুধুমাত্র একটি ফরমে একটি name ইনপুট, একটি email ইনপুট এবং একটি সাবমিট বাটন থাকবে। এখানে কোন স্টাইল করা হয় নি কারণ এটা এই টিউটোরিয়ালের জন্য দরকার নেই।
রি-ক্যাপচা পরীক্ষায় পাস করা হয়েছে তা দেখানোর জন্য আমাদের কিছু সার্ভার-সাইড পরীক্ষা চালানোর প্রয়োজন হবে। এক্ষেত্রে, আমরা এই কাজটি PHP দিয়েও করতে পারি, এজন্য এই ফাইলটি একটি নতুন প্রজেক্টে index.php হিসেবে সংরক্ষণ করুন।
ধাপ ২
আপনি হয়তো খেয়াল করেছেন ফরমের পদ্ধতিটি হচ্ছে post, তাই যখন আমরা ফরম ডাটা সাবমিট করবো, তখন এটা এই পেইজে ভেরিয়েবলসমূহের একটি অ্যারে হিসেবে ফেরত আসবে। আমরা এই ভেরিয়েবলের মানগুলো লুপের মাধ্যমে আউটপুট হিসেবে পেতে পারি, তাই আপনার পেইজের কোন এক জায়গায় নিন্মোক্ত কোডসমূহ যুক্ত করুন:
1 |
<?php
|
2 |
foreach ($_POST as $key => $value) { |
3 |
echo '<p><strong>' . $key.':</strong> '.$value.'</p>'; |
4 |
}
|
5 |
?>
|
এটা আমাদের $_POST অ্যারেতে থাকা যেকোনো কী/মান গ্রহণ করে এবং কিছুটা ফরম্যাট করার পর তাঁর আউটপুট প্রদান করে। এবার আপনি যখন ফরমটি সাবমিট করবেন তখন নীচের মত কিছু একটা দেখতে পাবেন:
আপনি দেখতে পাবেন name এবং email জন্য মানটি ফিরে এসেছে, কিন্তু একইসাথে g-recaptcha-response জন্যও একটি মান ফিরে এসেছে। আপনি যদি ক্যাপচা টেস্ট পূর্ণ করতে ব্যর্থ হোন, তাহলে এই মানটি খালি থাকবে, কিন্তু আপনি যদি “I’m not a robot” এই বক্সটি চেক করেন তাহলে অক্ষরের একটি বিশাল স্ট্রিং দেখতে পাবেন।
এটা হচ্ছে সেই মান যা আমরা গুগলে পাঠাবো যাতে এটি ভেরিফাই হতে পারে, তাই চলুন এবার এটা করি।
ধাপ ৩
ভাগ্যিস, গুগল ডেভেলপার টিম এই কঠিন কাজটি আমাদের জন্য এখানে সম্পন্ন করে দিয়েছে, তাই গিটহাবের রি-ক্যাপচা প্রজেক্টে যান এবং recaptchalib.php লাইব্রেরী থেকে একটি কপি নিয়ে নিন। এটা আপনার প্রজেক্ট রুটে রাখুন এবং তারপর আপনার index.php ফাইলে এর রেফারেন্স দিন:
1 |
<?php
|
2 |
|
3 |
// grab recaptcha library
|
4 |
require_once "recaptchalib.php"; |
5 |
|
6 |
?>
|
ধাপ ৪
এই লাইব্রেরীতে ফাংশনের একটি সংগ্রহ আছে যেটা g-recaptcha-response কে (গোপন কীসহ) HTTP রিকুয়েস্টের মাধ্যমে গুগলে পাঠায়। তারপর কি প্রতিক্রিয়া আসে তা সংগ্রহ করে, এবং চেক করে দেখে যে ক্যাপচাটি সফল হলো কি হলো না। এটা ব্যবহার করতে আমাদের প্রথমে বেশ কিছু ভেরিয়েবল সেটআপ করতে হবে, PHP এর শেষের ট্যাগের আগে:
1 |
// your secret key
|
2 |
$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; |
3 |
|
4 |
// empty response
|
5 |
$response = null; |
6 |
|
7 |
// check secret key
|
8 |
$reCaptcha = new ReCaptcha($secret); |
ReCaptcha() আমাদের গোপন কী উপস্থিত আছে কিনা তা চেক করে দেখবে। যদি না থাকে তবে এই প্রক্রিয়াটি বন্ধ করে দিবে এবং আমাদেরকে চলে যেতে বলবে এবং নতুন কী নিয়ে আসতে বলবে। এবার আমরা আমাদের বিবরণ নীচের কোডের মাধ্যমে চালু করবো:
1 |
// if submitted check response
|
2 |
if ($_POST["g-recaptcha-response"]) { |
3 |
$response = $reCaptcha->verifyResponse( |
4 |
$_SERVER["REMOTE_ADDR"], |
5 |
$_POST["g-recaptcha-response"] |
6 |
);
|
7 |
}
|
ধাপ ৫
ফরমে সাবমিট করা সব কিছু যদি ভালো থাকে, তাহলে $response ভেরিয়েবলটি "সফল" হয়েছে বলে রিপোর্ট প্রদান করে এবং আমরা ফরম ডাটা প্রক্রিয়াকরণ অব্যাহত রাখতে পারি। এটা সম্ভবত নীচের মত দেখতে হবে: যেখানে আমরা ফরম ডাটার জন্য লুপ তৈরি করেছি সে অংশটি মুছে ফেলুন, তারপর নীচের অংশটি ফরমের উপরের অংশে যুক্ত করুন:
1 |
<?php
|
2 |
if ($response != null && $response->success) { |
3 |
echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!"; |
4 |
} else { |
5 |
?>
|
সবশেষে, ফরমের পরে একটি ক্লোজিং PHP ট্যাগ যুক্ত করুন:
1 |
<?php } ?> |
এটি একটি ফরম প্রদর্শন করবে, যতক্ষন না এটাকে সফলভাবে জমাদান করা না হয়। যখন জমা দেয়া হবে, তখন ছোট একটি ধন্যবাদ বিজ্ঞপ্তি দেয়া হবে। এখানে চূড়ান্ত ডেমোটি দেয়া হলো।
পরিশিষ্ট
এটা নো-ক্যাপচা, রিক্যাপচার একটি মোটামুটিভাবে প্রস্তুত PHP ইমপ্লিমেণ্টেশন ছিলো। এই প্রক্রিয়াটিকে আরও অনেক বেশী উন্নত করা সম্ভব, কিন্তু আশা করি আপনি এটার মূল বিষয়টি উপলব্ধি করতে পেরেছেন। লাইব্রেরীর জন্য মূল ক্রেডিট হচ্ছে গুগল ডেভেলপার টিমের এবং আমাকে এই বিষয়ে জানানোর জন্য Matt Aussaguel কেও ধন্যবাদ।
উপকারী রিসোর্সসমূহ
- ReCAPTCHA 1.0.0 on Github
- ReCAPTCHA documentation
- Are you a robot? Introducing “No CAPTCHA reCAPTCHA” Google Security Blog
- WordPress ReCaptcha Integration reCaptcha plugin for login, signup, comment forms, Ninja Forms and Contact Form 7
