Yandex SmartCaptcha (Яндекс Капча)

Настройка Yandex SmartCaptcha на стороне Яндекса

Актуальная инструкцию по созданию капчи со стороны Яндекса находится здесь:

https://yandex.cloud/ru/docs/smartcaptcha/quickstart#creat-captcha

Выполнить все действия до пункта с добавлением виджета на страницу, далее настройка идет на стороне Платформы LP. В конечном итоге вы должны получить:

• Ключ клиента

Настройка Yandex SmartCaptcha со стороны Платформы LP

После того как вы получили Ключ клиента. 

Копируем код поля формы для капчи ниже:

{"className":"WidgetField","data":{"style":{"handlers":"style","vals":{"bgType":"clear","bgImage":{"pack":"bg-tech","file":"//s.lpcdn.site/img/bg-tech/1.jpg","color":[0.55,1,0.5],"size":[1600,1046],"datamix":{"img":"3.3"}},"bgImage_Blur":0,"bgImage_Attach":false,"bgImage_Size":"cover","bgImage_Repeat":"repeat","bgImage_Valign":"center","bgImage_Halign":"center","bgVideo_Source":"youtube","bgVideo_Youtube":"http://www.youtube.com/watch?v=3oem-M2tQU4","bgVideo_YoutubeImageSource":"youtube","bgVideo_YoutubeImage":{"file":"http://img.youtube.com/vi/3oem-M2tQU4/maxresdefault.jpg","size":[1920,1080],"pack":"users","datamix":{"img":"3.3"}},"bgVideo_Mp4":"//s.lpcdn.site/bgvideo/island.mp4","bgVideo_Webm":"//s.lpcdn.site/bgvideo/island.webm","bgVideo_Ogv":"//s.lpcdn.site/bgvideo/island.ogv","bgVideo_DirectImage":{"file":"//s.lpcdn.site/bgvideo/island.jpg","size":[1280,720],"pack":"users","datamix":{"img":"3.3"}},"bgColor":{"from":"global","global":{"id":0},"datamix":{"color":"3.3"}},"bgColor_Alpha":0.25,"bgColor_Bright":0,"bgBright":-0.5,"bgGradientDirection":"to bottom","bgGradientColor1":{"from":"global","global":{"id":0},"datamix":{"color":"3.3"}},"bgGradientColor1_Alpha":0.8,"bgGradientColor2":{"from":"global","global":{"id":0},"datamix":{"color":"3.3"}},"bgGradientColor2_Alpha":0.2,"bgParticlesShapeParticle":"circle","bgParticlesColorParticle":{"from":"contrast","contrast":{"type":"frontcolor"},"parent":{"type":"frontcolor"},"datamix":{"color":"3.3"}},"bgParticlesOpacityParticle":1,"bgParticlesNumberParticle":80,"bgParticlesSizeParticle":5,"bgParticlesLink":true,"bgParticlesLinkDistance":150,"bgParticlesMoveState":true,"bgParticlesMoveSpeed":2,"bgParticlesMoveDirection":"none","bgParticlesMoveOutMode":"out","bgParticlesInteractHoverState":false,"bgParticlesInteractHoverType":"grab","bgParticlesInteractHoverGrabDistance":250,"bgParticlesInteractHoverGrabOpacity":0.8,"bgParticlesInteractHoverRepulseDistance":150,"bgParticlesInteractHoverBubbleDistance":150,"bgParticlesInteractHoverBubbleSize":10,"bgParticlesInteractClickState":false,"bgParticlesInteractClickType":"push","bgParticlesInteractClickCount":2,"padTop":5,"padBottom":5,"padLeft":10,"padRight":10,"borderWidth":3,"borderRadius":0,"borderStyle":"none","borderColor":{"from":"parent","parent":{"type":"frontcolor"},"datamix":{"color":"3.3"}},"shadow":false,"shadowInset":false,"shadowX":0,"shadowY":2,"shadowBlur":5,"shadowScale":0,"shadowColor":{"from":"self","data":[0,0,0],"datamix":{"color":"3.3"}},"shadowAlpha":0.5,"wow":false,"wowType":"bounceIn","wowDelay":0,"hover":false,"hoverType":"hvr-grow-mini","id":"","classes":"","hidexs":false,"hidesm":false,"hidemd":false,"hidelg":false,"usePadTopXs":false,"padTopXs":5,"usePadBottomXs":false,"padBottomXs":5,"usePadLeftXs":false,"padLeftXs":5,"usePadRightXs":false,"padRightXs":5,"usePadTopSm":false,"padTopSm":5,"usePadBottomSm":false,"padBottomSm":5,"usePadLeftSm":false,"padLeftSm":5,"usePadRightSm":false,"padRightSm":5,"usePadTopMd":false,"padTopMd":5,"usePadBottomMd":false,"padBottomMd":5,"usePadLeftMd":false,"padLeftMd":5,"usePadRightMd":false,"padRightMd":5}},"datamix":{"nodebg":"3.3","widgetpaddings":"3.3","widgetborders":"3.3","widgetshadow":"3.3","widgetfx":"3.3","widgetparameters":"3.3","widgetadaptive":"3.3","metahtml":"3.3"},"settings":{"handlers":"settings","vals":{"name":"HTML виджет","html":"<div class=\"inline-captcha\"></div>\n\n<div class=\"only-for-editor\">\n<div class=\"Theme Theme_color_yandex-default Theme_root_default\"><div class=\"CheckboxCaptcha  \" data-testid=\"checkbox-captcha\"><div class=\"CheckboxCaptcha-Inner\"><div class=\"CheckboxCaptcha-Anchor\"><input type=\"submit\" id=\"js-button\" class=\"CheckboxCaptcha-Button\" value=\"\" aria-checked=\"false\" aria-labelledby=\"checkbox-label\" aria-describedby=\"checkbox-description\" role=\"checkbox\"><noscript><input type=\"submit\" class=\"CheckboxCaptcha-Button\" value=\"\" aria-checked=\"false\" aria-labelledby=\"checkbox-label\" aria-describedby=\"checkbox-description\" role=\"checkbox\"/></noscript><div class=\"CheckboxCaptcha-Checkbox\" data-checked=\"false\"><svg class=\"SvgIcon CheckIcon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 25\" fill=\"none\"><path d=\"M4 12.5L9.5 18.5L20 6.5\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></div></div><div class=\"CheckboxCaptcha-Label\"><span class=\"Text Text_weight_regular Text_typography_control-xxl CheckboxCaptcha-LabelText\"><span id=\"checkbox-label\">I'm not a robot<!-- -->&nbsp;</span></span><span class=\"Text Text_weight_regular Text_typography_control-l CheckboxCaptcha-SecondaryText\"><span id=\"checkbox-description\">Press to continue</span></span></div></div><div class=\"Text Text_color_ghost Text_weight_regular Text_typography_control-s CaptchaLinks CheckboxCaptcha-Links\"><button aria-label=\"Показать ссылки\" aria-pressed=\"false\" type=\"button\" class=\"CaptchaButton CaptchaButton_view_clear CaptchaButton_size_m CaptchaLinks-ToggleButton CaptchaLinks-ToggleButton_checkbox\"><svg class=\"SvgIcon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11 18.5625C15.1766 18.5625 18.5625 15.1766 18.5625 11C18.5625 6.82334 15.1766 3.4375 11 3.4375C6.82334 3.4375 3.4375 6.82334 3.4375 11C3.4375 15.1766 6.82334 18.5625 11 18.5625ZM11 20.625C16.3157 20.625 20.625 16.3157 20.625 11C20.625 5.68426 16.3157 1.375 11 1.375C5.68426 1.375 1.375 5.68426 1.375 11C1.375 16.3157 5.68426 20.625 11 20.625ZM8.85528 6.24171C9.44645 5.75611 10.2222 5.46546 11 5.46546C12.6736 5.46546 14.2167 6.59336 14.2167 8.409C14.2167 8.92624 14.1095 9.43266 13.8078 9.92185C13.5213 10.3865 13.1023 10.7646 12.6048 11.1132C12.3057 11.3227 12.1569 11.4663 12.0839 11.5642C12.0312 11.6348 12.0312 11.661 12.0313 11.686L12.0313 11.6872C12.0313 12.2567 11.5695 12.7185 11 12.7185C10.4305 12.7185 9.96876 12.2567 9.96876 11.6872C9.96876 10.5945 10.7163 9.9179 11.4214 9.42397C11.806 9.15451 11.9732 8.9675 12.0523 8.83924C12.1163 8.73548 12.1542 8.62111 12.1542 8.409C12.1542 7.9976 11.8192 7.52796 11 7.52796C10.718 7.52796 10.401 7.6411 10.1644 7.83546C9.9342 8.02457 9.84579 8.22978 9.84579 8.409C9.84579 8.97854 9.38408 9.44025 8.81454 9.44025C8.24499 9.44025 7.78329 8.97854 7.78329 8.409C7.78329 7.48351 8.25771 6.73257 8.85528 6.24171ZM11 16.5C11.7594 16.5 12.375 15.8844 12.375 15.125C12.375 14.3656 11.7594 13.75 11 13.75C10.2406 13.75 9.625 14.3656 9.625 15.125C9.625 15.8844 10.2406 16.5 11 16.5Z\" fill=\"currentColor\"></path></svg></button><div class=\"CaptchaLinks-Links\"><a color=\"secondary\" target=\"_blank\" href=\"https://cloud.yandex.ru/services/smartcaptcha?utm_source=smart-captcha&amp;utm_medium=chbx&amp;utm_campaign=security\" class=\"Link Link_color_secondary Link_view_captcha\">SmartCaptcha by Yandex Cloud</a></div></div></div></div></div>\n\n</div>","css":".CheckboxCaptcha {\n  background-color: #fff;\n  background-color: var(--smart-captcha-background-color,#fff);\n  border-radius: 11px;\n  border-radius: var(--checkbox-captcha-border-radius,11px);\n  box-sizing: border-box;\n  font-family: YS Text,Helvetica Neue,Helvetica,Arial,sans-serif;\n  padding: 15px 0 0 15px;\n  position: relative;\n  user-select: none;\n}\n\n.CheckboxCaptcha-Inner {\n  display: flex;\n}\n\n.CheckboxCaptcha-Anchor {\n  background-color: #fff;\n  background-color: var(--anchor-background-color,#fff);\n  border-radius: 4px;\n  border-radius: var(--anchor-border-radius,4px);\n  height: 28px;\n  width: 28px;\n}\n\n.CheckboxCaptcha-Button {\n  background: none;\n  border: 1px solid rgba(0,0,0,.15);\n  border: var(--checkbox-captcha-border,1px solid rgba(0,0,0,.15));\n  border-radius: 11px;\n  border-radius: var(--checkbox-captcha-border-radius,11px);\n  cursor: pointer;\n  font-size: 0;\n  height: 100%;\n  left: 0;\n  outline: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n}\n\n.CheckboxCaptcha-Checkbox {\n  align-items: center;\n  border: 2px solid #ccc;\n  border: var(--anchor-border,2px solid #ccc);\n  border-radius: 4px;\n  border-radius: var(--anchor-border-radius,4px);\n  box-sizing: border-box;\n  display: flex;\n  height: 28px;\n  justify-content: center;\n  width: 28px;\n}\n\n.CheckboxCaptcha-Label {\n  display: flex;\n  flex-direction: column;\n  margin-left: 16px;\n}\n\n.CaptchaLinks.Text {\n  font-size: 12px;\n}\n.Text.Text_weight_regular {\n  font-weight: 400;\n}\n.CheckboxCaptcha-Links {\n  letter-spacing: 0;\n  padding: 13px 0 8px 44px;\n  z-index: 2;\n}\n.CaptchaLinks {\n  padding: 13px 0 8px;\n}\n.Text_typography_control-s {\n  font-family: YS Text,Helvetica Neue,Helvetica,Arial,sans-serif;\n  font-size: .8125rem;\n  letter-spacing: .0065em;\n  line-height: 1rem;\n}\n.Text_color_ghost {\n  color: rgba(0,0,0,.3);\n}\n.Text {\n  color: #000;\n  color: var(--color-typo-primary,#000);\n  font-weight: 400;\n}\n\n.CaptchaLinks .CaptchaButton, .CaptchaLinks .Link {\n  z-index: 1;\n}\n.CaptchaLinks-ToggleButton {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  right: 0;\n  width: 32px;\n}\n.CaptchaButton_size_m {\n  height: 32px;\n  line-height: 32px;\n}\n.CaptchaButton_view_clear {\n  background: none;\n  color: #000;\n  color: var(--color-typo-primary,#000);\n  font-size: 18px;\n  opacity: .65;\n  transition: opacity .1s ease-out;\n}\n.CaptchaButton {\n  -moz-user-focus: ignore;\n  -webkit-tap-highlight-color: rgba(0,0,0,0);\n  border-width: 0;\n  box-sizing: border-box;\n  display: inline-block;\n  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;\n  font-weight: inherit;\n  margin: 0;\n  outline: 0;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  touch-action: manipulation;\n  transform: scale(1);\n  transition: transform .1s ease-out,color .15s linear;\n  user-select: none;\n  white-space: nowrap;\n}","meta_js":"cr.api(function (page) {\n  const field = page.getComponent(el);\n  \n  function init() {\n    $(el).find('.inline-captcha').html('<div class=\"y-recaptcha\"></div>');\n    window.smartCaptcha.render($(el).find('.inline-captcha > .y-recaptcha')[0], {\n      sitekey : params.key,\n      callback: function (response) {\n        field.setValue('✓');\n      }\n    });\n  }\n  \n  field.form.on('submit', event => {\n    init();\n  });\n  \n  init();\n});","meta_js_lazy":true,"meta_js_state":"return {\n  initialState: {},\n  eventListeners: {},\n  reset: function () {},\n};","encapsulation":true,"components":[],"meta_cdn":["https://smartcaptcha.yandexcloud.net/captcha.js"],"tabs":[{"id":"main","name":"Главные"}],"variables":[{"macros":"key","name":"Ключ сайта","showCondition":"","useInJs":true,"tab":"main","type":"string","message":"Тут текст подсказки","value":""}],"type":"hackable","text":"Я не робот","hidename":false,"list":[{"text":"Гамбургер","image":{"file":"//f1.lpcdn.site/c16a5320fa475530d9583c34fd356ef5/85600fbdcfcd98c68092c8ee78fef443.jpg","size":[600,600]},"value":0,"name":"Вариант 1"},{"text":"Чай","image":{"file":"//f1.lpcdn.site/c16a5320fa475530d9583c34fd356ef5/d07611e14f2f6512eb82382ddb5812dd.jpg","size":[600,600]},"value":0,"name":"Вариант 2"},{"text":"Мороженное","image":{"file":"//f1.lpcdn.site/c16a5320fa475530d9583c34fd356ef5/ca0be5f5cd84b6891c5a611b252bc904.jpg","size":[600,600]},"value":0}],"visual_width":30,"visual_height":100,"required":true,"id":"","min":"0","max":"100","step":"1","align":"sides","fontsize":120,"typing":"string","format":"%result% руб.","file_text":"Прикрепить файл...","formula":"","condition":"","template":"","variable":"","valueOn":"1","valueOff":"0","privacy_button":"Политика конфиденциальности","privacy_checkbox":"Даю согласие на <обработку персональных данных>","privacy_text":"Нажимая кнопку, вы даете согласие на <обработку персональных данных>","privacy_source":"global"},"tabs":{"primary":"field","field":"field_metahtml","field_metahtml__soft":"field_metahtml__soft_main","field_metahtml__hard":"field_metahtml__hard_css"},"toggles":{"field_metahtml":"soft"}},"state":{},"components":{},"templates":{"cont":{"sources":[],"datamix":{"cont":"3.3"},"tplname":"cont"},"text":{"html":"<p>Редактируемый текст</p>","datamix":{"html":"3.3"},"tplname":"text"},"icon":{"handlers":"rawsvgicon","vals":{"src":{"file":"//s.lpcdn.site/img/icons-simple-thin/49--black.png","pack":"icons-simple-thin","size":[256,256],"svg":"<style type=\"text/css\"><![CDATA[ .st0{fill:none;stroke:#231F20;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} ]]></style><polygon class=\"st0\" points=\"30.001,2.421 38.965,20.576 59,23.49 44.499,37.622 47.922,57.579 30.001,48.156 12.076,57.579 15.5,37.622 1,23.49 21.041,20.576 \"/>","datamix":{"img":"3.3"}}},"datamix":{"rawsvgicon":"3.3"},"tplname":"icon"},"image":{"handlers":"rawimage","vals":{"src":{"file":"//f1.lpcdn.site/63d3a6c9689d0a310bdb33ba48a9f341/194594eafe8a83db5eb472d202544c73.png","size":[477,500],"pack":"users","datamix":{"img":"3.3"}}},"datamix":{"rawimage":"3.3"},"tplname":"image"}},"value":{"name":"","phone":"","email":"","count":"0","slider":"0","text":"","textarea":"","checkbox-input":false,"radio-list":[false,false,false],"radio-visual":[true,false,false],"checkbox-list":[false,false,false],"checkbox-visual":[false,false,false],"select-menu":[false,false,false],"hidden":"","hackable":"","result":0,"file":"","privacy-checkbox":false},"cont":{"sources":[],"datamix":{"cont":"3.3"}}},"multilandings":[],"locked":false,"locks":0,"variants":[],"redactor":"3.3.2"}

Переходим к настройке формы в редакторе, вставляем скопированный код импортом в любое поле формы:

Во вкладке Расширение, в поле Ключ сайта вставляем Ключ клиента, полученный из Yandex SmartCaptcha.

После того как компонент поля с каптчей появился в форме и вставили ключ клиента, публикуем страницу и проверяем результат:

Готово, теперь сайт защищен от возможного спама заявками.