Estilo da API ReCaptcha v2

110

Não tive muito sucesso em descobrir como estilizar o novo recaptcha do Google (v2). O objetivo final é torná-lo responsivo, mas estou tendo dificuldade em aplicar estilos até mesmo para coisas simples como largura.

A documentação da API deles não parece fornecer detalhes sobre como controlar o estilo, exceto o parâmetro do tema , e soluções simples de CSS e JavaScript não funcionaram para mim.

Basicamente, preciso ser capaz de aplicar CSS à nova versão do reCaptcha do Google. Usar JavaScript com ele é aceitável.

jhawes
fonte
Eu tenho o mesmo sucesso :(
Petroff
9
Ser capaz de aplicar CSS personalizado ao novo reCaptcha v2 do Google, lançado apenas em dezembro passado, e fazê-lo funcionar em todos os navegadores de desktop e móveis modernos (e no IE8, mesmo que seja um hack).
Alex Beardsley
2
@skobaljic Por favor, veja meu comentário acima. O objetivo desta questão é obter uma resposta para todos os desenvolvedores sobre como aplicar QUALQUER estilo, ponto final. Nada sobre a capacidade de resposta.
Alex Beardsley
4
Aqui está um violino mostrando o problema. jsfiddle.net/slicedtoad/GVwZ4/4 Basicamente, como o captcha está em um iframe de domínio cruzado, não pode ser estilizado com css ou js. E a referência da API não explica como fazer um tema personalizado. Independentemente da existência de uma solução hacky, ela provavelmente deve ser enviada para o rastreador de problemas.
DanielST
2
@AlexBeardsley Mas a política de origem única responsável por bloquear a edição de iframe é uma medida de segurança do navegador para proteger os usuários . É muito fácil desligar. E se você fosse um bot, você não estaria usando um navegador em primeiro lugar.
DanielST de

Respostas:

150

Visão geral:

Desculpe responder a más notícias, mas depois de pesquisar e depurar, fica bem claro que não há como personalizar o estilo dos novos controles do reCAPTCHA. Os controles são envolvidos em um iframe, o que impede o uso de CSS para estilizá-los, e a política de mesma origem impede que o JavaScript acesse o conteúdo, descartando até mesmo uma solução hacky.

Por que não personalizar API ?:

Ao contrário do reCAPTCHA API Versão 1.0 , não há opções de personalização na API Versão 2.0 . Se considerarmos como essa nova API funciona, não é nenhuma surpresa por quê.

Trecho de Você é um robô? Apresentando “No CAPTCHA reCAPTCHA” :

Embora a nova API reCAPTCHA possa parecer simples, há um alto grau de sofisticação por trás dessa modesta caixa de seleção. CAPTCHAs há muito confiam na incapacidade dos robôs de resolver textos distorcidos. No entanto, nossa pesquisa mostrou recentemente que a tecnologia de Inteligência Artificial de hoje pode resolver até mesmo a variante mais difícil de texto distorcido com precisão de 99,8%. Assim, o texto distorcido, por si só, não é mais um teste confiável.

Para contrariar isso, no ano passado desenvolvemos um back-end de Análise de Risco Avançada para reCAPTCHA que considera ativamente todo o envolvimento do usuário com o CAPTCHA - antes, durante e depois - para determinar se esse usuário é humano. Isso nos permite confiar menos na digitação de texto distorcido e, por sua vez, oferece uma experiência melhor para os usuários. Falamos sobre isso em nossa postagem do Dia dos Namorados no início deste ano.

Se você pudesse manipular diretamente o estilo dos elementos de controle, poderia facilmente interferir na lógica de criação de perfil do usuário que torna o novo reCAPTCHA possível.

E um tema personalizado ?:

Agora, a nova API oferece uma themeopção , pela qual você pode escolher um tema predefinido como lighte dark. No entanto, atualmente não há uma maneira de criar um tema personalizado. Se inspecionarmos o iframe, descobriremos que o themenome é passado na string de consulta do srcatributo. Este URL se parece com o seguinte.

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

Este parâmetro determina qual nome de classe CSS é usado no elemento wrapper no iframee determina o tema predefinido a ser usado.

nome da classe do elemento

Explorando a fonte minimizada, descobri que existem na verdade 4 valores de tema válidos, que são mais do que os 2 listados na documentação, mas defaulte standardsão os mesmos que light.

objeto de classes

Podemos ver o código que seleciona o nome da classe deste objeto aqui.

código de escolha de classe

Não há código para um tema personalizado e, se qualquer outro themevalor for especificado, ele usará o standardtema.

Em conclusão:

No momento, não há como estilizar totalmente os novos elementos reCAPTCHA, apenas os elementos de invólucro ao redor do iframepodem ser estilizados. Isso quase certamente foi feito intencionalmente, para evitar que os usuários quebrassem a lógica de criação de perfil do usuário que torna possível a nova caixa de seleção livre de captcha. É possível que o Google possa implementar uma API de tema personalizado limitada, talvez permitindo que você escolha cores personalizadas para os elementos existentes, mas não espero que o Google implemente um estilo CSS completo.

Alexander O'Mara
fonte
1
Isso confirma o que descobri Alexander ... foi minha frustração inicial com o novo reCAPTCHA, mas parece que não há uma maneira de contornar isso atualmente :(
jhawes
8
Deseja adicionar o link Como redimensionar o Google noCAPTCHA reCAPTCHA | The Geek Goddess , onde o autor compartilhou o truque para tornar o Captcha v2 responsivo.
Vikram Singh Saini,
seria bom ter pelo menos uma maneira de especificar a cor do fundo e do texto,
My1
1
Mais para temas. Você pode solicitar o tema no onCallback: <script type = "text / javascript"> var onloadCallback = function () {grecaptcha.render ('your_recaptcha_div_id', {'sitekey': 'your_site_key', theme: 'dark' <= ===========================}); }; </script>
ComeIn
52

Como vocês mencionaram acima, não existe caixa eletrônico. mas, ainda assim, se houver alguém interessado, ao adicionar apenas duas linhas você pode pelo menos fazer com que pareça razoável, se quebrar em qualquer tela. você pode atribuir valores diferentes na consulta @media.

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

Espero que isso ajude alguém :-).

bubb
fonte
Você pode ajustar a escala para o que for melhor para o seu layout específico. A propriedade transform-origin é adicionada porque quando você usa a propriedade transform, ela não altera o espaço real ocupado pelo elemento. Essa é apenas uma maneira básica de mostrar como você pode alterar rapidamente o tamanho do reCAPTCHA com estilos embutidos. Para algo mais legal, sugiro atribuir uma nova classe e deixá-la em tamanho real para qualquer coisa acima de móvel, então usar uma consulta de mídia para alterá-la para um tamanho menor. Ainda melhor seria usar um efeito de transição para que “diminua visualmente” quando você for para o dispositivo móvel.
Gray Ayer
3
Você também vai querer usar as regras específicas do navegador, pois os iphones 5 não reconhecem apenas "transformar" ao que parece: -ms-transform: escala (0,815); -webkit-transform: escala (0,815); -moz-transform: escala (0,815); -o-transformada: escala (0,815); transformar: escala (0,815); -ms-transform-origin: parte superior esquerda; -webkit-transform-origin: parte superior esquerda; -moz-transform-origin: parte superior esquerda; -o-transform-origin: topo esquerdo; origem da transformação: topo esquerdo;
Gray Ayer
8

Infelizmente não podemos estilizar o reCaptcha v2, mas é possível fazer com que pareça melhor, aqui está o código:

Clique aqui para visualizar

.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>
Tom Chan
fonte
Não se aplica ao iframe recaptcha substituto para usuários móveis com navegadores não JS.
andreszs
8

Adicione uma propriedade data-size ao elemento google recaptcha e torne-o igual a "compacto" no caso de celular.

Consulte: google recaptcha docs

Sumit Maingi
fonte
5

Eu uso o truque abaixo para torná-lo responsivo e remover bordas. esses truques podem esconder mensagem / erro de recaptcha.

Este estilo é para rtl lang, mas você pode alterá-lo facilmente.

.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 sem truque de estilo responsivo de captcha

Ahmad Dehnavi
fonte
4

O que você pode fazer é ocultar o controle ReCaptcha atrás de um div. Então faça seu estilo neste div. E defina o css "ponteiro-eventos: nenhum" nele, para que você possa clicar no div ( Clique em um DIV para os elementos subjacentes ).

A caixa de seleção deve estar em um local onde o usuário está clicando.

Magu
fonte
4

Você pode recriar o recaptcha, embrulhá-lo em um recipiente e apenas deixar a caixa de seleção visível. Meu principal problema era que eu não conseguia pegar a largura total, então agora ela se expande para a largura do contêiner. O único problema é a expiração, você pode ver um movimento, mas assim que acontece eu zero.

Veja esta demonstração http://codepen.io/alejandrolechuga/pen/YpmOJX

insira a descrição da imagem aqui

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>

Alejandro
fonte
3
Seu link está quebrado
NaveenDA
Aparentemente, a Codepen o removeu sem meu consentimento. Não tenho certeza se isso pode infringir uma política do Codepen / Google.
alejandro
3

Ótimo! Agora, aqui está o estilo disponível para reCaptcha .. Eu apenas uso o estilo embutido como:

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

tudo o que você deseja fazer pequenas personalizações em estilo embutido ...

Espero que ajude você !!

Anileweb
fonte
2

Basta adicionar uma solução hack-ish para torná-la responsiva.

Envolva a recaptcha em um div extra:

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

Adicione estilos. Isso assume o tema escuro.

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

Isso resulta no seguinte:

Recaptcha

Agora ele será redimensionado horizontalmente e não tem uma borda. O logotipo da recaptcha seria cortado à direita, então estou escondendo com uma borda à direita. Ele também está ocultando os links de privacidade e termos, então você pode querer adicioná-los novamente.

Tentei definir uma altura no elemento de invólucro e, em seguida, centralizar verticalmente o recaptcha para reduzir a altura. Infelizmente, qualquer combinação de estouro: oculto e uma altura menor parece matar o iframe.

kthornbloom
fonte
acabei de experimentar o seu estilo, não parece funcionar para mim. -> jsfiddle.net/GVwZ4/31
My1
2

na V2.0 não é possível. O iframe bloqueia todo o estilo disso. É difícil adicionar um tema personalizado em vez de escuro ou claro.

Yacine
fonte
2

Com a integração do reCAPTCHA invisível, você pode fazer o seguinte:

Para ativar o reCAPTCHA invisível, em vez de colocar os parâmetros em um div, você pode adicioná-los diretamente a um botão html.

uma. data-callback = ””. Isso funciona exatamente como a caixa de seleção captcha, mas é necessário para invisível.

b. crachá de dados: permite reposicionar o crachá reCAPTCHA (ou seja, logotipo e texto 'protegido por reCAPTCHA'). Opções válidas como 'bottomright' (o padrão), 'bottomleft' ou 'inline' que colocarão o emblema diretamente acima do botão. Se você deixar o emblema embutido, poderá controlar o CSS do emblema diretamente.

Sebastian Hagens
fonte
1
Ao fazer o emblema embutido, como controlar diretamente o CSS do emblema?
Jianxin Gao
2

No caso de alguém ter dificuldades com o recaptcha do formulário de contato 7 (wordpress) aqui está uma solução funcionando para mim

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

insira a descrição da imagem aqui

Ouahib Abdallah
fonte
1

Atrasado para a festa, mas talvez minha solução ajude alguém.

Não encontrei nenhuma solução que funcione em um site responsivo quando a janela de visualização muda ou o layout é fluido.

Portanto, criei um script jQuery para django-cms que se adapta dinamicamente a uma janela de visualização em mudança. Vou atualizar esta resposta assim que tiver a necessidade de uma variante moderna dela que seja mais modular e não tenha dependência de 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;
nirazul
fonte
0

Se alguém ainda estiver interessado, existe uma biblioteca javascript simples (sem dependência jQuery), chamada recaptcha personalizada. Ele permite que você personalize o botão com css e implemente alguns eventos js (prontos / marcados). A ideia é tornar o recaptcha padrão "invisível" e colocar um botão sobre ele. Basta alterar o id do recaptcha e pronto.

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

Consulte https://azentreprise.org/read.php?id=1 para obter mais informações.

TheDreamer979
fonte
0

Estou apenas adicionando este tipo de solução / correção rápida para que não se perca no caso de um link quebrado.

Link para esta solução "Deseja adicionar um link Como redimensionar o Google noCAPTCHA reCAPTCHA | A Deusa Geek"  foi fornecido por Vikram Singh Saini e simplesmente descreve que você pode usar CSS embutido para reforçar o enquadramento do 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>
leopold
fonte
0

Você também pode escolher entre um tema ReCaptcha escuro ou claro . Eu usei isso em um dos meus 8 aplicativos Angular

inverno
fonte
0

Me deparei com esta resposta tentando estilizar o ReCaptcha v2 para um site que tem um modo claro e escuro. Brinquei mais um pouco e descobri que transform, além disso , filtertambém é aplicado aos iframeelementos então acabamos usando o ReCaptcha padrão / claro e fazendo isso quando o usuário está no modo escuro:

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

O hue-rotate(180deg)faz com que o logotipo ainda é azul ea marca de seleção ainda é verde quando o usuário clica nele, mantendo branco invert()ed' a preto e vice-versa.

Não vi isso em nenhuma resposta ou comentário, então decidi compartilhar, mesmo que seja um tópico antigo.

Asontu
fonte
-1

Você pode usar CSS para o estilo do Google reCAPTCHA v2 em seu site:

- Alterar plano de fundo e cor do widget Google reCAPTCHA v2:

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

ou

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

- Redimensione o widget Google reCAPTCHA v2 usando este snippet:

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

- Responsivo seu Google reCAPTCHA v2:

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

Todos os elementos, propriedade do CSS acima, é apenas para sua referência. Você pode alterá-los por conta própria (apenas usando o seletor de classe CSS).

Consulte o blog OIW - Como editar CSS do Google reCAPTCHA ( redefinir o estilo, alterar posição, redimensionar selo reCAPTCHA)

Você também pode encontrar o estilo do Google reCAPTCHA v3 lá.

OIW
fonte
CSS tem como escopo apenas o mesmo documento. Um iframe é um documento inteiro em seu próprio direito e, portanto, uma regra CSS que se aplica à página que contém esse iframe não pode se aplicar à página que está dentro desse iframe.
Sandes