Javascript 聚合物3.0 recaptcha谷歌

目前我使用的是polymer版本3.0，我试图实现recaptcha v2，但加载脚本时出现问题：

，polymer无法在shadow dom中加载脚本。我在这里找到了用于验证码的webcomponent:，但它只支持版本1和2.x的polymer。有没有办法在polymer 3.0中实现recaptcha（复选框）？

我发现的方法是在运行时创建必要的脚本标记，并将脚本附加到文档头或正文以显示recaptcha元素。在firstUpdated（）方法中执行此操作，请执行以下步骤：

1：为google recaptcha api创建脚本标记

 var script = document.createElement( 'script' );
script.src= 'https://www.google.com/recaptcha/api.js';
script.async = true; 
script.defer = true;

将脚本附加到文档头

document.head.appendChild（脚本）

创建div，以便在运行时也承载reCAPTCHA，并将其附加到主体，因为它不会显示在shadowRoot上

此时，recaptcha元素将显示在文档上。但唯一的问题是它的位置。所以这里的问题是如何将它显示到DOM上加载shdadowRoot的位置。解决这个问题的方法是在运行时获取shadowRoot的位置，并将一个style属性附加到我们刚刚创建的recaptcha div中，我们在其中将位置设置为absolute

position:absolute

，并根据shadowRoot所在的位置添加底部和左侧位置。它将如下所示：

let rBody =this.shadowRoot.querySelector("#rBody"); //element in the shadowRoot

let topPosition = rBody.getBoundingClientRect().top;
let leftPosition = rBody.getBoundingClientRect().left;

recaptcha.setAttribute('style','position:absolute;top:'+ topPosition+ 'px;'+ 'left:'+ leftPosition + 'px;');

recaptcha.setAttribute('data-callback','recaptchaCallback');
//script for callback
    let callBackScript =  document.createElement( 'script' );
    callBackScript.textContent = ' function recaptchaCallback(){var recapValue = document.createElement("p"); recapValue.setAttribute("id","recapValue"); recapValue.setAttribute("pass","r-true");document.body.appendChild(recapValue);console.log("Recaptcha callback passed");}';

    document.body.appendChild(callBackScript);

此时，recaptcha应相应地定位自己。希望您正在使用的表单没有动画，因为recaptcha将始终保持不变，但它可以工作

因此，另一个关键因素是了解recaptcha的验证是否成功。我们还必须为此进行另一次黑客攻击。我们还通过在运行时创建一个脚本标记来实现这一点，它的文本内容嵌入了一个函数，该函数将由google的数据回调属性调用。回调函数只有在成功时才被调用，这对我们来说已经足够好了。有关更多信息，请查看文档，它应该如下所示：

let rBody =this.shadowRoot.querySelector("#rBody"); //element in the shadowRoot

let topPosition = rBody.getBoundingClientRect().top;
let leftPosition = rBody.getBoundingClientRect().left;

recaptcha.setAttribute('style','position:absolute;top:'+ topPosition+ 'px;'+ 'left:'+ leftPosition + 'px;');

recaptcha.setAttribute('data-callback','recaptchaCallback');
//script for callback
    let callBackScript =  document.createElement( 'script' );
    callBackScript.textContent = ' function recaptchaCallback(){var recapValue = document.createElement("p"); recapValue.setAttribute("id","recapValue"); recapValue.setAttribute("pass","r-true");document.body.appendChild(recapValue);console.log("Recaptcha callback passed");}';

    document.body.appendChild(callBackScript);

回调函数I还创建了一个

p

元素，并设置了一个自定义属性，在该属性中，如果确实创建了元素，则意味着验证成功，您可以通过创建一个方法来确认所创建的元素是否在dom上，在本例中是

p

，方法是：

 let recaptchaValue = document.querySelector('#recapValue');
    if(recaptchaValue !=null){
      return recaptchaValue.getAttribute("pass");
    }else{
      return null; 
    }

---

希望这能帮到你。不幸的是，对于Polymer 3.0，我们不得不求助于这些攻击，因为我们的特定用例没有节点包。

我发现的攻击是在运行时创建必要的脚本标记，并将脚本附加到文档头或正文，以便显示reCAPTCHA元素。在firstUpdated（）方法中执行此操作，请执行以下步骤：

1：为google recaptcha api创建脚本标记

 var script = document.createElement( 'script' );
script.src= 'https://www.google.com/recaptcha/api.js';
script.async = true; 
script.defer = true;

将脚本附加到文档头

document.head.appendChild（脚本）

创建div，以便在运行时也承载reCAPTCHA，并将其附加到主体，因为它不会显示在shadowRoot上

此时，recaptcha元素将显示在文档上。但唯一的问题是它的位置。所以这里的问题是如何将它显示到DOM上加载shdadowRoot的位置。解决这个问题的方法是在运行时获取shadowRoot的位置，并将一个style属性附加到我们刚刚创建的recaptcha div中，我们在其中将位置设置为absolute

position:absolute

，并根据shadowRoot所在的位置添加底部和左侧位置。它将如下所示：

let rBody =this.shadowRoot.querySelector("#rBody"); //element in the shadowRoot

let topPosition = rBody.getBoundingClientRect().top;
let leftPosition = rBody.getBoundingClientRect().left;

recaptcha.setAttribute('style','position:absolute;top:'+ topPosition+ 'px;'+ 'left:'+ leftPosition + 'px;');

recaptcha.setAttribute('data-callback','recaptchaCallback');
//script for callback
    let callBackScript =  document.createElement( 'script' );
    callBackScript.textContent = ' function recaptchaCallback(){var recapValue = document.createElement("p"); recapValue.setAttribute("id","recapValue"); recapValue.setAttribute("pass","r-true");document.body.appendChild(recapValue);console.log("Recaptcha callback passed");}';

    document.body.appendChild(callBackScript);

此时，recaptcha应相应地定位自己。希望您正在使用的表单没有动画，因为recaptcha将始终保持不变，但它可以工作

因此，另一个关键因素是了解recaptcha的验证是否成功。我们还必须为此进行另一次黑客攻击。我们还通过在运行时创建一个脚本标记来实现这一点，它的文本内容嵌入了一个函数，该函数将由google的数据回调属性调用。回调函数只有在成功时才被调用，这对我们来说已经足够好了。有关更多信息，请查看文档，它应该如下所示：

let rBody =this.shadowRoot.querySelector("#rBody"); //element in the shadowRoot

let topPosition = rBody.getBoundingClientRect().top;
let leftPosition = rBody.getBoundingClientRect().left;

recaptcha.setAttribute('style','position:absolute;top:'+ topPosition+ 'px;'+ 'left:'+ leftPosition + 'px;');

recaptcha.setAttribute('data-callback','recaptchaCallback');
//script for callback
    let callBackScript =  document.createElement( 'script' );
    callBackScript.textContent = ' function recaptchaCallback(){var recapValue = document.createElement("p"); recapValue.setAttribute("id","recapValue"); recapValue.setAttribute("pass","r-true");document.body.appendChild(recapValue);console.log("Recaptcha callback passed");}';

    document.body.appendChild(callBackScript);

回调函数I还创建了一个

p

元素，并设置了一个自定义属性，在该属性中，如果确实创建了元素，则意味着验证成功，您可以通过创建一个方法来确认所创建的元素是否在dom上，在本例中是

p

，方法是：

 let recaptchaValue = document.querySelector('#recapValue');
    if(recaptchaValue !=null){
      return recaptchaValue.getAttribute("pass");
    }else{
      return null; 
    }

---

希望这能帮到你。不幸的是，对于Polymer 3.0，我们不得不求助于这些黑客，因为我们的特定用例没有节点包。

您好，您找到解决方案了吗？我也在想办法你好，你找到解决办法了吗？我也在试图弄明白这一点