{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/integrate-invisible-captcha-for-bot-protection/","result":{"data":{"markdownRemark":{"id":"b3caa4d0-8990-5f74-805f-6932cabc582d","excerpt":"Finding it challenging to integrate invisible reCAPTCHA only on specific web pages? This short tutorial helps you implement invisible reCAPTCHA at specific and…","html":"<p>Finding it challenging to integrate invisible reCAPTCHA only on specific web pages? This short tutorial helps you implement invisible reCAPTCHA at specific and distinct containers, such as login and forgot password. This tutorial uses LoginRadius to demonstrate this.</p>\n<blockquote>\n<p>You can <a href=\"https://accounts.loginradius.com/auth.aspx?plan=developer&#x26;action=register\">quickly create a free LoginRadius account here</a>.</p>\n</blockquote>\n<h2 id=\"what-is-recaptcha\" style=\"position:relative;\"><a href=\"#what-is-recaptcha\" aria-label=\"what is recaptcha permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is reCAPTCHA?</h2>\n<p><a href=\"https://www.google.com/recaptcha/about/\">Google reCAPTCHA</a> is a security service that helps protect your websites from fraud and abuse.</p>\n<p>Currently, LoginRadius supports two different versions of <strong>Google v2reCAPTCHA</strong>.</p>\n<ul>\n<li><strong>Checkbox</strong>: In this version of v2reCaptcha, the \"I'm not a robot\" checkbox requires a user to click it to verify the user is not a robot.</li>\n<li><strong>Invisible reCAPTCHA</strong>: This version of v2reCaptcha provides a better user experience by tracking mouse movements to identify if a human is interacting with the website.</li>\n</ul>\n<h2 id=\"the-scenario\" style=\"position:relative;\"><a href=\"#the-scenario\" aria-label=\"the scenario permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>The Scenario</h2>\n<p>You want to enable invisible reCAPTCHA on a specific page — a login page, for demonstration. To achieve this, first <a href=\"https://dashboard.loginradius.com/login\">login to your LoginRadius dashboard</a>. Or, <a href=\"https://accounts.loginradius.com/auth.aspx?action=register\">sign up here for a free account or 21-day free trial for the Developer Pro plan</a>.</p>\n<p>If you're new to LoginRadius, <a href=\"https://www.loginradius.com/resource/loginradius-ciam-developers-whitepaper\">follow our Getting Started documentation</a>docs/references/javascript-library/getting-started/) to get going. </p>\n<h3 id=\"solution-steps\" style=\"position:relative;\"><a href=\"#solution-steps\" aria-label=\"solution steps permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Solution Steps</h3>\n<ul>\n<li>First, you need to <a href=\"https://www.loginradius.com/resource/loginradius-ciam-developers-whitepaper\">enable reCAPTCHA (Invisible reCAPTCHA) from the LoginRadius dashboard</a>docs/guide/captcha/#step-2-captcha-deployment).</li>\n<li>When you enable the invisible reCAPTCHA from the Loginradius dashboard, it will also enable the reCAPTCHA at the registration page.</li>\n<li>Now, you want to only enable invisible reCAPTCHA for enabling bot protection only on the login page.</li>\n<li>\n<p>So, you will need to do the following client-side setup for adding the invisible reCAPTCHA on a specific page only — for example, on the login page.</p>\n<ul>\n<li>Disable the reCAPTCHA using the following code before initializing the LoginRadius Object.\n<code>raasoption.invisibleRecaptcha = false;</code></li>\n<li>\n<p>Now, add the following code to render the captcha only at the login page, and here <code>beforeFormRender</code> hook is used.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">LRObject.$hooks.register(&#39;beforeFormRender&#39;, function(name, schema){</span>\n<span class=\"grvsc-line\">LRObject.options.invisibleRecaptcha = false;</span>\n<span class=\"grvsc-line\">if (name == &#39;login&#39; ) {</span>\n<span class=\"grvsc-line\">  LRObject.options.invisibleRecaptcha = true;</span>\n<span class=\"grvsc-line\">   LRObject.util.addRecaptchaJS();</span>\n<span class=\"grvsc-line\">   LRObject.util.captchaSchema(&quot;loginradius-recaptcha_widget_login&quot;, schema);</span>\n<span class=\"grvsc-line\">}</span>\n<span class=\"grvsc-line\">});</span></code></pre>\n</li>\n</ul>\n</li>\n</ul>\n<p>The above code used the utility method <code>addRecaptchaJS</code> that adds the required JS for invisible reCAPTCHA. It also used the <code>captchaSchema</code> method to add reCAPTCHA within the Login Schema.</p>\n<ul>\n<li>\n<p>The last step is to stop resetting the reCAPTCHA before reCAPTCHA submission. So, add the following code:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">LRObject.$hooks.register(&#39;eventCalls&#39;, function(name){</span>\n<span class=\"grvsc-line\">LRObject.options.invisibleRecaptcha = false;</span>\n<span class=\"grvsc-line\">LRObject.options.optionalRecaptchaConfiguration.IsEnabled = true;</span>\n<span class=\"grvsc-line\">if (name == &#39;login&#39; ) {</span>\n<span class=\"grvsc-line\">  LRObject.options.invisibleRecaptcha = true;</span>\n<span class=\"grvsc-line\">  LRObject.options.optionalRecaptchaConfiguration.IsEnabled = false;</span>\n<span class=\"grvsc-line\">}</span>\n<span class=\"grvsc-line\">});</span></code></pre>\n</li>\n</ul>\n<p>When you check your hosted page, invisible reCAPTCHA will appear only on the login page.</p>\n<p>Similarly, you can follow the above steps to enable invisible reCAPTCHA on the registration(signup) page or any other page.</p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>You have learned how to use invisible reCAPTCHA on specific web pages and forms with LoginRadius to improve user experience and prevent malicious bot traffic from being effective.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n</style>","headings":[{"value":"What is reCAPTCHA?","depth":2},{"value":"The Scenario","depth":2},{"value":"Solution Steps","depth":3},{"value":"Conclusion","depth":2}],"fields":{"slug":"/engineering/integrate-invisible-captcha-for-bot-protection/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"If you only want to integrate reCAPTCHA invisibly on specific pages, LoginRadius can help you. This tutorial explains how you can quickly integrate invisible reCAPTCHA.","title":"How to Integrate Invisible reCAPTCHA for Bot Protection","canonical":null,"date":"April 08, 2022","updated_date":null,"tags":["reCAPTCHA","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ee08b46582fc03a415b092442f2b0d44/03979/configure-invisible-reCAPTCHA.png","srcSet":"/static/ee08b46582fc03a415b092442f2b0d44/f5f11/configure-invisible-reCAPTCHA.png 200w,\n/static/ee08b46582fc03a415b092442f2b0d44/6d133/configure-invisible-reCAPTCHA.png 400w,\n/static/ee08b46582fc03a415b092442f2b0d44/03979/configure-invisible-reCAPTCHA.png 800w,\n/static/ee08b46582fc03a415b092442f2b0d44/aca38/configure-invisible-reCAPTCHA.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","bio":"She is a software enthusiast, an avid contributor, and a regular blog writer. She usually works with React, UI/UX, Javascript, Node.js, and DevOps.","avatar":null}}}},"pageContext":{"id":"b3caa4d0-8990-5f74-805f-6932cabc582d","fields__slug":"/engineering/integrate-invisible-captcha-for-bot-protection/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}