reCAPTCHA의 디자인 맞춤설정

중요: reCAPTCHA API 버전 1.0은 더 이상 지원되지 않습니다. 버전 2.0으로 업그레이드하세요. 자세히 알아보기

사이트에 reCAPTCHA를 성공적으로 설치했다면 표시되는 방식을 변경해야 할 수 있습니다. 이 페이지 (1) 표준 reCAPTCHA 테마 중 하나를 선택하는 방법 (2) reCAPTCHA 모양을 완전히 맞춤설정하는 방법 (3) 위젯 언어를 변경하여 reCAPTCHA를 국제화하는 방법을 알아봅니다.

표준 테마

reCAPTCHA 위젯이 다른 테마를 표시하도록 하려면 먼저 <form> 앞의 HTML 페이지 요소( reCAPTCHA가 처음 호출되는 기본 스크립트 뒤에 배치)

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

표준 테마를 사용하려면 'theme_name'을 다음 네 가지 테마 중 하나로 바꿔야 합니다. 이름:

'빨간색' (기본 테마)	'white'
'검은색 글래스'	'깨끗한'

맞춤 테마 설정

맞춤 테마 설정을 사용하면 reCAPTCHA 이미지가 표시되는 방식을 정확하게 제어할 수 있습니다. (여기에서 맞춤 테마 설정의 데모를 확인해 보세요.) 사용하려면 맞춤 테마 설정을 사용하려면 먼저 RecaptchaOptions의 테마 속성을 'custom'으로 설정해야 합니다. 이 reCAPTCHA에 자체 사용자 인터페이스를 만들어서는 안 된다고 알립니다. reCAPTCHA는 사용자에게 보안문자를 표시하기 위한 다음 ID가 포함된 HTML 요소:

• ID가 recaptcha_image인 빈 div입니다. 여기에서 배치될 수 있습니다. div는 300x57픽셀이 됩니다.
• ID와 이름이 모두 설정된 텍스트 입력 recaptcha_response_field님에게 전송됩니다. 여기에서 사용자는 답변을 입력합니다.
• 필요한 경우 전체 reCAPTCHA가 포함된 div 위젯에 추가합니다. 이 ID 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를 표시하는 표준 방법일 뿐입니다. 참조하세요.

위의 코드에서 이루어지는 작업은 다음과 같습니다. reCAPTCHA JavaScript 객체는 보안문자의 상태를 변경합니다. reload 메서드는 새로운 보안문자 질문에 답변하고 switch_type은 이미지 보안문자와 오디오 보안문자를 전환합니다. reCAPTCHA의 전체 UI를 만들기 위해 보안문자가 다른 상태에 있을 때 다른 정보를 표시할 수 있습니다. 예를 들어 사용자가 이미지 보안문자, '오디오 보안문자 가져오기' 링크 표시됩니다. 네 가지 CSS 클래스를 사용하여 스테이트풀(Stateful) UI:

CSS 클래스	표시되는 경우
recaptcha_only_if_image	이미지 보안문자가 표시되고 있습니다.
recaptcha_only_if_audio	오디오 보안문자가 표시되고 있습니다.
recaptcha_only_if_incorrect_sol	이전 솔루션이 올바르지 않음
recaptcha_only_if_no_incorrect_sol	이전 솔루션은 잘못되지 않았음

테마 설정을 통해 많은 옵션을 제공하지만 몇 가지 사용자 인터페이스 일관성 규칙을 따라야 합니다.

• 보안문자 위젯 근처에 reCAPTCHA를 사용 중임을 명시해야 합니다.
• 새로고침 함수를 호출하는, 표시되는 버튼을 제공해야 합니다.
• 시각 장애가 있는 사용자가 오디오 보안문자에 액세스할 수 있는 방법을 제공해야 합니다.
• reCAPTCHA 위젯에서 버튼으로 사용하는 이미지의 대체 텍스트를 제공해야 합니다.

국제화: 위젯의 언어 변경

reCAPTCHA 위젯을 국제화하는 방법에는 두 가지가 있습니다.

기본 제공 번역

reCAPTCHA에는 여러 번역이 내장되어 있습니다. 매개변수의 lang 매개변수를 설정하여 RecaptchaOptions:

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

커스텀 번역

사용 중인 언어로 된 번역이 없는 경우 직접 빌드할 수 있습니다. 다음 문장의 모든 문자열을 번역해야 하는데 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 참조

RecaptchaOptions 사전에서 다음 필드를 설정할 수 있습니다.

키	가능한 값	기본값	의미
테마	'빨간색' | '흰색' | '검은색 글래스' | '깨끗한' | '맞춤'	'빨간색'	reCAPTCHA에 사용할 테마를 정의합니다. 빨간색, 흰색, 검은색 유리, 깔끔한 테마 reCAPTCHA가 사용자 인터페이스를 제공하는 사전 정의된 테마입니다. 맞춤 테마에서 사이트가 reCAPTCHA 표시에 대해 완전히 제어할 수 있습니다.
lang	지원되는 언어 코드.	'ko'	사전 정의된 있습니다. 지원되는 언어는 다음과 같습니다. 언어 코드 영어 en 네덜란드어 nl 프랑스어 fr 독일어 de 포르투갈어 pt 러시아어 ru 스페인어 es 터키어 tr 사이트의 언어가 지원되지 않는 경우 커스텀 테마 설정을 사용하여 reCAPTCHA를 있습니다.
custom_translations	번역 사전	null	reCAPTCHA 문자열의 맞춤 번역을 지정하는 데 사용합니다.
custom_theme_widget	DOM 요소의 ID가 포함된 문자열	null	맞춤 테마 설정을 사용하는 경우 이 요소는 위젯이 포함된 div 요소입니다. 이 기능을 사용하는 방법은 커스텀 테마 설정 섹션을 참고하세요.
tabindex	모든 정수	0	tabindex reCAPTCHA 텍스트 상자에 입력합니다. 양식의 다른 요소가 tabindex에서 사용자가 더 쉽게 탐색할 수 있도록 설정해야 합니다.

예를 들어 이 스크립트 태그는 reCAPTCHA가 흰색 테마와 tabindex 2를 갖도록 합니다.

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