Google'ın yeni recaptcha'sını (v2) nasıl şekillendireceğimi bulmakta pek başarılı olamadım. Nihai hedef, onu duyarlı hale getirmektir, ancak genişlik gibi basit şeyler için bile stil uygulamakta zorluk çekiyorum.

Onların API belgeleri dışında diğer tüm en stil nasıl kontrol edileceği üzerinde herhangi Ayrıntılara görünmüyor tema parametresi, ve basit bir CSS ve JavaScript çözümleri benim için çalışmadım.

Temel olarak, Google'ın yeni reCaptcha sürümüne CSS uygulayabilmem gerekiyor. Onunla JavaScript kullanmak kabul edilebilir.

Genel bakış:

Kötü haberlere yanıt verdiğim için üzgünüz, ancak araştırma ve hata ayıklamadan sonra, yeni reCAPTCHA kontrollerinin stilini özelleştirmenin bir yolu olmadığı oldukça açık. Kontroller, iframeCSS'nin onları biçimlendirmek için kullanılmasını engelleyen bir içine sarılmıştır ve Same-Origin Politikası, JavaScript'in içeriğe erişmesini engelleyerek hacky bir çözümü bile devre dışı bırakır.

API'yi Özelleştirme Neden Yok ?:

ReCAPTCHA API Sürüm 1.0'ın aksine , API Sürüm 2.0'da özelleştirme seçeneği yoktur . Bu yeni API'nin nasıl çalıştığını düşünürsek, neden olması şaşırtıcı değil.

Şuradan alıntı Bir robot musunuz? "No CAPTCHA reCAPTCHA" ile tanışın :

Yeni reCAPTCHA API kulağa basit gelse de, bu mütevazı onay kutusunun arkasında yüksek derecede karmaşıklık vardır. CAPTCHA'lar uzun süredir robotların bozuk metinleri çözmedeki yetersizliğine güveniyor. Ancak son zamanlarda yaptığımız araştırmalar, günümüzün Yapay Zeka teknolojisinin en zor bozuk metin çeşidini bile% 99,8 doğrulukla çözebileceğini gösterdi. Böylelikle bozuk metin tek başına güvenilir bir test olmaktan çıktı.

Buna karşı koymak için, geçen yıl reCAPTCHA için, bir kullanıcının bir insan olup olmadığını belirlemek için kullanıcının CAPTCHA ile olan tüm etkileşimini aktif olarak değerlendiren bir Gelişmiş Risk Analizi arka ucu geliştirdik. Bu, bozuk metin yazmaya daha az güvenmemize ve dolayısıyla kullanıcılara daha iyi bir deneyim sunmamıza olanak tanır. Bu yılın başlarında Sevgililer Günü yazımızda bundan bahsettik.

Kontrol öğelerinin stilini doğrudan değiştirebildiyseniz, yeni reCAPTCHA'yı mümkün kılan kullanıcı profili oluşturma mantığına kolayca müdahale edebilirsiniz.

Özel Tema Ne Olur ?:

Artık yeni API ,themelight ve gibi önceden belirlenmiş bir tema seçebileceğiniz bir seçenek sunuyordark . Ancak şu anda özel bir tema oluşturmanın bir yolu yoktur. Eğer incelersek, ismin özelliğin sorgu dizesinde geçtiğini iframebulacağız . Bu URL aşağıdaki gibi bir şeye benziyor.themesrc

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...

Bu parametre, içindeki sarmalayıcı öğesinde hangi CSS sınıf adının kullanılacağını iframebelirler ve kullanılacak önceden ayarlanmış temayı belirler.

Minified kaynak üzerinden Kazı, orada belgelerinde belirtilen 2'den fazla olduğu aslında 4 geçerli tema değerleridir, fakat bulundu defaultve standardaynıdır light.

Bu nesneden sınıf adını seçen kodu burada görebiliriz.

Özel bir tema için kod yoktur ve başka bir themedeğer belirtilirse, standardtemayı kullanır .

Sonuç olarak:

Şu anda, yeni reCAPTCHA öğelerini tam iframeolarak biçimlendirmenin bir yolu yoktur, yalnızca etrafındaki sarmalayıcı öğeler stilize edilebilir. Bu, kullanıcıların yeni captcha içermeyen onay kutusunu mümkün kılan kullanıcı profili oluşturma mantığını kırmalarını önlemek için neredeyse kesinlikle kasıtlı olarak yapıldı. Google'ın sınırlı bir özel tema API'si uygulayabilmesi mümkündür, belki de mevcut öğeler için özel renkler seçmenize izin verir, ancak Google'ın tam CSS stilini uygulamasını beklemem.

Yukarıda bahsettiğimiz gibi, ATM imkânı yoktur. ama yine de ilgilenen biri varsa, sadece iki satır ekleyerek en azından herhangi bir ekranda kırılırsa makul görünmesini sağlayabilirsiniz. @media sorgusuna farklı bir değer atayabilirsiniz.

<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>

Umarım bu herkese yardımcı olur :-).

Maalesef reCaptcha v2'yi biçimlendiremiyoruz, ancak daha iyi görünmesi mümkün, işte kod:

Önizlemek için burayı tıklayın

.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 öğesine bir veri boyutu özelliği ekleyin ve mobil olması durumunda bunu "kompakt" değerine eşit hale getirin.

Bakın: google recaptcha docs

Duyarlı hale getirmek ve sınırları kaldırmak için aşağıdaki numarayı kullanıyorum. bu hileler recaptcha mesajını / hatasını gizleyebilir.

Bu stil rtl lang içindir, ancak bunu kolayca değiştirebilirsiniz.

.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>

Yapabileceğiniz şey, ReCaptcha Kontrolünü bir div arkasına saklamaktır. Ardından stilinizi bu div üzerinde yapın. Ve üzerinde css "işaretçi olayları: yok" ayarını yapın, böylece div'i tıklayabilirsiniz ( Bir DIV üzerinden alttaki öğelere tıklayın ).

Onay kutusu, kullanıcının tıkladığı yerde olmalıdır.

Recaptcha'yı yeniden oluşturabilir, bir kaba sarabilir ve yalnızca onay kutusunun görünmesine izin verebilirsiniz. Asıl sorunum, tüm genişliği alamadığım için şimdi konteyner genişliğine genişlemesiydi. Tek sorun, son kullanma tarihidir, bir fiske görebilirsiniz, ancak olur olmaz onu sıfırlarım.

Bu demoyu izleyin 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>

Harika! Şimdi burada reCaptcha için stil mevcut .. Sadece satır içi stil kullanıyorum:

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

Satır içi stillerde küçük özelleştirme yapmak istediğiniz ne olursa olsun ...

Umarım sana yardımcı olur !!

Duyarlı hale getirmek için bir hack-ish çözümü ekledik.

Recaptcha'yı ekstra bir div'e sarın:

<div class="recaptcha-wrap">                   
    <div id="g-recaptcha"></div>
</div>

Stiller ekleyin. Bu karanlık temayı varsayar.

// 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;
}

Bu, aşağıdakileri verir:

Şimdi yatay olarak yeniden boyutlandırılacak ve bir sınırı olmayacak. Recaptcha logosu sağda kesilirdi, bu yüzden onu bir sınır sağıyla saklıyorum. Ayrıca gizlilik ve şartlar bağlantılarını da gizlediği için bunları tekrar eklemek isteyebilirsiniz.

Sarıcı öğesinde bir yükseklik ayarlamaya çalıştım ve ardından yüksekliği azaltmak için recaptcha'yı dikey olarak ortaladım. Ne yazık ki, herhangi bir taşma kombinasyonu: gizli ve daha küçük bir yükseklik iframe'i öldürüyor gibi görünüyor.

V2.0'da bu mümkün değil. İframe bunun dışında tüm stilleri engeller. Koyu veya açık renk yerine özel bir tema eklemek zordur.

Görünmez reCAPTCHA'nın entegrasyonu ile şunları yapabilirsiniz:

Görünmez reCAPTCHA'yı etkinleştirmek için, parametreleri bir div içine koymak yerine, doğrudan bir html düğmesine ekleyebilirsiniz.

a. veri geri arama =”.” Bu, onay kutusu captcha gibi çalışır, ancak görünmez için gereklidir.

b. data-rozeti: Bu, reCAPTCHA rozetini yeniden konumlandırmanıza izin verir (yani logo ve 'reCAPTCHA ile korunan' metni). Rozeti doğrudan düğmenin üzerine yerleştirecek olan 'alt sağ' (varsayılan), 'alt sol' veya 'satır içi' olarak geçerli seçenekler. Rozeti satır içi yaparsanız, rozetin CSS'sini doğrudan kontrol edebilirsiniz.

İletişim formu 7'nin (wordpress) recaptcha ile mücadele etmesi durumunda, işte benim için çalışan bir çözüm

.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;
}

Partiye geç kaldım ama belki benim çözümüm birilerine yardımcı olur.

Görüntü alanı değiştiğinde veya düzen akıcı olduğunda duyarlı bir web sitesinde çalışan bir çözüm bulamadım.

Bu yüzden, django-cms için değişen bir görüntü alanına dinamik olarak adapte olan bir jQuery betiği oluşturdum. Daha modüler olan ve jQuery bağımlılığı olmayan modern bir varyantına ihtiyacım olur olmaz bu yanıtı güncelleyeceğim.

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;

Birisi hala ilgileniyorsa, özel recaptcha adında basit bir javascript kitaplığı (jQuery bağımlılığı yoktur) vardır. Düğmeyi css ile özelleştirmenizi ve bazı js olaylarını (hazır / işaretli) uygulamanızı sağlar. Buradaki fikir, varsayılan recaptcha'yı "görünmez" yapmak ve üzerine bir düğme koymaktır. Sadece recaptcha'nın kimliğini değiştirin ve hepsi bu.

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

Daha fazla bilgi için https://azentreprise.org/read.php?id=1 adresine bakın .

Bu tür bir çözüm / hızlı düzeltme ekliyorum, böylece kopuk bir bağlantı durumunda kaybolmayacak.

Bu çözüme bağlantı " Bağlantı eklemek istiyorum Google noCAPTCHA reCAPTCHA nasıl yeniden boyutlandırılır | Geek Tanrıça" Vikram Singh Saini  tarafından sağlanmıştır ve basitçe, iç çerçevenin çerçevesini uygulamak için satır içi CSS'yi kullanabileceğinizi özetlemektedir.

// 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>

Ayrıca koyu veya açık bir ReCaptcha teması arasında seçim yapabilirsiniz . Bunu Angular 8 Uygulamalarımdan birinde kullandım

ReCaptcha v2'yi açık ve koyu modu olan bir site için biçimlendirmeye çalışırken bu cevaba rastladım. Biraz daha etrafında oynanan ve yanında olduğunu keşfetti transform, filterayrıca uygulanır iframeböylece varsayılan / hafif ReCaptcha kullanarak ve kullanıcı karanlık modundayken bunu sona erdi elemanları:

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

Bu hue-rotate(180deg), logonun hala mavi olmasını ve kullanıcı tıkladığında onay işaretinin hala yeşil olmasını sağlarken, beyazı invert()siyaha doğru veya tam tersi şekilde yapar.

Bunu herhangi bir cevapta veya yorumda görmedim, bu yüzden eski bir konu olsa bile paylaşmaya karar verdim.

Web sitenizde Google reCAPTCHA v2 stili için biraz CSS kullanabilirsiniz :

- Google reCAPTCHA v2 widget'ının arka planını, rengini değiştirin:

.rc-anchor-light { 
background: #fff!important; 
color: #fff!important; }

veya

.rc-anchor-normal{
background: #000 !important; 
color: #000 !important; }

- Bu snippet'i kullanarak Google reCAPTCHA v2 widget'ını yeniden boyutlandırın:

.rc-anchor-light { 
transform:scale(0.9); 
-webkit-transform:scale(0.9); }

- Google reCAPTCHA v2'nize duyarlı:

@media only screen and (min-width: 768px) {
.rc-anchor-light { 
transform:scale(0.85); 
-webkit-transform:scale(0.85); } 
}

Yukarıdaki tüm öğeler, CSS'nin özelliği sadece referansınız içindir. Bunları kendiniz değiştirebilirsiniz (yalnızca CSS sınıf seçiciyi kullanarak).

OIW Blog'a bakın - Google reCAPTCHA'nın CSS'sini Düzenleme (Yeniden Stil verme, Konumu Değiştirme, reCAPTCHA Rozetini Yeniden Boyutlandırma)

Google reCAPTCHA v3'ün stilini de orada bulabilirsiniz.