Google reCAPTCHA v3 в Demomarket

Материал из Umicms
Перейти к:навигация, поиск

Актуально для версии 20

Задача

Реализовать использование Google reCaptcha v3 в шаблоне Demomarket.

Решение

Для использования Google reCaptcha v3 необходимо внести небольшие изменения в несколько файлов шаблона:

DemomarketPhpExtension.php

Файл находится по адресу /templates/demomarket/php/library/DemomarketPhpExtension.php

В файле нужно изменить метод getRecaptchaUrl так, чтобы в GET параметре render передавался SiteKey Google reCaptcha v3: 

/**
 * Возвращает url скрипта recaptcha
 * @param array $variables описание страницы
 *
 * [
 *    'lang' => string // код языка
 * ]
 *
 * @return string
 */
public function getRecaptchaUrl(array $variables) {
	$lang = isset($variables['lang']) ? $variables['lang'] : 'ru';
	return "https://www.google.com/recaptcha/api.js?render=".$this->getRecaptchaSiteKey()."&onload=CaptchaCallback&render=explicit&hl={$lang}";
}

head.phtml

Файл находится по адресу /templates/demomarket/php/layout/head.phtml

Этот файл отвечает за код который размещается в теге <head> всех страниц сайта и тут нужно поменять код инициализации Google reCaptcha v3: 

<?php
/**
 * Содержимое html-тега <head>.
 *
 * @var umiTemplaterPHP|ViewPhpExtension|DemomarketPhpExtension $this
 * @var array $variables
 */
?>

<base href="<?= $this->getResourceDirectory() ?>">
<title><?= $this->escape($variables['title']) ?></title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?= $this->escape($variables['meta']['description']) ?>">
<meta name="keywords" content="<?= $this->escape($variables['meta']['keywords']) ?>">
<meta name="author" content="Umisoft">

<?= $this->macros('content', 'includeFrontendResources') ?>

<link rel="stylesheet" href="compiled/demomarket.lib.min.css">
<link rel="stylesheet" href="compiled/demomarket.min.css">

<?= $this->getCanonicalLinkTag($variables) ?>

<script type="text/javascript" src="/ulang/<?= $variables['lang'] ?>/common/emarket/?js" charset="utf-8"></script>
<script src="compiled/demomarket.lib-min.js"></script>
<script src="compiled/demomarket-min.js"></script>

<?php if ($this->isRecaptchaEnabled()): ?>
	<script src="<?= $this->getRecaptchaUrl($variables) ?>" async defer></script>

	<!--suppress JSUnusedLocalSymbols -->
	<script>
		var CaptchaCallback = function() {
			$('.g-recaptcha')
				.append('<input type="hidden" name="g-recaptcha-response" class="g-recaptcha-response">')
				.append('<input type="hidden" name="action" class="recaptcha-action" value="homepage">');
			
			grecaptcha.ready(function() {
				grecaptcha.execute("<?=$this->getRecaptchaSiteKey()?>", {action: 'homepage'}).then(function(token) {
					$('.g-recaptcha-response').val(token);
					$('.recaptcha-action').val('homepage');
				});
			});
		};
	</script>
<?php endif; ?>

<style>
	<?= $this->getUserCss() ?>
</style>

Результат

Если все сделано правильно в правом нижнем углу сайта появится виджет:

Google reCaptcha v3.png

Благодаря тому, что Google reCaptcha v3 работает в фоне и не отвлекает пользователя от выполнения действий на сайте повышается удобство его использования и соответственно увеличивается конверсия.

Источник — «https://wiki.umisoft.ru/index.php?title=Google_reCAPTCHA_v3_в_Demomarket&oldid=9310»