Error missing required parameters sitekey

I am loading Invisible reCAPTCHA dynamically for every form with button that has class g-recaptcha .

Problem that I have is that captcha is not loading correctly and I am not sure why. I followed documentation on captcha website and I am not sure how and why I got this error:

Uncaught Error: Missing required parameters: sitekey

Does someone knows where is the problem?

Here is code I use:

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&hl={{  app.request.locale|default(defaultLang) }}' async defer></script>

JS

var onloadCallback = function () {
    $("button.g-recaptcha").each(function () {
        var el = $(this);
        //SITE_KEY is actually hard coded string.
        //It is string that google provided. I just remove it for security reasons...
        grecaptcha.render($(el).attr("id"), {
            "sitekey": SITE_KEY,  
            "size": "invisible",
            "badge": "inline",
            "callback": function (token) {
                $(el).parent().find(".g-recaptcha-response").val(token);
                $(el).closest("form").submit();
            }
        }, true);
    });

    $("button.g-recaptcha").click(function(event) {
        event.preventDefault();
        grecaptcha.execute();
    });
};

EXAMPLE OF HTML:

<button 
    type="submit" 
    id="submitReviewButton"
    class="btn btn-lg btn-submit btn--green g-recaptcha"
 >
    {{ "review.submit_your_review"|trans }}
</button>

missing required parameters: sitekey #18

hi
I get this error

Uncaught Error: Missing required parameters: sitekey
at new zr (recaptcha__en.js:392)
at new es (recaptcha__en.js:400)
at ss (recaptcha__en.js:411)
at recaptcha__en.js:412
at Array.forEach ()
at ts (recaptcha__en.js:412)
at bs (recaptcha__en.js:417)
at cs (recaptcha__en.js:400)
at recaptcha__en.js:419
at recaptcha__en.js:429

but I entered sitekey and it works

The text was updated successfully, but these errors were encountered:

@mahyar33 Show me please your Reaptcha instance.

@mahyar33 Check if you’re adding recaptcha script manually. I had the same problem after switching from another library.
Removing

@cmwd That could be right! I’ll keep this issue and will do something to make this more intuitive and less missleading. Thanks!

FYI I just encountered this problem too on the latest version of Reaptcha and @cmwd’s fix worked

@warent I guess it’s because of the URL. I’m checking only for the presence of:

Lines 38 to 42 in 5d17fe2

Yep, you got it: https://www.google.com/recaptcha/api.js

@warent The issue has been fixed more comprehensively in reaptcha@1.4.2 . Thanks for knowing about this! 😄

@sarneeh Thanks for your work!

I will be grateful for any help with this: got recaptcha on every page in footer (made by another library, so i do have
Now, when I do it dynamically, only when user invokes a modal with another form, that uses another react captcha lib, and exactly in that moment I get in console «site key not provided».
UPD: Actually I have just tried to reproduce the error message and faced the same error from opposite side — now another lib says that site key is wrong, when your lib works.
UPD2: Yep now i can confirm — with prop inject= i get «Error: Missing required parameters: sitekey» when I add the recaptcha script tag. Without it i get «wrong site key» from another lib, when I open extra modal.

@fatclient If you’re using multiple recaptcha libs, how are you sure that Reaptcha is throwing the error? And are you sure that the sitekey is really being passed in (maybe it’s undefined or something)? I’m curious because Reaptcha checks almost every possible case to just work properly and I’m almost certain that it’s not the libs fault. Do you use multiple recaptcha libs on the same page, or on different ones (I mean, do they all work in parallel on some page, or separate?)

@fatclient If you’re using multiple recaptcha libs, how are you sure that Reaptcha is throwing the error?

Actually, now i’m not sure. The error started to occur when i added your lib, but it’s possible that it affects to another lib. But in any case, I see in devTools that both libs do have their sitekeys. Anyway, I’ll check that out.

And are you sure that the sitekey is really being passed in (maybe it’s undefined or something)?

I’m curious because Reaptcha checks almost every possible case to just work properly and I’m almost certain that it’s not the libs fault.

Yep, I’ve seen last updates commit and feel pretty curious why this may occur.

Do you use multiple recaptcha libs on the same page, or on different ones (I mean, do they all work in parallel on some page, or separate?)

Yep, in some situations it may happen that there’s two active recaptchas in the same time on the same page (main + open modal form).

Источник

Missing required parameters: sitekey #22

After adding recaptcha to my page I’m getting this error:

The text was updated successfully, but these errors were encountered:

Did you configure and restart your server?

Yes, placed this config into dev.exs, server restarted.

Btw, I created a fork, because I can’t install recaptcha into my Phoenix 1.3 application: denispeplin@d1208df

Could be this a source of the problem?

Test passed with this config.

Yes, it may be the cause. Could you send a PR with this change?

I still have same issue.

I found the source of the issue. I was using config from README:

And with config you’ve provided above the error disappeared.

May this issue be related to #21?

Ok, I will fix it right away.

@denispeplin just one question. Did you have RECAPTCHA_PRIVATE_KEY and RECAPTCHA_PUBLIC_KEY env variables?

It is working for me:

» RECAPTCHA_PRIVATE_KEY=some MIX_ENV=dev iex -S mix
Erlang/OTP 19 [erts-8.2.2] [source] [64-bit] [smp:4:4] [async-threads:10] [hipe] [kernel-poll:false] [dtrace]

Interactive Elixir (1.4.2) — press Ctrl+C to exit (type h() ENTER for help)
iex(1)> System.get_env(«RECAPTCHA_PRIVATE_KEY»)
«some»
iex(2)> Recaptcha.Config.get_env(:recaptcha, :secret)
«some»

Now I understand my mistake. I don’t have these env variables set. I’ve just put actual keys into <:system, «RECAPTCHA_PUBLIC_KEY»>, this is why library wasn’t working for me.
Maybe recaptcha should raise error in this case.

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Error: Missing required parameters: sitekey When Unit Testing #132

Summary

I’m submitting a:

• bug report
• feature request
• question / support request
• other

Description

I have some components which have the ng-recaptcha. And in some random test there is sometimes an error:
Error: Missing required parameters: sitekey

I guess I have to add a provider with the settings in my spec files?
The problem is that the error is not consistent, sometimes it pops up sometimes not.

• ng-recaptcha: 4.2.1
• Angular: 7.1
• Typescript ( tsc —version ): 3.1.6

The text was updated successfully, but these errors were encountered:

Put your RECAPTCHA_SETTINGS provider in your test file where you setup your testbed:

with the proper module imports (RecaptchaModule, RecaptchaFormsModule).

Did the suggestion by @MicMicMon resolve your issue? If it did not, I would ask you to provide more information on this issue:

• what kind of test is that? E.g. unit/e2e?
• what environment is the test running in? E.g. browser/node?

This error is not something that this lib generates — it’s reCAPTCHA itself who throws it, hence I’m assuming you’re running an end-to-end test in browser environment. If so, I’d recommend you to check out Google documentation section on automated testing with reCAPTCHA.

Please do let me know whether the above suggestion helped to resolve your issue, or if you resolved it yourself — how did you do it (so we can potentially update the library’s docs to encompass your usage scenario).

Источник

Защита PHP формы от спама с помощью invisible reCAPTCHA

Статья, в которой рассмотрим, как защитить форму обратной связи от спама с помощью invisible reCaptcha от Google.

Что собой представляет invisible reCAPTCHA от Google

invisible reCAPTCHA — это капча, которая позволяет осуществлять фоновую валидацию действий пользователей на сайте. В отличие от reCAPTCHA v2 (пример формы с reCAPTCHA 2) она не требует от пользователей того, чтобы они нажимали на флажок (checkbox) «Я не робот». Она вызывается напрямую, т.е. тогда когда пользователь нажимает на существующую кнопку на сайте или программно через вызов JavaScript API.

invisible reCAPTCHA позволяет совершать пользователям на сайте какие-либо действия сразу (без ввода капчи). По умолчанию только самые подозрительные действия пользователей не позволят им пройти дальше. В этом случае invisible reCAPTCHA предложит им решить капчу (т.е. определить действительно ли данную операцию совершает человек, а не робот).

Регистрация сайта и получение ключей

1. Открываем страницу www.google.com/recaptcha/admin (при необходимости выполняем регистрацию и авторизацию на сайте).

2. Заполняем страницу «Регистрация сайта»:

• вводим название ярлыка;
• в разделе «Тип reCAPTCHA» выбираем пункт «reCAPTCHA v2» и в открывшемся списке отмечаем «Невидимый значок reCAPTCHA»;
• добавляем домены, в данном случае «site.ru»;
• устанавливаем флажок «Примите Условия использования reCAPTCHA.»;
• нажимаем кнопку «Отправить».

3. После этого получаем публичный (для клиента) и секретный (для сервера) ключи.

Установка клиентских PHP библиотек

Так как серверная часть у нас будет на PHP, то установим клиентскую PHP библиотеку reCAPTCHA с использованием Composer. Для этого перейдем в корень сайта и введём следующую команду:

Кроме этого ещё установим PHPMailer:

Эту библиотеку будем использовать для отправки почты на электронный адрес через SMTP.

После этого у нас в корне сайта появится файл composer.json , содержащий все пакеты от которых зависит работа нашего сайта:

Если вы разрабатываете сайт на локальном компьютере, то на сервер не нужно переносить папку vendor . Необходимо лишь подключиться к серверу по протоколу SSH и в терминале набрать команду:

Эта команда установит все пакеты, перечисленные в composer.json .

Кроме этого в папке vendor у нас ещё генерируется файл autoload.php . Для того чтобы подключить к проекту эти библиотеки, достаточно подключить только этот файл:

Проверка отправки почты по SMTP

Перед тем как переходит к вставке в форму обратной связи невидимой reCAPTCHA, желательно сначала проверить корректность отправки почты по протоколу SMTP.

Для этого, например, в корень сайта достаточно положить php-файл с именем test_mail.php со следующим содержимым:

Здесь в нужных местах необходимо указать свои данные для отправки почты через используемый вами SMTP-сервер. В этом файле приведены настройки Yandex.

После этого этот файл нужно запустить, т.е. в адресной строке набрать соответствующий URL:

После того как вы полностью настроили PHPMailer для отправки писем и увидели, что сообщение было отправлено, можно переходить к следующему шагу.

Подключение reCAPCTHA к форме, работающей без AJAX

Самый простой способ подключить невидимую reCAPTCHA к форме — это привязывать её вызов к кнопке.

Итак, для этого нам необходимо на клиентской стороне:

• подключить скрипт Google reCAPTCHA API;
• добавить к кнопке для отправки формы класс g-recaptcha , и атрибуты data-sitekey и data-callback ; в качестве значения атрибута data-sitekey устанавливаем публичный ключ, а в data-callback – имя функции обратного вызова для обработки завершения проверки капчи;
• добавить функцию с именем, которое мы указали в атрибуте data-callback ; это функция будет запускаться при нажатии на эту кнопку.

На серверной стороне:

Полный код формы с invisible reCAPTCHA от Google расположен на GitHub: without-ajax.

Для простоты форма состоит из 2 полей: name и email . Оформление формы обратной связи выполнено посредством Bootstrap 5.

Сообщение об успешной отправке формы:

Сообщение, которое приходит на почту:

Защита от спама AJAX формы

Процесс встраивания invisible reCAPTCHA в AJAX форму обратной связи:

1. Добавить в HTML форму элемент div с атрибутами class=»g-recaptcha» , data-sitekey=»значение публичного ключа» , data-callback=»onSubmitReCaptcha» и data-size=»invisible» . onSubmitReCaptcha — это имя функции, которая будет вызвана после окончания успешной проверки пользователя. В данный элемент будет осуществляться рендеринг капчи invisible reCAPTCHA.
2. Подключить скрипт reCaptcha.
3. Вызвать проверку reCaptcha ( grecaptcha.execute() ) после успешной валидации HTML формы.
4. Добавить функцию обратного вызова onSubmitReCaptcha , которая будет запущена, если пользователь успешно прошёл капча тест. Код данной функции, содержит вызов другой функции, которая отправляет форму обратной связи на AJAX.

Посмотреть пример полного кода контактной формы можно на GitHub или посредством следующей ссылки (архив):

Пример HTML-формы с invisible reCAPTCHA, отображаемой во всплывающем окне:

Несколько invisible reCAPTCHA на одной странице

Для того чтобы разместить несколько invisible reCAPTCHA на странице, их необходимо генерировать вручную.

Инструкция по размещению 2 invisible reCAPTCHA на одной странице:

1. Подключить скрипт reCAPTCHA с указанием функции (в данном случае onloadReCaptchaInvisible ), которая будет вызвана после завершения загрузки api.js . Функцию onloadReCaptchaInvisible будем использовать для программной генерации виджетов и получения их id .
2. Добавим в каждую из форм обратной связи контейнер, который будет представлять собой виджет reCaptcha.
3. Представим каждый контейнер как виджет reCAPTCHA. Получим id созданных виджетов.
4. Использовать ID виджета при проверке reCAPTCHA:
5. Применять ID виджета invisible reCAPTCHA при получении ответа:

Полный код примера, в котором invisible reCAPCTHA используется для защиты нескольких форм:

Настройка виджета invisible reCAPTCHA

Дополнительные (необязательные) параметры капчи invisible reCAPTCHA:

• data-badge (badge) — местоположение значка reCAPTCHA (по умолчанию: bottomright ). В качестве значения можно указывать ещё: bottomleft (внизу слева) и inline (позволяет управлять положением с помощью CSS).
• data-type (type) — тип капчи (по умолчанию: image ). Изменить тип капчи при необходимости можно на audio .
• data-tabindex (tabindex) — для страниц, в которых для навигации по элементам дополнительно используется клавиша tab . Данный параметр позволяет установить порядок элемента, его tabindex (по умолчанию: 0).

Внимание: Использовать атрибуты с префиксом data- необходимо только в HTML-коде. В скриптах задавать параметры необходимо без префикса, т.е. вместо data-badge указывать badge и т.д.

Похожие темы, которые вас могут заинтересовать:

Комментарии: 86

Уточните пожалуйста сколько будет стоить услуга по установке на сай формы обратной связи с invisible reCAPTCHA. Скачал выложенный вами пример AJAX формы обратной связи с invisible reCAPTCHA, но самостоятельная установка не удалась из за Could not load content for www.controldrive.ru/feedback/css/bootstrap.min.css.map: HTTP error: status code 404. При отправке форма форма не выдает ни каких сообщений.
Надеюсь на вашу помощь!
Заранее благодарен за ответ.

Александр. День добрый.
Вопрос по отправке сообщения после всех проверок.
Возвращает false? сообщение не отправляется.
когда смотрю содержимое вижу в нем в том числе:
и
То-есть я понимаю, что класс PHPМailer подключен $mail формируется.
Сайт пока в локале под IIS.
Правильно -ли я понимаю, что PHPМailer не смог выполнить/инициировать отправку сообщения потому, что не нашел Sendmail по указанному пути?
И если да, как с этим справиться?

Александр, приветствую.
У меня вопрос немного не по использованию Рекапча а по PHP.
В файле process.php есть проверка на ajax/не axaj запрос, хочется ее расширить и проверять еще с какого хоста пришел запрос и сравнивать с хостом на котором лежит сайт.
У меня ситуация следующая:
глобально для сайта
в $_SESSION[‘siteHome’] хранится, допустим: localhost:8181/
в $_SESSION[‘recapchaSecret’] хранится секретный ключ.

в файле process.php я получаю $_SERVER[‘HTTP_REFERER’] — из заголовка localhost:8181/ и пытаюсь его сравнить с $_SESSION[‘siteHome’], но $_SESSION[‘siteHome’] как бы не существует для этого файла, я так понимаю, что сервер под ajax запрос создал новую сессию. Существует-ли какой-то способ добраться до $_SESSION[‘siteHome’] и $_SESSION[‘recapchaSecret’] из файла process.php?

Ключ гугла надо прописать только в index.html или еще где то?
Вот что пишет response:

День добрый!
Я объединил две ваших статьи — о reCaptha и о динамических модальных окнах и сделал заготовку (на основе вашей), с произвольным количеством динамических модальных окон на странице, и соответственно с произвольным количеством форм с рекапчей.
Точнее, форма и рекапча вроде-как одна, но т.к. она в динамическаом модале, и строится только в момент вызова, то эта форма может быть вызвана из разных мест страницы, причем в разных вызовах может быть специфицирована параметрами, и соответственно, в зависимости от «вызывальщика» может иметь различное оформление, разные поля в форме, разные поля в режиме «обязательное» и т.п. (правда, функционал изменения самой формы от параметров вызова в моем примере не показан, но он предполагается, если само тело формы разместить не в статическом .html, а например в .php — и специфицировать его, в зависимости от параметров.)

Источник

Answer by Connor Pierce

I am loading Invisible reCAPTCHA dynamically for every form with button that has class g-recaptcha . ,

Stack Overflow for Teams
Where developers & technologists share private knowledge with coworkers

,Please be sure to answer the question. Provide details and share your research!

You are missing an important part here. The api widget must rendered explicitly. Just add render=explicit to recaptcha api script.

<script src='https://www.google.com/recaptcha/api.js?
onload=onloadCallback
&render=explicit
&hl={{app.request.locale|default(defaultLang) }}' async defer>
</script>

Answer by Parker Castillo

Meta Stack Overflow

,

Stack Overflow

help
chat

,Stack Overflow en español

.html file and component.ts file

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { ReCaptchaV3Service } from 'ngx-captcha';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})<br>
export class HomeComponent implements OnInit {  

  @ViewChild('recaptcha', {static: true }) recaptchaElement: ElementRef;
  
  protected aFormGroup: FormGroup;
  
  siteKey: string;
 
  
  constructor(private formBuilder: FormBuilder,private http: HttpClient,private reCaptchaV3Service: ReCaptchaV3Service) 
  {  
   this.siteKey = "SiteKey";
  }
  
 
  ngOnInit() {
    this.addRecaptchaScript();      

  }

  renderReCaptch() {
    window['grecaptcha'].render(this.recaptchaElement.nativeElement, {
      'sitekey' : 'SiteKey',
      'callback': (response) => {
          console.log(response);
      }
    });
  }

  addRecaptchaScript() {
 
    window['grecaptchaCallback'] = () => {
      this.renderReCaptch();
    }
 
    (function(d, s, id, obj){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { obj.renderReCaptch(); return;}
      js = d.createElement(s); js.id = id;
      js.src = "https://www.google.com/recaptcha/api.js?onload=grecaptchaCallback&amp;render=explicit";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'recaptcha-jssdk', this));
 
  }
}

html file
<div class="form-group ml-4">
  <div #recaptcha ></div>
</div>  

Answer by Cassandra Gardner

I have some components which have the ng-recaptcha. And in some random test there is sometimes an error:
Error: Missing required parameters: sitekey,I guess I have to add a provider with the settings in my spec files?
The problem is that the error is not consistent, sometimes it pops up sometimes not.,

Sorry, something went wrong.

TestBed.configureTestingModule({
// ...
providers: [
//...
,{
    provide: RECAPTCHA_SETTINGS,
    useValue: { siteKey: 'yoursitekey' } as RecaptchaSettings,
  }
//...
});

Answer by Leah Suarez

Uncaught Error: Missing required parameters: sitekey
at new zr (recaptcha__en.js:392)
at new es (recaptcha__en.js:400)
at ss (recaptcha__en.js:411)
at recaptcha__en.js:412
at Array.forEach ()
at ts (recaptcha__en.js:412)
at bs (recaptcha__en.js:417)
at cs (recaptcha__en.js:400)
at recaptcha__en.js:419
at recaptcha__en.js:429,And are you sure that the sitekey is really being passed in (maybe it’s undefined or something)?,Do you use multiple recaptcha libs on the same page, or on different ones (I mean, do they all work in parallel on some page, or separate?)

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Answer by Deborah Hodges

Here I have an error when adding Recaptcha V2 inside a simple Angular Page, I have only a little knowledge in Angular, the html file and component.ts file are mentioned here.,I am trying to send this form along with the token to a API on Laravel and validate inside Laravel and return only a Success or a Error message in angular page.,The error inside my console is with the recaptcha ngx-recaptcha2 tag :(I have tried this recaptcha tag in many format but not sure if the code is correct So I went with this method which I have seen in a Internet)

Unhandled Promise rejection: Missing required parameters: sitekey ; Zone: ; Task:
Promise.then ; Value: Error: Missing required parameters: sitekey
l recaptcha__en.js:226
rL recaptcha__en.js:401
r recaptcha__en.js:336
C7 recaptcha__en.js:480
q recaptcha__en.js:176
renderReCaptcha ngx-captcha.js:328
Angular 3
renderReCaptcha ngx-captcha.js:324
onloadCallback ngx-captcha.js:393
setupComponent ngx-captcha.js:373
Angular 5
this.windowOnLoadCallbackProperty ngx-captcha.js:51

<form #myform="ngForm" (ngSubmit)="onSubmit(myform)">
                                
    <div class="form-group">
    <!--<label>Your Name</label>-->
      <input type="text" class="form-control" placeholder="Enter Your Name" id="inputName" name="name" [(ngModel)]="name" />
    </div>

    <div class="form-group">
    <!--<label>Email</label>-->
       <input type="email" class="form-control" placeholder="Enter your email" id="inputEmail" name="email" [(ngModel)]="email" />
     </div>

     <div class="form-group">
     <!--<label>Phone No</label>-->
        <input type="tel" class="form-control" placeholder="Enter Your Phone No" id="inputPhone" oninput="process(this)" maxlength ="12" minlength ="10" name="phone" [(ngModel)]="phone" />
      </div>

      <div class="form-group">
      <!--<label>City Name</label>-->
          <input type="text" class="form-control" placeholder="Enter Your City Name" id="inputCity" name="city" [(ngModel)]="city"/>
      </div>
      <div class="form-group ml-4">
         <ngx-recaptcha2 #captchaElem name="siteKey" [(ngModel)]="siteKey">
         </ngx-recaptcha2>
       </div>                                  
       <div class="form-group">
                                    
       <img src="assets/img/banner-image/payment-icon.png" alt="image">
       </div>
       <button type="submit" class="btn btn-gradient" >Download </button>
  </form> 

component.ts file

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { ReCaptchaV3Service } from 'ngx-captcha';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {  
  
  protected aFormGroup: FormGroup;
  
  siteKey: string;
 
  
  constructor(private formBuilder: FormBuilder,private http: HttpClient,private reCaptchaV3Service: ReCaptchaV3Service) 
  { 
   // this.siteKey = "6LcN0IIaAAAAAPXCb2qdz7JxgJSeuycDQDMaxK9R";
   this.siteKey = "6LcwHUEaAAAAAIiWj1j8EYHDXuHl1_HZatabWR9U";
  }
  
 
  ngOnInit() {

    this.aFormGroup = this.formBuilder.group({
      recaptcha: ['', Validators.required]
    });    

  } ```


  [1]: https://i.stack.imgur.com/dim7Q.png

Answer by Kash Wade

Error: Missing required parameters: sitekey recaptcha__en.js:286:152,This appears in console twice on page load and it prevents the captcha from appearing.,Both public and secret key are tested working without plugin

More Details Refer

Answer by Reece Schmidt

I’m getting this error:
Missing required parameters: sitekey ,Sitekey is added to RecaptchaPublicKey in UmbracoForms.config and site has been restarted.,After creating the correct keys in UmbracoForms.config, everything works fine.

More Details Refer

Answer by Jaxson Jensen

We’re experiencing an issue since the latest update where we can’t log into the dashboard with this plugin enabled.,We could not find another plugin that had recaptcha keys that might be conflicting, but we haven’t disabled each one to test yet. Nothing relevant comes up in the debug log. We’re hoping there might be a simple fix we’ve missed before we try removing each plugin.,We thought we might need to update/use v3 keys. We tried this (and checked the Enable reCAPTCHA v3 checkbox in the plugin settings), and got the same console error as with our v2 keys.

More Details Refer

Answer by Jaxxon Hernandez

I entered my sitekey and secret key in the area in the settings for the v2 keys. I receive this error when inspecting a page in the console.,

Resolved
jazir5
(@jazir5)

1 year, 12 months ago

I entered my sitekey and secret key in the area in the settings for the v2 keys. I receive this error when inspecting a page in the console.

,You are using the wrong key. You need to use the V3 keys.

More Details Refer

Uncaught Error: Missing required parameters: sitekey

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&hl={{  app.request.locale|default(defaultLang) }}' async defer></script>

var onloadCallback = function () {
    $("button.g-recaptcha").each(function () {
        var el = $(this);
        //SITE_KEY is actually hard coded string.
        //It is string that google provided. I just remove it for security reasons...
        grecaptcha.render($(el).attr("id"), {
            "sitekey": SITE_KEY,  
            "size": "invisible",
            "badge": "inline",
            "callback": function (token) {
                $(el).parent().find(".g-recaptcha-response").val(token);
                $(el).closest("form").submit();
            }
        }, true);
    });

    $("button.g-recaptcha").click(function(event) {
        event.preventDefault();
        grecaptcha.execute();
    });
};

<button 
    type="submit" 
    id="submitReviewButton"
    class="btn btn-lg btn-submit btn--green g-recaptcha"
 >
    {{ "review.submit_your_review"|trans }}
</button>

3 ответа

Лучший ответ

<script src='https://www.google.com/recaptcha/api.js?
onload=onloadCallback
&render=explicit
&hl={{app.request.locale|default(defaultLang) }}' async defer>
</script>

var recaptchaCallback = function() {
        $("button#recaptcha").each(function () {
            var el = $(this);
            grecaptcha.render($(el).attr("id"), {
                "sitekey": 'YOUR_GOOGLE_RECAPTCHA_KEY',
                "size": "invisible",
                "badge": "bottomleft",
                "callback": function (token) {
                    $(el).closest("form").submit();
                }
            });
        });
    };
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit" async defer></script>

Я загружаю Invisible reCAPTCHA динамически для каждой формы с кнопкой, которая имеет класс g-recaptcha.

Проблема, что у меня есть, заключается в том, что captcha не загружается правильно, и я не уверен, почему. Я следил за документацией на веб-сайте captcha, и я не уверен, как и почему я получил эту ошибку:

Uncaught Error: Missing required parameters: sitekey

Кто-нибудь знает, где проблема?

Вот код, который я использую:

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&hl={{  app.request.locale|default(defaultLang) }}' async defer></script>

JS

var onloadCallback = function () {
    $("button.g-recaptcha").each(function () {
        var el = $(this);
        //SITE_KEY is actually hard coded string.
        //It is string that google provided. I just remove it for security reasons...
        grecaptcha.render($(el).attr("id"), {
            "sitekey": SITE_KEY,  
            "size": "invisible",
            "badge": "inline",
            "callback": function (token) {
                $(el).parent().find(".g-recaptcha-response").val(token);
                $(el).closest("form").submit();
            }
        }, true);
    });

    $("button.g-recaptcha").click(function(event) {
        event.preventDefault();
        grecaptcha.execute();
    });
};

ПРИМЕР HTML:

<button 
    type="submit" 
    id="submitReviewButton"
    class="btn btn-lg btn-submit btn--green g-recaptcha"
 >
    {{ "review.submit_your_review"|trans }}
</button>