fix(recaptcha): remove execute/assessment from homepage load. (#3759)

* move demo.js to a new name * Remove execute/assessment from home page. * Revert unintended change to copyright stanzas. * Update demo.js file with home page changes. --------- Co-authored-by: Sita Lakshmi Sangameswaran <sitalakshmi@google.com> Co-authored-by: Adam Ross <adamross@google.com> Co-authored-by: Tony Pujals <subfuzion@users.noreply.github.com>
GoogleCloudPlatform · Aug 10, 2024 · c56d4ce · c56d4ce
1 parent 12bf999
commit c56d4ce
Show file tree

Hide file tree

Showing 9 changed files with 10 additions and 98 deletions.
diff --git a/recaptcha_enterprise/demosite/app/config.properties b/recaptcha_enterprise/demosite/app/config.properties
@@ -1,4 +1,3 @@
-recaptcha_action.home=home
 recaptcha_action.login=log_in
 recaptcha_action.signup=sign_up
 recaptcha_action.store=check_out

diff --git a/recaptcha_enterprise/demosite/app/controllers/controller.js b/recaptcha_enterprise/demosite/app/controllers/controller.js
@@ -66,50 +66,6 @@ const comment = (req, res) => {
 };
 
 const {createAssessment} = require('../recaptcha/createAssessment');
-// On homepage load, execute reCAPTCHA Enterprise assessment and take action according to the score.
-const onHomepageLoad = async (req, res) => {
-  try {
-    // <!-- ATTENTION: reCAPTCHA Example (Server Part 1/2) Starts -->
-    const recaptchaAction = PROPERTIES.get('recaptcha_action.home');
-    const assessmentResponse = await createAssessment(
-      context.project_id,
-      context.site_key,
-      req.body.token,
-      recaptchaAction
-    );
-
-    // Check if the token is valid, score is above threshold score and the action equals expected.
-    // Take action based on the result (BAD / NOT_BAD).
-    //
-    // If result.label is NOT_BAD:
-    // Load the home page.
-    // Business logic.
-    //
-    // If result.label is BAD:
-    // Trigger email/ phone verification flow.
-    const result = checkForBadAction(assessmentResponse, recaptchaAction);
-    // <!-- ATTENTION: reCAPTCHA Example (Server Part 1/2) Ends -->
-
-    // Below code is only used to send response to the client for demo purposes.
-    // DO NOT send scores or other assessment response to the client.
-    // Return the response.
-    result.score =
-      assessmentResponse.riskAnalysis && assessmentResponse.riskAnalysis.score
-        ? assessmentResponse.riskAnalysis.score.toFixed(1)
-        : (0.0).toFixed(1);
-
-    res.json({
-      data: result,
-    });
-  } catch (e) {
-    res.json({
-      data: {
-        error_msg: e,
-      },
-    });
-  }
-};
-
 // On signup button click, execute reCAPTCHA Enterprise assessment and take action according to the score.
 const onSignup = async (req, res) => {
   try {
@@ -323,7 +279,6 @@ module.exports = {
   login,
   store,
   comment,
-  onHomepageLoad,
   onSignup,
   onLogin,
   onStoreCheckout,

diff --git a/recaptcha_enterprise/demosite/app/routes.js b/recaptcha_enterprise/demosite/app/routes.js
@@ -21,7 +21,6 @@ const {
   login,
   store,
   comment,
-  onHomepageLoad,
   onSignup,
   onLogin,
   onStoreCheckout,
@@ -36,7 +35,6 @@ router.get('/store', store);
 router.get('/comment', comment);
 
 // Submit action URL rules.
-router.post('/on_homepage_load', onHomepageLoad);
 router.post('/on_signup', onSignup);
 router.post('/on_login', onLogin);
 router.post('/on_store_checkout', onStoreCheckout);

diff --git a/...rise/demosite/app/static/demo-6df0841a.js → ...rise/demosite/app/static/demo-2af4c10e.js b/...rise/demosite/app/static/demo-6df0841a.js → ...rise/demosite/app/static/demo-2af4c10e.js
@@ -3974,7 +3974,7 @@ class RecaptchaDemo extends s {
           Play the game, search the store, view the source, or just poke around
           and have fun!
         </p>
-        <button @click=${this.handleSubmit} class="button" type="button">
+        <button @click=${this.goToNextStep} class="button" type="button">
           View examples
         </button>
       </section>
@@ -4134,16 +4134,11 @@ class RecaptchaDemo extends s {
             <h4 class="h1">Pattern</h4>
             <h5 class="h2">Protect your entire site</h5>
             <p>
-              Add to every page of your site when it loads. Tracking the
-              behavior of legitimate users and bad ones between different pages
-              and actions will improve scores.
+              Add reCAPTCHA to user interactions across your entire site.
+              Tracking the behavior of legitimate users and bad ones between
+              different pages and actions will improve scores.
+              Click VIEW EXAMPLES to begin!
             </p>
-            <a
-              class="documentation"
-              href="https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages#page-load"
-              target="_blank"
-              ><span>Learn more</span><mwc-icon>launch</mwc-icon></a
-            >
           </section>
           ${this[RESULTS[this.step]]}
         </div>

diff --git a/recaptcha_enterprise/demosite/app/templates/comment.html b/recaptcha_enterprise/demosite/app/templates/comment.html
@@ -94,7 +94,7 @@
     />
     <link href="../static/global-15fca5ccf020c02b.css" rel="stylesheet" />
     <link href="../static/demo-81d99a00.css" rel="stylesheet" />
-    <script src="../static/demo-6df0841a.js" type="module"></script>
+    <script src="../static/demo-2af4c10e.js" type="module"></script>
     <script
       async
       defer

diff --git a/recaptcha_enterprise/demosite/app/templates/home.html b/recaptcha_enterprise/demosite/app/templates/home.html
@@ -18,39 +18,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>Home: reCAPTCHA Demo</title>
-    <!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Starts -->
-    <!-- See: https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages#page-load -->
     <script src="https://www.google.com/recaptcha/enterprise.js?render={{site_key}}"></script>
-    <script type="text/javascript">
-      grecaptcha.enterprise.ready(async () => {
-        const token = await grecaptcha.enterprise.execute("{{site_key}}", {
-          action: "home",
-        });
-        await viewHomepage({ token });
-      });
-    </script>
-    <!-- See: https://cloud.google.com/recaptcha-enterprise/docs/create-assessment -->
-    <script type="text/javascript">
-      async function viewHomepage({ token }) {
-        // Include the token for server-side assessment.
-        const body = {
-          token,
-        };
-        // Code for fetching the assessment from server-side goes here.
-        // Refer to demo app backend code for more information.
-        // If you already use a library or framework for event handlers, you 
-        // can handle events your usual way.
-        const score = await fetchServerResponse({
-          body,
-          url: "on_homepage_load",
-        });
-        // In this demo, the assessment score is displayed in the client.
-        // But, you should AVOID using the assessment response in the
-        // client and handle it on the server-side.
-        useAssessmentInClient(score);
-      }
-    </script>
-    <!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Ends -->
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <meta
       name="description"
@@ -89,7 +57,7 @@
     />
     <link href="../static/global-15fca5ccf020c02b.css" rel="stylesheet" />
     <link href="../static/demo-81d99a00.css" rel="stylesheet" />
-    <script src="../static/demo-6df0841a.js" type="module"></script>
+    <script src="../static/demo-2af4c10e.js" type="module"></script>
     <script
       async
       defer
@@ -99,9 +67,6 @@
   </head>
   <body>
     <recaptcha-demo step="home">
-      <!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Starts -->
-      <!-- Nothing required for page load -->
-      <!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Ends -->
     </recaptcha-demo>
   </body>
 </html>
diff --git a/recaptcha_enterprise/demosite/app/templates/login.html b/recaptcha_enterprise/demosite/app/templates/login.html
@@ -96,7 +96,7 @@
     />
     <link href="../static/global-15fca5ccf020c02b.css" rel="stylesheet" />
     <link href="../static/demo-81d99a00.css" rel="stylesheet" />
-    <script src="../static/demo-6df0841a.js" type="module"></script>
+    <script src="../static/demo-2af4c10e.js" type="module"></script>
     <script
       async
       defer

diff --git a/recaptcha_enterprise/demosite/app/templates/signup.html b/recaptcha_enterprise/demosite/app/templates/signup.html
@@ -90,7 +90,7 @@
     />
     <link href="../static/global-15fca5ccf020c02b.css" rel="stylesheet" />
     <link href="../static/demo-81d99a00.css" rel="stylesheet" />
-    <script src="../static/demo-6df0841a.js" type="module"></script>
+    <script src="../static/demo-2af4c10e.js" type="module"></script>
     <script
       async
       defer

diff --git a/recaptcha_enterprise/demosite/app/templates/store.html b/recaptcha_enterprise/demosite/app/templates/store.html
@@ -97,7 +97,7 @@
     />
     <link href="../static/global-15fca5ccf020c02b.css" rel="stylesheet" />
     <link href="../static/demo-81d99a00.css" rel="stylesheet" />
-    <script src="../static/demo-6df0841a.js" type="module"></script>
+    <script src="../static/demo-2af4c10e.js" type="module"></script>
     <script
       async
       defer