התאמה אישית של המראה והתחושה של reCAPTCHA

חשוב: גרסה 1.0 של reCAPTCHA API לא נתמכת יותר, צריך לשדרג לגרסה 2.0. מידע נוסף

לאחר התקנת reCAPTCHA בהצלחה באתר שלך, כדאי לשנות את המראה שלו. בדף הזה מוסבר: (1) איך לבחור אחד מהעיצובים הרגילים של reCAPTCHA; (2) איך להתאים אישית באופן מלא את המראה של reCAPTCHA; ו-(3) איך לבצע התאמה אישית של reCAPTCHA על ידי שינוי השפה של הווידג'ט.

עיצובים רגילים

כדי לגרום לווידג'ט reCAPTCHA להציג עיצוב שונה, תחילה צריך להוסיף את הקוד הבא לדף ה-HTML הראשי במקום כלשהו לפני האלמנט <form> שבו מופיע reCAPTCHA (המצב הזה לא יעבוד אם הוא יוצב אחרי הסקריפט הראשי שבו מופעלת לראשונה reCAPTCHA):

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'theme_name'
 };
 </script>

כדי להשתמש בעיצוב רגיל, צריך להחליף את 'theme_name' באחד מארבעת השמות הבאים של עיצובים:

'אדום' (עיצוב ברירת המחדל)	'לבן'
'Blackglass' (זכוכית שחורה)	'נקי'

עיצוב בהתאמה אישית

עיצוב מותאם אישית מאפשר לך לקבוע בדיוק איך תמונת reCAPTCHA תופיע. (כאן אפשר לראות הדגמה של עיצובים בהתאמה אישית.) כדי להשתמש בנושאים מותאמים אישית, קודם צריך להגדיר את מאפיין העיצוב של RecaptchaOptions ל-'custom'. זה מורה ל-reCAPTCHA שהוא לא אמור ליצור ממשק משתמש משלו. reCAPTCHA יסתמך על הנוכחות של רכיבי HTML עם המזהים הבאים כדי להציג את ה-CAPTCHA למשתמש:

• div ריק עם המזהה recaptcha_image. כאן תוצב התמונה עצמה. ה-div יהיה בגודל 300x57 פיקסלים.
• קלט טקסט עם מזהה ושם מוגדר גם כ-recaptcha_response_field. כאן המשתמש יכול להזין את התשובה שלו.
• אפשר גם להוסיף div שמכיל את כל הווידג'ט של reCAPTCHA. צריך למקם את המזהה div בתוך ה-custom_theme_widget ואת הסגנון של ה-div צריך להגדיר כ-display:none. לאחר שקוד העיצוב של reCAPTCHA ייטען במלואו, הוא יהפוך את ה-div לגלוי. הרכיב הזה לא גורם לדף להבהב בזמן שהוא נטען.

כדי ליישם את כל זה, מקם תחילה את הקוד הבא בדף ה-HTML הראשי שלך במקום כלשהו לפני הרכיב <form> שבו מופיע reCAPTCHA:

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

לאחר מכן, בתוך האלמנט <form> שבו רוצים ש-reCAPTCHA יופיע, מציבים את:

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

שימו לב שהשורות האחרונות הן פשוט הדרך הרגילה להציג reCAPTCHA, כפי שמוסבר בקידום המדריך הזה.

זה מה שקורה בקוד שלמעלה. אובייקט ה-JavaScript של Recaptcha מספק שיטות שמאפשרות לשנות את המצב של ה-CAPTCHA. השיטה טעינה מחדש מציגה אתגר CAPTCHA חדש, והשיטה switch_type מחליפה בין סמלי CAPTCHA בתמונה ובאודיו. כדי ליצור ממשק משתמש מלא ל-reCAPTCHA, אנחנו מציגים מידע שונה כאשר ה-CAPTCHA מופיע במצבים שונים. לדוגמה, כאשר המשתמש מציג CAPTCHA בתמונה, מוצג הקישור "קבל CAPTCHA באודיו". תוכלו להשתמש בארבעה מחלקות CSS כדי ליצור ממשק משתמש עם הצהרת מדיניות:

רמת CSS	גלוי כאשר...
recaptcha_only_if_image	מוצג CAPTCHA בתמונה
recaptcha_only_if_audio	מוצג CAPTCHA קולי
recaptcha_only_if_incorrect_sol	הפתרון הקודם היה שגוי
recaptcha_only_if_no_incorrect_sol	הפתרון הקודם לא היה שגוי

בחירת הנושאים מציעה אפשרויות רבות, אך עליך לפעול על פי כמה כללי עקביות של ממשק המשתמש:

• עליך לציין שאתה משתמש ב-reCAPTCHA ליד הווידג'ט CAPTCHA.
• צריך לספק לחצן גלוי שקורא לפונקציית הטעינה מחדש.
• עליך לספק למשתמשים עם ליקויי ראייה דרך לגשת ל-CAPTCHA אודיו.
• עליך לספק טקסט חלופי לכל תמונה שמשמשת כלחצנים בווידג'ט reCAPTCHA.

הפיכה לבינלאומי: שינוי השפה של הווידג'ט

יש שתי דרכים להפיכת ווידג'ט reCAPTCHA לבינלאומי:

תרגומים מובנים

ב-reCAPTCHA יש כמה תרגומים מובנים. אפשר להשתמש בהם על ידי הגדרת הפרמטר lang של RecaptchaOptions:

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

תרגומים מותאמים אישית

אם אין תרגום לשפה שלכם, תוכלו ליצור תרגום משלכם. צריך לתרגם את כל המחרוזות בJavaScript של reCAPTCHA ולהגדיר את המשתנה "custom_translations" של RecaptchaOptions. מחרוזות שלא תגדירו יילקחו מתרגום ברירת המחדל לשפה שלכם. תוכלו להשתמש באפשרות הזו כדי לשנות רק חלק מתרגום ברירת המחדל (למשל, אם התרגום שבחרנו לא מתאים לאזור שלכם). לדוגמה:

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

הנה דוגמה פעילה לתרגום מותאם אישית באיטלקית (יש להוסיף את הקוד הזה לפני שמתקשרים ל-reCAPTCHA):

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

הפניה ל-RecaptchaOptions

ניתן להגדיר את השדות הבאים במילון Recaptcha:

מקש	ערכים אפשריים	ערך ברירת המחדל	משמעות
עיצוב	'אדום' | 'לבן' | 'זכוכית שחורה' | 'נקי' | 'custom'	'אדום'	הגדרת העיצוב לשימוש ב-reCAPTCHA. העיצובים האדומים, הלבנים, השחורים והנקיים הם עיצובים מוגדרים מראש, שבהם reCAPTCHA מספק את ממשק המשתמש. בעיצוב המותאם אישית, לאתר שלך יש שליטה מלאה על המראה של reCAPTCHA.
lang	כל קוד שפה נתמך.	' '	איזו שפה מוגדרת בממשק של העיצובים שהוגדרו מראש. יש תמיכה בשפות הבאות: Language קוד אנגלית en הולנדית nl צרפתית fr גרמנית de פורטוגזית pt רוסית ru ספרדית es טורקית tr אם שפת האתר לא נתמכת, תמיד אפשר להשתמש בנושאים מותאמים אישית כדי להוסיף reCAPTCHA לשפה שלכם.
custom_translations	מילון של תרגומים	null	ניתן להשתמש באפשרות הזו כדי לציין תרגומים מותאמים אישית של מחרוזות reCAPTCHA.
custom_theme_widget	מחרוזת עם המזהה של רכיב DOM	null	כשמשתמשים בעיצוב מותאם אישית, זהו רכיב div שמכיל את הווידג'ט. בקטע של עיצוב מותאם אישית מוסבר איך להשתמש בזה.
Tabindex	מספר שלם כלשהו	0	מגדיר tabindex לתיבת הטקסט של reCAPTCHA. אם רכיבים אחרים בטופס משתמשים ב-Tabindex, צריך להגדיר זאת כך שלמשתמש יהיה קל יותר לנווט

לדוגמה, תג הסקריפט הזה הופך את ה-reCAPTCHA לעיצוב לבן עם tabindex 2:

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>