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 문서

아래 트릭을 사용하여 반응 형으로 만들고 테두리를 제거합니다. 이 트릭은 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>

당신이 할 수있는 일은 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에 사용할 수있는 스타일링이 있습니다 .. 저는 다음과 같은 인라인 스타일링을 사용합니다.

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div> 

인라인 스타일링에서 작은 사용자 정의를 원하는 것은 무엇이든 ...

도움이 되길 바랍니다 !!

반응 형으로 만드는 해킹 솔루션을 추가하는 것뿐입니다.

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를 직접 제어 할 수 있습니다.

연락처 양식 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>

어둡 거나 밝은 ReCaptcha 테마 중에서 선택할 수도 있습니다 . Angular 8 앱 중 하나에서 이것을 사용했습니다.

나는 밝고 어두운 모드가있는 사이트에 대해 ReCaptcha v2를 스타일링하려고 시도하는이 답변을 보았습니다. 좀 더 놀았고 transform, 외에 , 요소 filter에도 적용되어 iframe기본 / 가벼운 ReCaptcha를 사용하고 사용자가 어두운 모드에있을 때이 작업을 수행 한다는 사실을 발견했습니다 .

.g-recaptcha {
    filter: invert(1) hue-rotate(180deg);
}

는 hue-rotate(180deg)그렇게 로고는 여전히 파란색과 흰색 유지하면서 사용자가이를 클릭하면 체크 표시가 여전히 녹색인지하게 invert()반대 검정과 그에게 '에드.

답변이나 댓글에서 이것을 보지 못 했으므로 이것이 오래된 스레드라도 공유하기로 결정했습니다.

웹 사이트에서 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의 스타일을 찾을 수도 있습니다.