web-dev-qa-db-ja.com

ReCaptcha API v2スタイリング

Googleの新しいレカプチャ（v2）をスタイルする方法を見つけるのにあまり成功していません。最終的な目標は、応答性を高めることですが、幅などの単純なものにもスタイリングを適用することは困難です。

APIドキュメント は、themeパラメーター以外の、スタイリングを制御する方法に関する詳細を提供するようには見えません。 CSSとJavaScriptのソリューションは役に立たなかった。

基本的に、CSSをGoogleの新しいバージョンのreCaptchaに適用できるようにする必要があります。 JavaScriptを使用してもかまいません。

javascriptcsscaptcharecaptcha
99
jhawes

概要：

悪いニュースの回答者であることは残念ですが、調査とデバッグの後、新しいreCAPTCHAコントロールのスタイルをカスタマイズする方法がないことは明らかです。コントロールはiframeでラップされており、CSSを使用してスタイルを設定できません。また、 Same-Origin Policy は、JavaScriptがコンテンツにアクセスできないようにし、ハッキングなソリューションも除外します。

APIをカスタマイズしない理由：

reCAPTCHA APIバージョン1. とは異なり、 APIバージョン2. にはカスタマイズオプションがありません。この新しいAPIがどのように機能するかを考えると、その理由は驚くことではありません。

ロボットですか？「CAPTCHA reCAPTCHAなし」の導入 からの抜粋：

新しいreCAPTCHA APIはシンプルに聞こえるかもしれませんが、その控えめなチェックボックスの背後には高度な洗練があります。 CAPTCHAは長い間、ロボットが歪んだテキストを解決できないことに依存してきました。しかし、最近の調査により、今日の人工知能技術は、歪みのあるテキストの最も難しいバリエーションでも99.8％の精度で解決できることが示されました。したがって、歪んだテキスト自体は、もはや信頼できるテストではありません。

これに対処するため、昨年、reCAPTCHAのAdvanced Risk Analysisバックエンドを開発しました。これは、ユーザーが人間であるかどうかを判断するために、CAPTCHAとのエンゲージメント全体を積極的に考慮します。これにより、歪んだテキストの入力に頼ることが少なくなり、ユーザーに優れたエクスペリエンスを提供できます。これについては、今年初めのバレンタインデーの投稿で説明しました。

コントロール要素のスタイリングを直接操作できた場合、新しいreCAPTCHAを可能にするユーザープロファイリングロジックを簡単に妨害できます。

カスタムテーマはどうですか？：

新しいAPI themeオプションが提供されます により、lightやdarkなどのプリセットテーマを選択できます。ただし、現在、カスタムテーマを作成する方法はありません。 iframeを調べると、themeの名前がsrc属性のクエリ文字列で渡されていることがわかります。このURLは次のようになります。

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

このパラメーターは、iframeのラッパー要素で使用されるCSSクラス名を決定し、使用するプリセットテーマを決定します。

element class name

縮小されたソースを掘り下げてみると、実際には4つの有効なテーマ値があり、ドキュメントにリストされている2つを超えていますが、defaultおよびstandardはlightと同じです。

object of classes

ここで、このオブジェクトからクラス名を選択するコードを見ることができます。

class choosing code

カスタムテーマ用のコードはありません。他のtheme値が指定されている場合、standardテーマが使用されます。

結論として：

現時点では、新しいreCAPTCHA要素を完全にスタイルする方法はありません。iframeの周りのラッパー要素のみを定型化できます。これは、ユーザーが新しいキャプチャのないチェックボックスを可能にするユーザープロファイリングロジックを破ることを防ぐために、ほぼ確実に意図的に行われました。 Googleが既存の要素のカスタムカラーを選択できるように、限られたカスタムテーマAPIを実装できる可能性はありますが、Googleが完全なCSSスタイルを実装することは期待していません。

139
Alexander O'Mara

上記のように、ATMはありません。それでも興味のある人がいれば、2行だけ追加することで、画面上で壊れた場合でも、少なくとも合理的に見えるようにすることができます。 @mediaクエリで異なる値を割り当てることができます。

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

これが誰にも役立つことを願っています:-)。

45
bubb

残念ながら、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>
9
Tom Chan

Google recaptcha要素にdata-sizeプロパティを追加し、モバイルの場合は「コンパクト」に等しくします。

参照： google recaptcha docs

8
Sumit Maingi

Recaptchaを再作成し、コンテナにラップして、チェックボックスのみを表示できます。私の主な問題は、全幅を取得できなかったため、コンテナの幅まで拡大することでした。唯一の問題は、フリックを見ることができる有効期限ですが、すぐにそれをリセットします。

このデモを見る http://codepen.io/alejandrolechuga/pen/YpmOJX

enter image description here

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

以下のトリックを使用して、応答性を高め、境界線を削除します。このトリックは多分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 no captcha reponsive style trick

4
Ahmad Dehnavi

できることは、ReCaptcha Controlをdivの後ろに隠すことです。次に、このdivでスタイリングを行います。 CSSに「ポインターイベント：なし」を設定して、divをクリックしてクリックできるようにします（ DIVをクリックして基本要素に移動 ）。

チェックボックスは、ユーザーがクリックする場所にある必要があります。

4
Magu

不可視のreCAPTCHAの統合により、次のことができます。

Indiv reCAPTCHAを有効にするには、パラメーターをdivに入れるのではなく、htmlボタンに直接追加します。

a。 data-callback =””。これはチェックボックスcaptchaと同じように機能しますが、非表示の場合は必須です。

b。データバッジ：これにより、reCAPTCHAバッジ（つまり、ロゴと「reCAPTCHAで保護された」テキスト）の位置を変更できます。有効なオプションは「bottomright」（デフォルト）、「bottomleft」または「inline」で、ボタンのすぐ上にバッジを配置します。バッジをインラインにすると、バッジのCSSを直接​​制御できます。

2
Sebastian Hagens

応答性を高めるためにハックのようなソリューションを追加するだけです。

追加のdivでrecaptchaをラップします。

<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を殺すようです。

2
kthornbloom

お問い合わせフォーム7（ワードプレス）のレプタチャに苦しんでいる人のためにここに私のために働いている解決策があります

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

enter image description here

2
Ouahib Abdallah

v2.0では不可能です。 iframeは、このすべてのスタイリングをブロックします。暗いテーマや明るいテーマの代わりにカスタムテーマを追加することは困難です。

2
Yacine

すばらしいです！ reCaptchaで使用できるスタイリングがここにあります。

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

インラインスタイリングで小さなカスタマイズを行いたい場合は...

それがあなたを助けることを願っています!!

2
Anileweb

パーティーに遅れましたが、多分私の解決策は誰かを助けるでしょう。

ビューポートが変更されたり、レイアウトが流動的な場合に、レスポンシブWebサイトで機能するソリューションは見つかりませんでした。

そこで、変化するビューポートに動的に適応する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;
1
nirazul

誰かがまだ興味がある場合は、カスタムrecaptchaという名前の単純なjavascriptライブラリ（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 を参照してください。

0
TheDreamer979

リンクが壊れても失われないように、この種のソリューション/クイックフィックスを追加しています。

このソリューションへのリンク 「リンクを追加したい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>
0
leopold

Webサイトで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のスタイリングもここで確認できます。

0
OIW