בדף הזה מוסבר איך להתקין מפתח של תיבת סימון עם אתגר תיבת הסימון אני לא רובוט באתר. בהתאם לאופן שבו הגדרתם את אפשרות האבטחה של האתגר כשאתם יוצרים את מפתח תיבת הסימון, יכול להיות ש-reCAPTCHA ידרוש ממשתמש הקצה לפתור אתגר CAPTCHA לפני שייווצר טוקן חוקי.
לפני שמתחילים
-
אפשרות אחרת היא להעתיק את המזהה של מפתח תיבת סימון קיים. כדי לעשות זאת:
כדי להעתיק את המזהה של מפתח קיים ממסוףGoogle Cloud :
נכנסים לדף Google Cloud Fraud Defense.
- לוחצים על הכרטיסייה Keys.
- ברשימת מפתחות reCAPTCHA, מוצאים את המפתח שרוצים להעתיק ולוחצים על .
- כדי להעתיק את המזהה של מפתח קיים באמצעות API בארכיטקטורת REST, משתמשים ב-method projects.keys.list.
- כדי להעתיק את המזהה של מפתח קיים באמצעות ה-CLI של gcloud, משתמשים בפקודה gcloud recaptcha keys list.
עיבוד של הווידג'ט של reCAPTCHA בקצה הקדמי (frontend)
כדי להציג את הווידג'ט של 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>.
כאן מפורטות השפות הנתמכות.
הדוגמה הבאה היא קטע קוד לדוגמה:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/enterprise.js"></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.
כדי להציג את הווידג'ט באופן מפורש:
כדי לדחות את העיבוד של הווידג'ט, מבצעים את הפעולות הבאות:
צריך לציין את פונקציית הקריאה החוזרת
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לשם של פונקציית הקריאה החוזרת (callback) של onload, וכוללים אתrender=explicit.מערכת reCAPTCHA משתמשת בשפה של הדפדפן כברירת מחדל. אם רוצים לציין שפה אחרת, משתמשים במאפיין
hl=LANGבסקריפט. לדוגמה, כדי להשתמש בצרפתית, צריך לציין את הערך הבא:<script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. כאן מפורטות השפות הנתמכות.<script src="https://www.google.com/recaptcha/enterprise.js?onload=onload_Callback_function&render=explicit"> </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',
'action': 'LOGIN',
});
};
</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">
</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',
'action': 'action1',
'theme' : 'light'
});
widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
'sitekey' : 'KEY_ID',
'action': 'action2',
});
grecaptcha.enterprise.render('example3', {
'sitekey' : 'KEY_ID',
'action': 'action3',
'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">
</script>
</body>
</html>
המאמרים הבאים
- כדי להעריך את טוקן התגובה של reCAPTCHA, יוצרים הערכה.