এই পৃষ্ঠাটি ব্যাখ্যা করে যে কীভাবে আপনার ওয়েবপৃষ্ঠাতে অদৃশ্য reCAPTCHA সক্ষম এবং কাস্টমাইজ করবেন।
অদৃশ্য reCAPTCHA আহবান করতে, আপনি যেটি করতে পারেন:
- স্বয়ংক্রিয়ভাবে একটি বোতাম বা চ্যালেঞ্জ আবদ্ধ
- প্রোগ্রাম্যাটিকভাবে চ্যালেঞ্জটিকে একটি বোতামে আবদ্ধ করুন বা
- প্রোগ্রামগতভাবে চ্যালেঞ্জ আহ্বান করুন
কিভাবে অদৃশ্য reCAPTCHA কাস্টমাইজ করতে হয় তা শিখতে কনফিগারেশন দেখুন। উদাহরণস্বরূপ, আপনি ভাষা বা ব্যাজ অবস্থান নির্দিষ্ট করতে চাইতে পারেন।
ব্যবহারকারী সফলভাবে ক্যাপচা সমাধান করেছেন কিনা তা পরীক্ষা করতে ব্যবহারকারীর প্রতিক্রিয়া যাচাই করা দেখুন।
একটি বোতামে চ্যালেঞ্জটিকে স্বয়ংক্রিয়ভাবে আবদ্ধ করুন
আপনার পৃষ্ঠায় অদৃশ্য reCAPTCHA উইজেট ব্যবহার করার সবচেয়ে সহজ পদ্ধতি হল প্রয়োজনীয় JavaScript রিসোর্স অন্তর্ভুক্ত করা এবং আপনার html বোতামে কয়েকটি বৈশিষ্ট্য যুক্ত করা। প্রয়োজনীয় বৈশিষ্ট্যগুলি হল একটি ক্লাস নাম ' g-recaptcha
', data-sitekey
অ্যাট্রিবিউটে আপনার সাইট কী এবং data-callback
অ্যাট্রিবিউটে ক্যাপচা সম্পূর্ণ করার জন্য একটি জাভাস্ক্রিপ্ট কলব্যাকের নাম।
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
</head>
<body>
<form id="demo-form" action="?" method="POST">
<button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
<br/>
</form>
</body>
</html>
স্ক্রিপ্টটি HTTPS প্রোটোকল ব্যবহার করে লোড করা আবশ্যক এবং পৃষ্ঠার যেকোনো বিন্দু থেকে সীমাবদ্ধতা ছাড়াই অন্তর্ভুক্ত করা যেতে পারে।
প্রোগ্রাম্যাটিকভাবে চ্যালেঞ্জটিকে একটি বোতামে আবদ্ধ করুন বা চ্যালেঞ্জটি আহ্বান করুন।
আপনার অনলোড কলব্যাক ফাংশন নির্দিষ্ট করে এবং জাভাস্ক্রিপ্ট রিসোর্সে প্যারামিটার যোগ করে বাইন্ডিং ডিফার করা সম্ভব। এটি সাধারণ reCAPTCHA চ্যালেঞ্জের মতোই কাজ করে।
প্রোগ্রামগতভাবে চ্যালেঞ্জ আহ্বান করুন.
reCAPTCHA যাচাইকরণ প্রোগ্রামগতভাবে আহ্বান করা একটি div-এ একটি অ্যাট্রিবিউট data-size="invisible"
সহ চ্যালেঞ্জ রেন্ডার করে এবং প্রোগ্রাম্যাটিকভাবে execute কল করে অর্জন করা যেতে পারে।
data-size="invisible"
দিয়ে একটি ডিভ তৈরি করুন।<div class="g-recaptcha" data-sitekey="_your_site_key_" data-callback="onSubmit" data-size="invisible"> </div>
একটি জাভাস্ক্রিপ্ট পদ্ধতি থেকে grecaptcha.execute কল করুন।
grecaptcha.execute();
আপনার কলব্যাক কার্যকর হলে, আপনি JavaScript API থেকে
grecaptcha.render
পদ্ধতিতে কল করতে পারেন।
কনফিগারেশন
জাভাস্ক্রিপ্ট রিসোর্স (api.js) প্যারামিটার
প্যারামিটার | মান | বর্ণনা |
---|---|---|
onload | ঐচ্ছিক। সমস্ত নির্ভরতা লোড হয়ে গেলে আপনার কলব্যাক ফাংশনের নামটি চালানো হবে। | |
render | স্পষ্ট অনলোড | ঐচ্ছিক। উইজেটটি স্পষ্টভাবে রেন্ডার করা হবে কিনা। অনলোড করার জন্য ডিফল্ট, যা এটি খুঁজে পাওয়া প্রথম g-recaptcha ট্যাগে উইজেটটিকে রেন্ডার করবে। |
hl | ভাষা কোড দেখুন | ঐচ্ছিক। উইজেটকে একটি নির্দিষ্ট ভাষায় রেন্ডার করতে বাধ্য করে। অনির্দিষ্ট থাকলে ব্যবহারকারীর ভাষা স্বয়ংক্রিয়ভাবে সনাক্ত করে। |
g-recaptcha ট্যাগ বৈশিষ্ট্য এবং grecaptcha.render প্যারামিটার
g-recaptcha ট্যাগ বৈশিষ্ট্য | grecaptcha.render প্যারামিটার | মান | ডিফল্ট | বর্ণনা |
---|---|---|---|---|
data-sitekey | সাইটকী | আপনার সাইটকি. | ||
data-badge | ব্যাজ | নীচে ডান নীচে বাম ইনলাইন | নীচে ডানদিকে | ঐচ্ছিক। reCAPTCHA ব্যাজ পুনরায় স্থাপন করুন। 'ইনলাইন' আপনাকে এটিকে CSS এর সাথে অবস্থান করতে দেয়। |
data-size | আকার | অদৃশ্য | ঐচ্ছিক। একটি ডিভের সাথে আবদ্ধ একটি অদৃশ্য উইজেট তৈরি করতে ব্যবহৃত হয় এবং প্রোগ্রামগতভাবে কার্যকর করা হয়। | |
data-tabindex | tabindex | 0 | ঐচ্ছিক। চ্যালেঞ্জ এর tabindex. আপনার পৃষ্ঠার অন্যান্য উপাদান ট্যাবিনডেক্স ব্যবহার করলে, ব্যবহারকারীর নেভিগেশন সহজ করতে এটি সেট করা উচিত। | |
data-callback | কলব্যাক | ঐচ্ছিক। আপনার কলব্যাক ফাংশনের নাম, যখন ব্যবহারকারী একটি সফল প্রতিক্রিয়া জমা দেয় তখন কার্যকর করা হয়। g-recaptcha-response টোকেন আপনার কলব্যাকে পাঠানো হয়েছে। | ||
data-expired-callback | মেয়াদ শেষ-কলব্যাক | ঐচ্ছিক। আপনার কলব্যাক ফাংশনের নাম, যখন reCAPTCHA প্রতিক্রিয়ার মেয়াদ শেষ হয়ে যায় এবং ব্যবহারকারীকে পুনরায় যাচাই করতে হবে। | ||
data-error-callback | ত্রুটি-কলব্যাক | ঐচ্ছিক। আপনার কলব্যাক ফাংশনের নাম, যখন reCAPTCHA একটি ত্রুটির সম্মুখীন হয় (সাধারণত নেটওয়ার্ক সংযোগ) এবং সংযোগ পুনরুদ্ধার না হওয়া পর্যন্ত চালিয়ে যেতে পারে না। আপনি যদি এখানে একটি ফাংশন নির্দিষ্ট করেন, তাহলে ব্যবহারকারীকে জানানোর জন্য আপনি দায়ী যে তাদের পুনরায় চেষ্টা করা উচিত। | ||
বিচ্ছিন্ন | মিথ্যা | ঐচ্ছিক। প্লাগইন মালিকদের একটি পৃষ্ঠায় বিদ্যমান reCAPTCHA ইনস্টলেশনের সাথে হস্তক্ষেপ না করার জন্য। সত্য হলে, এই reCAPTCHA উদাহরণটি একটি পৃথক ID স্থানের অংশ হবে। |
জাভাস্ক্রিপ্ট API
পদ্ধতি | বর্ণনা |
---|---|
grecaptcha. render ( ধারক, পরামিতি, উত্তরাধিকারী ) | একটি reCAPTCHA উইজেট হিসাবে ধারকটিকে রেন্ডার করে এবং নতুন তৈরি করা উইজেটের ID প্রদান করে৷ ধারক reCAPTCHA উইজেট রেন্ডার করার জন্য HTML উপাদান। ধারক (স্ট্রিং) বা DOM উপাদান নিজেই আইডি নির্দিষ্ট করুন। পরামিতি কী = মান জোড়া হিসাবে প্যারামিটার ধারণকারী একটি বস্তু, উদাহরণস্বরূপ, {"sitekey": "your_site_key", "theme": "light"}। grecaptcha.render প্যারামিটার দেখুন । উত্তরাধিকারী সংশ্লিষ্ট প্যারামিটার নির্দিষ্ট না থাকলে উপাদানটিতে বিদ্যমান ডেটা-* বৈশিষ্ট্যগুলি ব্যবহার করুন। পরামিতিগুলি বৈশিষ্ট্যগুলির উপর অগ্রাধিকার পাবে। |
grecaptcha. execute ( opt_widget_id ) | প্রোগ্রাম্যাটিকভাবে reCAPTCHA চেক আহ্বান করুন। অদৃশ্য reCAPTCHA একটি বোতামের পরিবর্তে একটি div এ থাকলে ব্যবহার করা হয়।opt_widget_id ঐচ্ছিক উইজেট আইডি, অনির্দিষ্ট থাকলে তৈরি করা প্রথম উইজেটের ডিফল্ট। |
grecaptcha. reset ( opt_widget_id ) | reCAPTCHA উইজেট রিসেট করে।opt_widget_id ঐচ্ছিক উইজেট আইডি, অনির্দিষ্ট থাকলে তৈরি করা প্রথম উইজেটের ডিফল্ট। |
grecaptcha. getResponse ( opt_widget_id ) | reCAPTCHA উইজেটের জন্য প্রতিক্রিয়া পায়।opt_widget_id ঐচ্ছিক উইজেট আইডি, অনির্দিষ্ট থাকলে তৈরি করা প্রথম উইজেটের ডিফল্ট। |
উদাহরণ
অনলোড কলব্যাকের পরে স্পষ্ট রেন্ডারিং
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script>
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
grecaptcha.render('submit', {
'sitekey' : 'your_site_key',
'callback' : onSubmit
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<input id="submit" type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
ক্লায়েন্ট সাইড যাচাইকরণের পরে অদৃশ্য reCAPTCHA চ্যালেঞ্জ আহ্বান করা।
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('field').value);
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form>
Name: (required) <input id="field" name="field">
<div id="recaptcha" class="g-recaptcha"
data-sitekey="_your_site_key_"
data-callback="onSubmit"
data-size="invisible"></div>
<button id="submit">submit</button>
</form>
<script>onload();</script>
</body>
</html>