ReCaptcha API v2 스타일링
Google의 새로운 recaptcha (v2)를 스타일링하는 방법을 찾는 데 많은 성공을 거두지 못했습니다. 궁극적 인 목표는 반응 형으로 만드는 것이지만 너비와 같은 단순한 것에도 스타일을 적용하는 데 어려움이 있습니다.
그들의 API 문서 는 테마 매개 변수 이외의 스타일을 제어하는 방법에 대한 세부 사항을 제공하지 않는 것으로 보이며 간단한 CSS 및 JavaScript 솔루션이 저에게 효과가 없었습니다.
기본적으로 Google의 새 버전의 reCaptcha에 CSS를 적용 할 수 있어야합니다. JavaScript를 함께 사용할 수 있습니다.
개요 :
안 좋은 소식에 답 해주셔서 죄송합니다. 조사와 디버깅 후에는 새로운 reCAPTCHA 컨트롤의 스타일을 사용자 지정할 수있는 방법이 없음이 분명합니다. 컨트롤은 iframeCSS를 사용하여 스타일을 지정하는 것을 방지 하는으로 래핑되어 있으며 Same-Origin Policy 는 JavaScript가 콘텐츠에 액세스하지 못하도록 차단하여 해키 솔루션조차 배제합니다.
API 사용자 지정이없는 이유 :
reCAPTCHA API 버전 1.0 과 달리 API 버전 2.0 에는 사용자 지정 옵션이 없습니다 . 이 새로운 API의 작동 방식을 고려해 보면 그 이유는 당연합니다.
당신은 로봇입니까? 에서 발췌 "No CAPTCHA reCAPTCHA"소개 :
새로운 reCAPTCHA API는 단순하게 들릴 수 있지만 그 겸손한 확인란 뒤에는 고도의 정교함이 있습니다. CAPTCHA는 오랫동안 로봇이 왜곡 된 텍스트를 해결할 수 없다는 데 의존해 왔습니다. 그러나 최근 연구에 따르면 오늘날의 인공 지능 기술은 99.8 %의 정확도로 가장 어려운 왜곡 된 텍스트 변형도 해결할 수 있습니다. 따라서 왜곡 된 텍스트 자체는 더 이상 신뢰할 수있는 테스트가 아닙니다.
이에 대응하기 위해 작년에 우리는 사용자가 인간인지 여부를 결정하기 위해 사용자의 CAPTCHA 사용 전, 도중, 이후 전체 참여를 적극적으로 고려하는 reCAPTCHA 용 고급 위험 분석 백엔드를 개발했습니다. 이를 통해 왜곡 된 텍스트 입력에 의존하지 않고 사용자에게 더 나은 경험을 제공 할 수 있습니다. 우리는 올해 초 발렌타인 데이 게시물에서 이에 대해 이야기했습니다.
컨트롤 요소의 스타일을 직접 조작 할 수 있다면 새로운 reCAPTCHA를 가능하게하는 사용자 프로파일 링 논리를 쉽게 방해 할 수 있습니다.
사용자 정의 테마는 어떻습니까? :
이제 새로운 API는 제공하지 theme옵션을 사용하면 같은 미리 설정된 테마를 선택할 수있는, light및 dark. 그러나 현재로서는 사용자 지정 테마를 만드는 방법이 없습니다. 를 검사 하면 속성 의 쿼리 문자열에 이름이 전달되었음을 iframe알 수 있습니다. 이 URL은 다음과 같습니다.themesrc
https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...
이 매개 변수는의 래퍼 요소에 사용되는 CSS 클래스 이름을 iframe결정하고 사용할 사전 설정 테마를 결정합니다.
축소 된 소스를 통해 파고, 나는이 문서에 나와있는 2보다 더 많은, 이는 실제로 4 개 유효한 테마 값이지만, 발견 default과 standard동일합니다 light.
여기에서이 객체에서 클래스 이름을 선택하는 코드를 볼 수 있습니다.
사용자 정의 테마에 대한 코드는 없으며 다른 theme값이 지정되면 standard테마 를 사용합니다 .
결론적으로:
현재 새 reCAPTCHA 요소의 스타일을 완전히 iframe지정할 수있는 방법은 없으며 주위의 래퍼 요소 만 스타일링 할 수 있습니다. 이것은 사용자가 새로운 보안 문자없는 체크 박스를 가능하게하는 사용자 프로파일 링 로직을 위반하는 것을 방지하기 위해 의도적으로 거의 확실하게 수행되었습니다. Google이 제한된 사용자 정의 테마 API를 구현하여 기존 요소에 대한 사용자 정의 색상을 선택할 수 있지만 Google이 전체 CSS 스타일을 구현할 것으로 기대하지는 않습니다.
위에서 언급했듯이 ATM은 없습니다. 그래도 관심이있는 사람이라면 두 줄만 추가하면 화면이 깨지면 적어도 합리적으로 보일 수 있습니다. @media 쿼리에서 다른 값을 할당 할 수 있습니다.
<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>
이것이 누구에게나 도움이되기를 바랍니다 :-).
안타깝게도 reCaptcha v2 스타일을 지정할 수 없지만 더보기 좋게 만들 수 있습니다. 여기에 코드가 있습니다.
.g-recaptcha-outer{
text-align: center;
border-radius: 2px;
background: #f9f9f9;
border-style: solid;
border-color: #37474f;
border-width: 1px;
border-bottom-width: 2px;
}
.g-recaptcha-inner{
width: 154px;
height: 82px;
overflow: hidden;
margin: 0 auto;
}
.g-recaptcha{
position:relative;
left: -2px;
top: -1px;
}
<div class="g-recaptcha-outer">
<div class="g-recaptcha-inner">
<div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
</div>
</div>
google recaptcha 요소에 data-size 속성을 추가하고 모바일의 경우 "compact"와 동일하게 만듭니다.
참조 : google recaptcha 문서
당신이 할 수있는 일은 div 뒤에 ReCaptcha 컨트롤을 숨기는 것입니다. 그런 다음이 div에서 스타일을 지정하십시오. 그리고 CSS "pointer-events : none"을 설정하여 div를 클릭 할 수 있습니다 ( DIV를 기본 요소로 클릭 ).
확인란은 사용자가 클릭하는 위치에 있어야합니다.
recaptcha를 다시 만들고 컨테이너에 포장하고 확인란 만 표시되도록 할 수 있습니다. 내 주요 문제는 전체 너비를 취할 수 없어서 이제 컨테이너 너비로 확장된다는 것입니다. 유일한 문제는 만료일입니다. 영화를 볼 수 있지만 즉시 재설정합니다.
이 데모 http://codepen.io/alejandrolechuga/pen/YpmOJX보기
function recaptchaReady () {
grecaptcha.render('myrecaptcha', {
'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj',
'expired-callback': function () {
grecaptcha.reset();
console.log('recatpcha');
}
});
}.recaptcha-wrapper {
height: 70px;
overflow: hidden;
background-color: #F9F9F9;
border-radius: 3px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
-webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
-moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
height: 70px;
position: relative;
margin-top: 17px;
border: 1px solid #d3d3d3;
color: #000;
}
.recaptcha-info {
background-size: 32px;
height: 32px;
margin: 0 13px 0 13px;
position: absolute;
right: 8px;
top: 9px;
width: 32px;
background-image: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
background-repeat: no-repeat;
}
.rc-anchor-logo-text {
color: #9b9b9b;
cursor: default;
font-family: Roboto,helvetica,arial,sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 10px;
margin-top: 5px;
text-align: center;
position: absolute;
right: 10px;
top: 37px;
}
.rc-anchor-checkbox-label {
font-family: Roboto,helvetica,arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 17px;
left: 50px;
top: 26px;
position: absolute;
color: black;
}
.rc-anchor .rc-anchor-normal .rc-anchor-light {
border: none;
}
.rc-anchor-pt {
color: #9b9b9b;
font-family: Roboto,helvetica,arial,sans-serif;
font-size: 8px;
font-weight: 400;
right: 10px;
top: 53px;
position: absolute;
a:link {
color: #9b9b9b;
text-decoration: none;
}
}
g-recaptcha {
// transform:scale(0.95);
// -webkit-transform:scale(0.95);
// transform-origin:0 0;
// -webkit-transform-origin:0 0;
}
.g-recaptcha {
width: 41px;
/* border: 1px solid red; */
height: 38px;
overflow: hidden;
float: left;
margin-top: 16px;
margin-left: 6px;
> div {
width: 46px;
height: 30px;
background-color: #F9F9F9;
overflow: hidden;
border: 1px solid red;
transform: translate3d(-8px, -19px, 0px);
}
div {
border: 0;
}
}<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script>
<div class="recaptcha-wrapper">
<div id="myrecaptcha" class="g-recaptcha"></div>
<div class="rc-anchor-checkbox-label">I'm not a Robot.</div>
<div class="recaptcha-info"></div>
<div class="rc-anchor-logo-text">reCAPTCHA</div>
<div class="rc-anchor-pt">
<a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a>
<span aria-hidden="true" role="presentation"> - </span>
<a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
</div>
</div>아래 트릭을 사용하여 반응 형으로 만들고 테두리를 제거합니다. 이 트릭은 recaptcha 메시지 / 오류를 숨길 수 있습니다.
이 스타일은 rtl lang 용이지만 쉽게 변경할 수 있습니다.
.g-recaptcha {
position: relative;
width: 100%;
background: #f9f9f9;
overflow: hidden;
}
.g-recaptcha > * {
float: right;
right: 0;
margin: -2px -2px -10px;/*remove borders*/
}
.g-recaptcha::after{
display: block;
content: "";
position: absolute;
left:0;
right:150px;
top: 0;
bottom:0;
background-color: #f9f9f9;
clear: both;
}
<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>
반응 형으로 만드는 해킹 솔루션을 추가하는 것뿐입니다.
recaptcha를 추가 div로 래핑합니다.
<div class="recaptcha-wrap">
<div id="g-recaptcha"></div>
</div>
스타일을 추가합니다. 이것은 어두운 테마를 가정합니다.
// Recaptcha
.recaptcha-wrap {
position: relative;
height: 76px;
padding:1px 0 0 1px;
background:#222;
> div {
position: absolute;
bottom: 2px;
right:2px;
font-size:10px;
color:#ccc;
}
}
// Hides top border
.recaptcha-wrap:after {
content:'';
display: block;
background-color: #222;
height: 2px;
width: 100%;
top: -1px;
left: 0px;
position: absolute;
}
// Hides left border
.recaptcha-wrap:before {
content:'';
display: block;
background-color: #222;
height: 100%;
width: 2px;
top: 0;
left: -1px;
position: absolute;
z-index: 1;
}
// Makes it responsive & hides cut-off elements
#g-recaptcha {
overflow: hidden;
height: 76px;
border-right: 60px solid #222222;
border-top: 1px solid #222222;
border-bottom: 1px solid #222;
position: relative;
box-sizing: border-box;
max-width: 294px;
}
결과는 다음과 같습니다.
이제 가로로 크기가 조정되고 테두리가 없습니다. recaptcha 로고가 오른쪽에서 잘려서 오른쪽 테두리로 숨기고 있습니다. 또한 개인 정보 및 약관 링크를 숨기므로 해당 링크를 다시 추가하는 것이 좋습니다.
래퍼 요소에 높이를 설정 한 다음 높이를 줄이기 위해 recaptcha를 수직으로 중앙에 배치하려고했습니다. 불행히도 overflow : hidden과 더 작은 높이의 조합은 iframe을 죽이는 것 같습니다.
V2.0에서는 불가능합니다. iframe은이 모든 스타일을 차단합니다. 어둡거나 밝은 테마 대신 사용자 지정 테마를 추가하는 것은 어렵습니다.
보이지 않는 reCAPTCHA의 통합으로 다음을 수행 할 수 있습니다.
Invisible reCAPTCHA를 활성화하려면 매개 변수를 div에 넣는 대신 html 버튼에 직접 추가 할 수 있습니다.
ㅏ. data-callback =””. 이것은 체크 박스 보안 문자처럼 작동하지만 보이지 않는 경우에 필요합니다.
비. data-badge : reCAPTCHA 배지 (예 : 로고 및 'reCAPTCHA에 의해 보호됨'텍스트)의 위치를 변경할 수 있습니다. 버튼 바로 위에 배지를 배치하는 'bottomright'(기본값), 'bottomleft'또는 'inline'과 같은 유효한 옵션입니다. 배지를 인라인으로 만들면 배지의 CSS를 직접 제어 할 수 있습니다.
큰! 이제 reCaptcha에 사용할 수있는 스타일링이 있습니다 .. 저는 다음과 같은 인라인 스타일링을 사용합니다.
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div>
인라인 스타일링에서 작은 사용자 정의를 원하는 것은 무엇이든 ...
도움이 되길 바랍니다 !!
연락처 양식 7 (wordpress)의 recaptcha로 어려움을 겪는 사람이 나를 위해 일하는 해결책이 있습니다.
.wpcf7-recaptcha{
clear: both;
float: left;
}
.wpcf7-recaptcha{
margin-right: 6px;
width: 206px;
height: 65px;
overflow: hidden;
border-right: 1px solid #D3D3D3;
}
.wpcf7-recaptcha iframe{
padding-bottom: 15px;
border-bottom: 1px solid #D3D3D3;
background: #F9F9F9;
border-left: 1px solid #d3d3d3;
}
파티에 늦었지만 내 솔루션이 누군가를 도울 것입니다.
뷰포트가 변경되거나 레이아웃이 유동적 일 때 반응 형 웹 사이트에서 작동하는 솔루션을 찾지 못했습니다.
그래서 변화하는 뷰포트에 동적으로 적응하는 django-cms 용 jQuery 스크립트를 만들었습니다. 더 모듈화되고 jQuery 종속성이없는 최신 변형이 필요한 즉시이 응답을 업데이트 할 것입니다.
HTML
<div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}>
</div>
CSS
.g-recaptcha { display: none; }
.g-recaptcha.g-recaptcha-initted {
display: block;
overflow: hidden;
}
.g-recaptcha.g-recaptcha-initted > * {
transform-origin: top left;
}
js
window.djangoReCaptcha = {
list: [],
setup: function() {
$('.g-recaptcha').each(function() {
var $container = $(this);
var config = $container.data();
djangoReCaptcha.init($container, config);
});
$(window).on('resize orientationchange', function() {
$(djangoReCaptcha.list).each(function(idx, el) {
djangoReCaptcha.resize.apply(null, el);
});
});
},
resize: function($container, captchaSize) {
scaleFactor = ($container.width() / captchaSize.w);
$container.find('> *').css({
transform: 'scale(' + scaleFactor + ')',
height: (captchaSize.h * scaleFactor) + 'px'
});
},
init: function($container, config) {
grecaptcha.render($container.get(0), config);
var captchaSize, scaleFactor;
var $iframe = $container.find('iframe').eq(0);
$iframe.on('load', function() {
$container.addClass('g-recaptcha-initted');
captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() };
djangoReCaptcha.resize($container, captchaSize);
djangoReCaptcha.list.push([$container, captchaSize]);
});
},
lateInit: function(config) {
var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late');
djangoReCaptcha.init($container, config);
}
};
window.djangoReCaptchaSetup = window.djangoReCaptcha.setup;
누군가가 여전히 관심이 있다면 custom recaptcha라는 이름의 간단한 자바 스크립트 라이브러리 (jQuery 종속성 없음)가 있습니다. CSS로 버튼을 사용자 정의하고 일부 js 이벤트 (준비 / 확인)를 구현할 수 있습니다. 아이디어는 기본 recaptcha를 "보이지 않게"만들고 그 위에 버튼을 놓는 것입니다. recaptcha의 ID를 변경하면됩니다.
<head>
<script src="https://azentreprise.org/download/custom-recaptcha.min.js"></script>
<style type="text/css">
#captcha {
float: left;
margin: 2%;
background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */
border-radius: 2px;
font-size: 1em;
color: #C0FFEE;
}
#captcha.success {
background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */
color: limegreen;
}
</style>
</head>
<body>
<div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div>
</body>
자세한 내용은 https://azentreprise.org/read.php?id=1 을 참조하십시오.
나는 이런 종류의 솔루션 / 빠른 수정을 추가하고 있으므로 링크가 끊어져도 손실되지 않습니다.
이 솔루션 에 대한 링크 "링크를 추가하고 싶습니다. Google noCAPTCHA reCAPTCHA의 크기를 조정하는 방법 | The Geek Goddess" 는 Vikram Singh Saini 에서 제공했으며 인라인 CSS를 사용하여 iframe 프레임을 적용 할 수 있음을 간단히 설명합니다.
// Scale the frame using inline CSS
<div class="g-recaptcha" data-theme="light"
data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
">
</div>
// Scale the images using a stylesheet
<style>
#rc-imageselect, .g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>
웹 사이트에서 Google reCAPTCHA v2 스타일에 CSS를 사용할 수 있습니다 .
– Google reCAPTCHA v2 위젯의 배경, 색상 변경 :
.rc-anchor-light {
background: #fff!important;
color: #fff!important; }
또는
.rc-anchor-normal{
background: #000 !important;
color: #000 !important; }
– 다음 스 니펫을 사용하여 Google reCAPTCHA v2 위젯의 크기를 조정하십시오.
.rc-anchor-light {
transform:scale(0.9);
-webkit-transform:scale(0.9); }
– Google reCAPTCHA v2에 응답 :
@media only screen and (min-width: 768px) {
.rc-anchor-light {
transform:scale(0.85);
-webkit-transform:scale(0.85); }
}
위의 모든 요소, CSS 속성은 참조 용입니다. 직접 변경할 수 있습니다 (CSS 클래스 선택기 만 사용).
OIW 블로그 -Google reCAPTCHA의 CSS 편집 방법 (스타일 변경, 위치 변경, reCAPTCHA 배지 크기 조정)을 참조하십시오.
거기에서 Google reCAPTCHA v3의 스타일을 찾을 수도 있습니다.
참고 URL : https://stackoverflow.com/questions/27713505/recaptcha-api-v2-styling
'IT박스' 카테고리의 다른 글
| GDB를 사용하여 실행중인 프로세스를 디버깅 할 수 있습니까? (0) | 2020.08.16 |
|---|---|
| 이미지가있는 WPF 버튼 (0) | 2020.08.16 |
| C / C ++ 구조체 대 클래스 (0) | 2020.08.15 |
| Django 대 모델 뷰 컨트롤러 (0) | 2020.08.15 |
| ng-app 지시문의 배치 (html vs body) (0) | 2020.08.15 |