Using reCAPTCHA v3 in portals

Bots and spam submissions are a growing problem for public-facing web portals. reCAPTCHA v3 by Google provides a silent, background verification system that evaluates visitor interactions and assigns a risk score (0.0–1.0). Lower scores indicate higher suspicion of bot activity. Integrating reCAPTCHA v3 with Microsoft Power Pages (Portals) can effectively protect forms and public pages without annoying your users with challenges or checkboxes.

---

Step 1: Get reCAPTCHA v3 Keys from Google

1. Go to https://www.google.com/recaptcha/admin/create
2. Register your site:
   • Label: A name for your site (e.g., “My Power Portal”)
   • reCAPTCHA Type: Select reCAPTCHA v3
   • Domains: Add the full portal domain (e.g., mycompany.powerappsportals.com)
3. Accept terms and click Submit
4. Copy the:
   • Site Key (used in HTML)
   • Secret Key (used for server-side validation)

---

Step 2: Add reCAPTCHA Script to Your Web Page

You’ll need to embed the reCAPTCHA JavaScript API into your Portal page.

Method A: Using Web Template

1. Go to Portals Management App or use Power Pages Designer
2. Navigate to Web Templates
3. Open the Web Template where your form resides (or your site’s master template)
4. Add this script before the closing </head> tag:

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>

Replace YOUR_SITE_KEY with the actual site key you got from Google.

---

Step 3: Generate the reCAPTCHA Token and Include it in Form

Wherever your custom form exists, trigger reCAPTCHA and send the score.

<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then(function(token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Then in your HTML form, include a hidden input:

<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" />

This field will be populated with the token, which you’ll validate on the server.

---

Step 4: Configure the Form in Portal

If you’re using a Basic Form or Advanced Form:

1. Go to your Portal Management App
2. Open the Basic Form or Web Page where the form exists
3. In the Additional Settings or Custom JavaScript field:
   • Add the above grecaptcha.ready() JavaScript logic
4. Save and sync the portal

---

Step 5: Server-Side Validation (Using Power Automate)

Since portals don’t support backend C# or Node.js directly, we’ll use Power Automate to validate the token with Google’s API.

Step-by-Step Power Automate Flow:

1. Go to Power Automate
2. Create a new flow: “When a HTTP request is received”
3. Define this request schema:

{
  "type": "object",
  "properties": {
    "token": {
      "type": "string"
    }
  }
}

4. Add a step: HTTP Action (to call Google reCAPTCHA API)

• Method: POST
• URI: https://www.google.com/recaptcha/api/siteverify
• Headers:
  • Content-Type: application/x-www-form-urlencoded
• Body:

secret=YOUR_SECRET_KEY&response=@{triggerBody()['token']}

5. Add a Condition:
   • If body(score) is greater than 0.5 (or whatever threshold you choose), then proceed
   • Else, reject or log the spam attempt
6. Add a Response action to send back the result to the portal

---

Step 6: Connect Portal Form to Power Automate

From the Portal, when the form is submitted, use JavaScript to call the Power Automate Flow’s HTTP endpoint and send the reCAPTCHA token.

JavaScript Example:

<script>
document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();
  const token = document.getElementById('g-recaptcha-response').value;

  fetch("https://prod-XX.westus.logic.azure.com:443/workflows/.../triggers/manual/paths/invoke", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token: token })
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      // Allow form submission or show success
    } else {
      alert("Verification failed. Please try again.");
    }
  });
});
</script>

---

Step 7: Test the Integration

1. Open your portal in incognito or test mode
2. Fill and submit the form
3. Check the browser console, Network tab, or Power Automate run logs
4. Verify that:
   • The token is generated
   • Power Automate validates it successfully
   • Your form behaves accordingly

---

Security Tips

• Do not expose your Secret Key on the client-side
• Always validate on the server (Power Automate in this case)
• Set reCAPTCHA score thresholds carefully (e.g., 0.5)
• Optionally, log failed scores for improvement

---

Benefits of Using reCAPTCHA v3

• No need to solve puzzles or click checkboxes
• Works silently in the background
• Reduces user friction
• Works well with portals that use JavaScript for form interactions
• Provides analytics and scores from Google reCAPTCHA dashboard