এই পৃষ্ঠাটি ব্যাখ্যা করে কিভাবে আপনার ওয়েবপেজে reCAPTCHA v2 উইজেট প্রদর্শন এবং কাস্টমাইজ করতে হয়।
উইজেট প্রদর্শন করতে, আপনি যেটি করতে পারেন:
কিভাবে আপনার উইজেট কাস্টমাইজ করবেন তা শিখতে কনফিগারেশন দেখুন। উদাহরণস্বরূপ, আপনি উইজেটের জন্য ভাষা বা থিম নির্দিষ্ট করতে চাইতে পারেন।
ব্যবহারকারী সফলভাবে ক্যাপচা সমাধান করেছেন কিনা তা পরীক্ষা করতে ব্যবহারকারীর প্রতিক্রিয়া যাচাই করা দেখুন।
স্বয়ংক্রিয়ভাবে reCAPTCHA উইজেট রেন্ডার করুন
আপনার পৃষ্ঠায় reCAPTCHA উইজেট রেন্ডার করার সবচেয়ে সহজ পদ্ধতি হল প্রয়োজনীয় JavaScript রিসোর্স এবং একটি g-recaptcha
ট্যাগ অন্তর্ভুক্ত করা। g-recaptcha
ট্যাগ হল একটি DIV উপাদান যার নাম g-recaptcha
এবং data-sitekey
বৈশিষ্ট্যে আপনার সাইট কী:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
স্ক্রিপ্টটি HTTPS প্রোটোকল ব্যবহার করে লোড করা আবশ্যক এবং পৃষ্ঠার যেকোনো বিন্দু থেকে সীমাবদ্ধতা ছাড়াই অন্তর্ভুক্ত করা যেতে পারে।
স্পষ্টভাবে reCAPTCHA উইজেট রেন্ডার করুন
আপনার অনলোড কলব্যাক ফাংশন নির্দিষ্ট করে এবং জাভাস্ক্রিপ্ট রিসোর্সে পরামিতি যোগ করে রেন্ডার পিছিয়ে দেওয়া সম্ভব।
আপনার
onload
কলব্যাক ফাংশন নির্দিষ্ট করুন। সমস্ত নির্ভরতা লোড হয়ে গেলে এই ফাংশনটি কল করা হবে।<script type="text/javascript"> var onloadCallback = function() { alert("grecaptcha is ready!"); }; </script>
জাভাস্ক্রিপ্ট রিসোর্স সন্নিবেশ করান,
onload
প্যারামিটারটিকে আপনার অনলোড কলব্যাক ফাংশনের নামের সাথে এবংrender
প্যারামিটারটিকেexplicit
সেট করুন।<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>
আপনার কলব্যাক কার্যকর হলে, আপনি JavaScript API থেকে
grecaptcha.render
পদ্ধতিতে কল করতে পারেন।
কনফিগারেশন
জাভাস্ক্রিপ্ট রিসোর্স (api.js) প্যারামিটার
প্যারামিটার | মান | বর্ণনা |
---|---|---|
অনলোড | ঐচ্ছিক। সমস্ত নির্ভরতা লোড হয়ে গেলে আপনার কলব্যাক ফাংশনের নামটি চালানো হবে। | |
রেন্ডার | স্পষ্ট অনলোড | ঐচ্ছিক। উইজেটটি স্পষ্টভাবে রেন্ডার করা হবে কিনা। অনলোড করার জন্য ডিফল্ট, যা এটি খুঁজে পাওয়া প্রথম g-recaptcha ট্যাগে উইজেটটিকে রেন্ডার করবে। |
hl | ভাষা কোড দেখুন | ঐচ্ছিক। উইজেটকে একটি নির্দিষ্ট ভাষায় রেন্ডার করতে বাধ্য করে। অনির্দিষ্ট থাকলে ব্যবহারকারীর ভাষা স্বয়ংক্রিয়ভাবে সনাক্ত করে। |
g-recaptcha ট্যাগ বৈশিষ্ট্য এবং grecaptcha.render প্যারামিটার
g-recaptcha ট্যাগ বৈশিষ্ট্য | grecaptcha.render প্যারামিটার | মান | ডিফল্ট | বর্ণনা |
---|---|---|---|---|
ডেটা-সাইট কী | সাইটকী | আপনার সাইটকি. | ||
ডেটা-থিম | থিম | অন্ধকার আলো | আলো | ঐচ্ছিক। উইজেটের রঙের থিম। |
ডেটা-আকার | আকার | কমপ্যাক্ট স্বাভাবিক | স্বাভাবিক | ঐচ্ছিক। উইজেটের আকার। |
ডেটা-ট্যাবিন্ডেক্স | tabindex | 0 | ঐচ্ছিক। উইজেট এবং চ্যালেঞ্জ এর tabindex. আপনার পৃষ্ঠার অন্যান্য উপাদান ট্যাবিনডেক্স ব্যবহার করলে, ব্যবহারকারীর নেভিগেশন সহজ করতে এটি সেট করা উচিত। | |
ডেটা কলব্যাক | কলব্যাক | ঐচ্ছিক। আপনার কলব্যাক ফাংশনের নাম, যখন ব্যবহারকারী একটি সফল প্রতিক্রিয়া জমা দেয় তখন কার্যকর করা হয়। g-recaptcha-response টোকেন আপনার কলব্যাকে পাঠানো হয়েছে। | ||
ডেটা-মেয়াদ শেষ-কলব্যাক | মেয়াদ শেষ-কলব্যাক | ঐচ্ছিক। আপনার কলব্যাক ফাংশনের নাম, যখন reCAPTCHA প্রতিক্রিয়ার মেয়াদ শেষ হয়ে যায় এবং ব্যবহারকারীকে পুনরায় যাচাই করতে হবে। | ||
ডেটা-ত্রুটি-কলব্যাক | ত্রুটি-কলব্যাক | ঐচ্ছিক। আপনার কলব্যাক ফাংশনের নাম, যখন reCAPTCHA একটি ত্রুটির সম্মুখীন হয় (সাধারণত নেটওয়ার্ক সংযোগ) এবং সংযোগ পুনরুদ্ধার না হওয়া পর্যন্ত চালিয়ে যেতে পারে না। আপনি যদি এখানে একটি ফাংশন নির্দিষ্ট করেন, তাহলে ব্যবহারকারীকে জানানোর জন্য আপনি দায়ী যে তাদের পুনরায় চেষ্টা করা উচিত। |
জাভাস্ক্রিপ্ট API
পদ্ধতি | বর্ণনা |
---|---|
grecaptcha রেন্ডার ( ধারক, পরামিতি | একটি reCAPTCHA উইজেট হিসাবে ধারকটিকে রেন্ডার করে এবং নতুন তৈরি করা উইজেটের ID প্রদান করে৷ ধারক reCAPTCHA উইজেট রেন্ডার করার জন্য HTML উপাদান। ধারক (স্ট্রিং) বা DOM উপাদান নিজেই আইডি নির্দিষ্ট করুন। পরামিতি কী = মান জোড়া হিসাবে প্যারামিটার ধারণকারী একটি বস্তু, উদাহরণস্বরূপ, {"sitekey": "your_site_key", "theme": "light"}। grecaptcha.render প্যারামিটার দেখুন । |
grecaptcha পুনরায় সেট করুন ( opt_widget_id ) | reCAPTCHA উইজেট রিসেট করে। opt_widget_id ঐচ্ছিক উইজেট আইডি, অনির্দিষ্ট থাকলে তৈরি করা প্রথম উইজেটের ডিফল্ট। |
grecaptcha প্রতিক্রিয়া পান ( opt_widget_id ) | reCAPTCHA উইজেটের জন্য প্রতিক্রিয়া পায়। opt_widget_id ঐচ্ছিক উইজেট আইডি, অনির্দিষ্ট থাকলে তৈরি করা প্রথম উইজেটের ডিফল্ট। |
উদাহরণ
অনলোড কলব্যাকের পরে স্পষ্ট রেন্ডারিং
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key'
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
একাধিক উইজেটের জন্য স্পষ্ট রেন্ডারিং
<html>
<head>
<title>reCAPTCHA demo: Explicit render for multiple widgets</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
<div id="example1"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<form action="javascript:grecaptcha.reset(widgetId2);">
<div id="example2"></div>
<br>
<input type="submit" value="reset">
</form>
<br>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<form action="?" method="POST">
<div id="example3"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>