בדף הזה מוסבר איך להתקין מפתח של תיבת סימון עם אתגר תיבת הסימון אני לא רובוט באתר. בהתאם לאופן שבו הגדרתם את אפשרות האבטחה של האתגר כשיוצרים את מפתח תיבת הסימון, יכול להיות ש-reCAPTCHA ידרוש ממשתמש הקצה לפתור אתגר CAPTCHA לפני יצירת טוקן תקין.
לפני שמתחילים
-
אפשר גם להעתיק את המזהה של מפתח תיבת סימון קיים באחת מהדרכים הבאות:
כדי להעתיק את המזהה של מפתח קיים ממסוףGoogle Cloud :
עוברים לדף reCAPTCHA.
- ברשימת מפתחות reCAPTCHA, מעבירים את מצביע העכבר מעל המפתח שרוצים להעתיק ולוחצים על .
- כדי להעתיק את המזהה של מפתח קיים באמצעות API בארכיטקטורת REST, משתמשים ב-method projects.keys.list.
- כדי להעתיק את המזהה של מפתח קיים באמצעות ה-CLI של gcloud, משתמשים בפקודה gcloud recaptcha keys list.
עיבוד הווידג'ט של reCAPTCHA בחלק הקדמי של האתר
כדי להציג את ווידג'ט ה-reCAPTCHA בדף האינטרנט, משתמשים באחת מהשיטות הבאות:
הצגת הווידג'ט באופן אוטומטי
באמצעות השיטה הזו, אפשר לעבד את הווידג'ט בכל אובייקט (כמו div או span) עם המחלקה g-recaptcha.
בדף האינטרנט, כוללים את משאב ה-JavaScript הנדרש ואת רכיב ה-HTML עם המחלקה g-recaptcha.
ברכיב עם המחלקה g-recaptcha, צריך לכלול גם את המאפיין data-sitekey ולהגדיר אותו כך שיהיה שווה למפתח של תיבת הסימון.
כדי לציין פעולה, כוללים את המאפיין data-action ומגדירים אותו לשם של פעולה. הוראות נוספות זמינות במאמר בנושא פעולות.
צריך לטעון את הסקריפט באמצעות פרוטוקול HTTPS, ואפשר לכלול אותו מכל נקודה בדף ללא הגבלה.
מערכת reCAPTCHA משתמשת בשפת הדפדפן כברירת מחדל. אם רוצים לציין שפה אחרת, משתמשים במאפיין hl=LANG בסקריפט.
לדוגמה, כדי להשתמש בצרפתית, מציינים את הערך הבא:
<script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>.
כאן מפורטות השפות הנתמכות ב-reCAPTCHA.
הדוגמה הבאה היא קטע של קוד לדוגמה:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="KEY_ID" data-action="LOGIN"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
הצגה מפורשת של הווידג'ט
בשיטה הזו, אפשר להציג את הווידג'ט באמצעות סקריפט JavaScript קיים באמצעות ה-method grecaptcha.enterprise.render().
כדאי להשתמש בשיטה הזו כדי להימנע מתנאי מירוץ או אם רוצים להציג את הווידג'ט על סמך הלוגיקה הקיימת של JavaScript.
כדי לוודא שלא מתרחשים מצבי מירוץ כשמציגים את הווידג'ט באופן מפורש, כדאי לעיין בשיקולים הבאים:
- ממקמים את פונקציית הקריאה החוזרת לפני reCAPTCHA API.
- משתמשים בפרמטרים
asyncו-deferבתגיscript.
כדי להציג את הווידג'ט באופן מפורש, פועלים לפי השלבים הבאים:
כדי לדחות את העיבוד של הווידג'ט:
מציינים את
onloadפונקציית הקריאה החוזרת לפני ש-reCAPTCHA API ויחסי תלות אחרים נטענים.<script type="text/javascript"> var onloadCallback = function() { alert("grecaptcha is ready!"); }; </script>אחרי שפונקציית הקריאה החוזרת מופעלת, מפעילים את method
grecaptcha.enterprise.render()עם הפרמטרים הבאים מתוך JavaScript API.container: רכיב ה-HTML שבו יוצג הווידג'ט של reCAPTCHA. מציינים את המזהה של מאגר התגים (מחרוזת) או את רכיב ה-DOM עצמו.
parameters: אובייקט שמכיל פרמטרים כצמדי מפתח/ערך, למשל, {"sitekey": "KEY_ID", "theme": "light"}.
action: מציינים את שם הפעולה שמשויך לרכיב המוגן.
grecaptcha.enterprise.render('html_element', { 'sitekey' : 'KEY_ID', 'action': 'LOGIN', });
כדי לעבד את הווידג'ט, מוסיפים את משאב JavaScript. מגדירים את
onloadלשם של פונקציית הקריאה החוזרת onload וכוללים אתrender=explicit.מערכת reCAPTCHA משתמשת בשפת הדפדפן כברירת מחדל. אם רוצים לציין שפה אחרת, משתמשים במאפיין
hl=LANGבסקריפט. לדוגמה, כדי להשתמש בצרפתית, מציינים את הערך הבא:<script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. כאן מפורטות השפות הנתמכות ב-reCAPTCHA.<script src="https://www.google.com/recaptcha/enterprise.js?onload=onload_Callback_function&render=explicit" async defer> </script>
דוגמה 1
בדוגמת הקוד הבאה אפשר לראות איך מתבצע רינדור מפורש אחרי קריאה חוזרת (callback) של onload:
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.enterprise.render('html_element', {
'sitekey' : 'KEY_ID',
});
};
</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/enterprise.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
דוגמה 2
בדוגמת הקוד הבאה מוצג רינדור מפורש של כמה ווידג'טים:
<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.enterprise.render('example1', {
'sitekey' : 'KEY_ID',
'theme' : 'light'
});
widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
'sitekey' : 'KEY_ID',
});
grecaptcha.enterprise.render('example3', {
'sitekey' : 'KEY_ID',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<form action="javascript:alert(grecaptcha.enterprise.getResponse(widgetId1));">
<div id="example1"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<form action="javascript:grecaptcha.enterprise.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/enterprise.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
המאמרים הבאים
- כדי להעריך את טוקן התגובה של reCAPTCHA, יוצרים הערכה.