בדף הזה מוסבר איך להציג ולהתאים אישית את הווידג'ט של reCAPTCHA גרסה 2 בדף האינטרנט.
כדי להציג את הווידג'ט, אפשר:
בקטע הגדרות מוסבר איך להתאים אישית את הווידג'ט. לדוגמה, ייתכן שתרצו לציין את השפה או העיצוב של הווידג'ט.
כדי לבדוק אם המשתמש פתר את בעיית ה-CAPTCHA, ראו אימות תגובת המשתמש.
רינדור אוטומטי של הווידג'ט של 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
אפשר לדחות את העיבוד באמצעות ציון פונקציית הקריאה החוזרת של הטעינה ולהוסיף פרמטרים למשאב ה-JavaScript.
יש לציין את פונקציית הקריאה החוזרת
onload
. תתבצע קריאה לפונקציה הזו כאשר כל יחסי התלות נטענו.<script type="text/javascript"> var onloadCallback = function() { alert("grecaptcha is ready!"); }; </script>
מוסיפים את משאב ה-JavaScript, מגדירים את הפרמטר
onload
לשם של פונקציית הקריאה החוזרת onload והפרמטרrender
אלexplicit
.<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>
כשהקריאה החוזרת תתבצע, אפשר לקרוא ל-method
grecaptcha.render
מ-JavaScript API.
תצורה
פרמטרים של משאב JavaScript (api.js)
פרמטר | ערך | תיאור |
---|---|---|
onload | זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת שתופעל אחרי שכל יחסי התלות ייטענו. | |
לעבד | explicit onload |
זה שינוי אופציונלי. הגדרה שקובעת אם לעבד את הווידג'ט באופן מפורש. ברירת המחדל היא onload. הפעולה הזו תגרום לרינדור הווידג'ט בתג g-recaptcha הראשון שהוא מוצא. |
hl | לעיון בקודי שפה | זה שינוי אופציונלי. מאלץ את הווידג'ט לעבור רינדור בשפה מסוימת. זיהוי אוטומטי של שפת המשתמש אם לא צוין אחרת. |
מאפייני תג g-recaptcha ופרמטרים של grecaptcha.render
מאפיין תג g-recaptcha | הפרמטר grecaptcha.render | ערך | ברירת מחדל | תיאור |
---|---|---|---|---|
data-sitekey | מפתח אתר | מפתח האתר שלכם. | ||
data-theme | עיצוב | בהיר כהה | קל | זה שינוי אופציונלי. ערכת הצבעים של הווידג'ט. |
גודל נתונים | size | רגיל קומפקטי | רגילה | זה שינוי אופציונלי. גודל הווידג'ט. |
data-tabindex | אינדקס טאבים | 0 | זה שינוי אופציונלי. אינדקס הכרטיסיות של הווידג'ט והאתגר. אם רכיבים אחרים בדף משתמשים במאפיין tabindex, צריך להגדיר אותו כדי להקל על הניווט של המשתמשים. | |
data-callback | קריאה חוזרת (callback) | זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת, שמופעלת כשהמשתמש שולח תגובה מוצלחת. האסימון g-recaptcha-response מועבר לקריאה החוזרת (callback). |
||
data-expired-callback | expired-callback | זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת, שמופעלת כשפג תוקף התגובה ל-reCAPTCHA והמשתמש צריך לבצע אימות מחדש. | ||
data-error-callback | שגיאה בקריאה חוזרת | זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת, שמופעלת כש-reCAPTCHA נתקל בשגיאה (בדרך כלל קישוריות רשת) ולא יכול להמשיך עד שהקישוריות תתחדש. אם אתה מציין פונקציה כאן, באחריותך ליידע את המשתמש שעליו לנסות שוב. |
ממשק API של JavaScript
שיטה | תיאור |
---|---|
grecaptcha.render( מאגר,
פרמטרים
|
הפונקציה מציגה את הקונטיינר כווידג'ט של reCAPTCHA ומחזירה את המזהה של הווידג'ט החדש שנוצר. מאגר תגים רכיב ה-HTML לעיבוד הווידג'ט של reCAPTCHA. מציינים את המזהה של הקונטיינר (מחרוזת) או של רכיב ה-DOM עצמו. פרמטרים אובייקט שמכיל פרמטרים בתור צמדי מפתח=ערך, לדוגמה, {"sitekey": "your_site_key", "theme": "light"}. מידע נוסף על הפרמטרים grecaptcha.render |
grecaptcha.reset( opt_widget_id
)
|
איפוס הווידג'ט של reCAPTCHA. opt_widget_id מזהה ווידג'ט אופציונלי, ברירת המחדל היא הווידג'ט הראשון שנוצר אם לא צוין. |
grecaptcha.getResponse( opt_widget_id
)
|
קבלת התגובה לווידג'ט של reCAPTCHA. opt_widget_id מזהה ווידג'ט אופציונלי, ברירת המחדל היא הווידג'ט הראשון שנוצר אם לא צוין. |
דוגמאות
רינדור מפורש לאחר קריאה חוזרת (callback) של onload
<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>