web-dev-qa-db-ja.com

目に見えないRecaptchaバッジの配置の問題

私は最近、Googleの新しい方法であるRecaptchaを使い始めました-彼らの新しいInvisible Recaptcha。このバージョンの実装は少し異なっていることに気づきました。これは、recaptcha属性を送信ボタンに直接アタッチしてから、Googleのrecaptcha apiを呼び出して検証プロセスを開始するためです。私はそのすべてをうまく機能させていますが、私が抱えている大きな問題の1つは、「Protected by recaptcha」バッジの配置にあります。

Reaptcha構成を送信ボタンに追加すると、画面の右側にバッジが表示され始めます。他のサイトによると、このバッジはホバーされるまで正方形のreaptchaロゴであると想定されており、次にスライドして最初にサイトに表示される大きな長方形になると想定されています。

これは、非表示のrecaptchaを実装した後に私のサイトに表示されているものの画像です。

recaptcha issue

recaptcha属性を含む送信ボタンのコードは次のとおりです

<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="key"
data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>

注：その他のdata-badgeオプション（inlineやbottomleftなど）を使用すると、同じ配置の問題が発生します。

ボタンを含むフォームのコード：

    <form action="processjoin.php" method="post" id="signupform" style="padding-top:10px;padding-bottom:10px;max-width:50%;">
        <h2 class="sr-only">Login Form</h2>
        <div></div>
        <div class="illustration"><i class="icon ion-ios-Pulse-strong"></i>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Your Name" class="form-control" id="name" />
                    </div>
                    <div class="form-group">
                        <input type="text" name="username" placeholder="Username" class="form-control" id="username" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="email" name="email" placeholder="Email" class="form-control" id="email" />
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" placeholder="Password" class="form-control" id="password" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block g-recaptcha" data-sitekey="6LfdMhkUAAAAAHl-LXZm_gPP1g-UX0aWt8sMR4uW" data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
            </div>
            <a href="#" class="forgot">
                <div></div>Already have an account? Sign in.</a>
        </div>
    </form>

このrecaptchaバッジで2つの問題が発生しています：

  1. バッジが境界ボックス/ボーダータイプのものの外側にグリッチが発生している
  2. また、本来のように、ホバーされるまで部分的に画面外に配置されません。何らかの形でマウスを操作する前に、完全な長方形が表示されています。カーソルを合わせるまで正方形のロゴが表示され、スライドして完全な長方形になります。

基本的に、私はこれを適切に配置する方法を理解する必要があります。そうすることで、想定されているようにオフスクリーンからスライドし、境界の内側に適切に含まれるようになります。

Google Chrome開発ツールは、これらがウィンドウが読み込まれたときに生成されるバッジdivの現在の属性であることを教えてくれます：

enter image description here

あなたが提供できるあらゆる助けに本当に感謝しています！バッジが必要であると誤解している場合は修正してください。CSSを使用して強制的に削除しますが、キャプチャの確認プロセスが混乱し、Googleのポリシーに違反する可能性があります。

recaptchavisual-glitchinvisible-recaptcha
10
pattyd

何度も試行錯誤を繰り返した結果、recaptchaバッジが本文ではなく、含まれている要素に配置されていること、およびそのline-heightが含まれている要素から継承されていることがわかりました。

直接、それを含む要素からバッジを削除して本文に移動することができなかったため、JQueryとCSSのわずかな変更で問題を解決しました。

JQuery：含まれている要素（フォーム）ではなく、本文にバッジを追加しました

これを行うには、バッジがサイトに完全に読み込まれていることを確認する必要がありました。グーグルはこれを難しくしますが、私は jQuery.initialize by timpler を使用してそれを行うことができました。

ページでinitialize.min.jsを実行したら、次のコードを使用しました。

jQuery(document).ready(function() {
    $('.grecaptcha-badge').appendTo("body"); //fix recaptcha positioning to body  
});
$.initialize(".grecaptcha-badge", function() {
    $(this).appendTo("body"); //fix recaptcha positioning to body, even if it loads after the page  
});

CSS：line-heightに変更を追加して、コンテナと一緒にバッジを適切に配置しました

.grecaptcha-badge {
  line-height:50px !important;
}

これは理解するのが難しいものでしたが、結局のところ、親からあまりにも多くの属性を継承しているバッジが原因でした。これが将来の誰かに役立つことを願っています！

6
pattyd

これは役立つかもしれません： https://developers.google.com/recaptcha/docs/invisible#config

data-badge="inline"を使用すると、CSSを制御できます。

6
DFSOKO

ページの任意の場所のdiv要素にキャプチャを追加できます

<div class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible">
</div>

フォームを送信するとき、次のjavascriptを呼び出してキャプチャ検証を開始する必要があります

grecaptcha.execute();

onSubmit関数（data-callbackタグ属性で指定）は、キャプチャの検証が成功すると呼び出されます。そこで、バックエンドの検証のために隠しフィールドとしてフォームに挿入できるrecaptchaトークンを取得します。

function onSubmit(recaptchaToken) {
    // inject token as hidden form field and submit form
}
0
Dmitry