Merge pull request #7546 from ThaminduR/idf-recaptcha

Introduce ReCAPTCH to identifier first authentication
wso2 · Feb 9, 2025 · d47b7e3 · d47b7e3
2 parents 1064017 + ac95a19
commit d47b7e3
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 65 deletions.
diff --git a/.changeset/healthy-avocados-help.md b/.changeset/healthy-avocados-help.md
@@ -0,0 +1,5 @@
+---
+"@wso2is/identity-apps-core": minor
+---
+
+Add ReCAPTCH to identifier authenticator
diff --git a/identity-apps-core/apps/authentication-portal/src/main/webapp/identifierauth.jsp b/identity-apps-core/apps/authentication-portal/src/main/webapp/identifierauth.jsp
@@ -16,6 +16,7 @@
   ~ under the License.
 --%>
 
+<%@ page import="org.apache.commons.text.StringEscapeUtils" %>
 <%@ page import="org.apache.cxf.jaxrs.client.JAXRSClientFactory" %>
 <%@ page import="org.apache.cxf.jaxrs.provider.json.JSONProvider" %>
 <%@ page import="org.apache.http.HttpStatus" %>
@@ -157,6 +158,11 @@
 %>
 
 <script>
+
+    function onCompleted() {
+        $("#identifierForm").submit();
+    }
+
     var insightsAppIdentifier = "<%=clientId%>";
     var insightsTenantIdentifier = "<%=userTenant%>";
 
@@ -177,56 +183,69 @@
                 hideUsernameInvalidMessage();
             });
         }
-    });
-
-    trackEvent("page-visit-authentication-portal-identifierauth", {
-        "app": insightsAppIdentifier,
-        "tenant": insightsTenantIdentifier !== "null" ? insightsTenantIdentifier : ""
-    });
 
-    function submitIdentifier (e) {
-        e.preventDefault();
-        var userName = document.getElementById("username");
-        var usernameUserInput = document.getElementById("usernameUserInput");
+        $.fn.preventDoubleSubmission = function () {
+            $(this).on("submit", function (e) {
+                var $form = $(this);
+                e.preventDefault();
+                var userName = document.getElementById("username");
+                var usernameUserInput = document.getElementById("usernameUserInput");
 
-        if (usernameUserInput) {
-            var sanitizedUsername = usernameUserInput.value.trim();
+                if (usernameUserInput) {
+                    var sanitizedUsername = usernameUserInput.value.trim();
 
-            if (sanitizedUsername.length <= 0) {
-                showUsernameInvalidMessage();
-            }
+                    if (sanitizedUsername.length <= 0) {
+                        showUsernameInvalidMessage();
+                    }
 
-            userName.value = sanitizedUsername.toLowerCase();
-        }
+                    userName.value = sanitizedUsername.toLowerCase();
+                }
 
-        if (username.value) {
-            trackEvent("authentication-portal-identifierauth-click-continue", {
-                "app": insightsAppIdentifier,
-                "tenant": insightsTenantIdentifier !== "null" ? insightsTenantIdentifier : ""
-            });
-            var $form = $(this);
-
-            // store the username in session storage
-            sessionStorage.setItem("username", username.value);
-
-            $.ajax({
-                type: "GET",
-                url: "<%= Encode.forJavaScriptBlock(loginContextRequestUrl) %>",
-                xhrFields: { withCredentials: true },
-                success: function (data) {
-                    if (data && data.status === "redirect" && data.redirectUrl && data.redirectUrl.length > 0) {
-                        window.location.href = data.redirectUrl;
-                    } else if ($form.data('submitted') !== true) {
-                        $form.data('submitted', true);
-                        document.getElementById("identifierForm").submit();
-                    } else {
-                        console.warn("Prevented a possible double submit event.");
+                var genericReCaptchaEnabled = "<%=genericReCaptchaEnabled%>";
+                if (genericReCaptchaEnabled === "true") {
+                    if (!grecaptcha.getResponse()) {
+                        grecaptcha.execute();
+                        return;
                     }
-                },
-                cache: false
+                }
+
+                if (username.value) {
+                    trackEvent("authentication-portal-identifierauth-click-continue", {
+                        "app": insightsAppIdentifier,
+                        "tenant": insightsTenantIdentifier !== "null" ? insightsTenantIdentifier : ""
+                    });
+                    var $form = $(this);
+
+                    // store the username in session storage
+                    sessionStorage.setItem("username", username.value);
+
+                    $.ajax({
+                        type: "GET",
+                        url: "<%= Encode.forJavaScriptBlock(loginContextRequestUrl) %>",
+                        xhrFields: { withCredentials: true },
+                        success: function (data) {
+                            if (data && data.status === "redirect" && data.redirectUrl && data.redirectUrl.length > 0) {
+                                window.location.href = data.redirectUrl;
+                            } else if ($form.data('submitted') !== true) {
+                                $form.data('submitted', true);
+                                document.getElementById("identifierForm").submit();
+                            } else {
+                                console.warn("Prevented a possible double submit event.");
+                            }
+                        },
+                        cache: false
+                    });
+                }
             });
-        }
-    }
+            return this;
+        };
+        $('#identifierForm').preventDoubleSubmission();
+    });
+
+    trackEvent("page-visit-authentication-portal-identifierauth", {
+        "app": insightsAppIdentifier,
+        "tenant": insightsTenantIdentifier !== "null" ? insightsTenantIdentifier : ""
+    });
 
     // Function to show error message when username is empty.
     function showUsernameInvalidMessage() {
@@ -315,35 +334,27 @@
     <% } %>
     </div>
     <%
-        if (reCaptchaEnabled) {
-            String reCaptchaKey = CaptchaUtil.reCaptchaSiteKey();
-            String reCaptchaType = CaptchaUtil.getReCaptchaType();
-            if (!"recaptcha-enterprise".equals(reCaptchaType)) {
+    if (genericReCaptchaEnabled) { 
+        String reCaptchaKey = CaptchaUtil.reCaptchaSiteKey();
     %>
-    <div class="field">
-        <div class="g-recaptcha"
-            data-sitekey="<%=Encode.forHtmlAttribute(reCaptchaKey)%>"
-            data-theme="light"
-        >
+        <div class="field">
+            <div class="g-recaptcha"
+                data-size="invisible"
+                data-callback="onCompleted"
+                data-action="login"
+                data-sitekey="<%=Encode.forHtmlContent(reCaptchaKey)%>">
+            </div>
         </div>
-    </div>
-    <%
-            }
-        }
-    %>
+    <% } %>
 
     <input type="hidden" name="sessionDataKey" value='<%=Encode.forHtmlAttribute
         (request.getParameter("sessionDataKey"))%>'/>
 
     <div class="mt-4">
         <div class="buttons">
-            <input
-                type="submit"
-                onclick="submitIdentifier(event)"
-                class="ui primary large fluid button"
-                role="button"
-                data-testid="identifier-auth-continue-button"
-                value="<%=AuthenticationEndpointUtil.i18n(resourceBundle, "continue")%>" />
+            <button type="submit" class="ui primary fluid large button" role="button">
+                <%=StringEscapeUtils.escapeHtml4(AuthenticationEndpointUtil.i18n(resourceBundle, "continue"))%>
+            </button>
         </div>
     </div>
     <div class="ui divider hidden"></div>

diff --git a/identity-apps-core/apps/authentication-portal/src/main/webapp/login.jsp b/identity-apps-core/apps/authentication-portal/src/main/webapp/login.jsp
@@ -458,7 +458,8 @@
     <% } %>
 
     <%
-        if (reCaptchaEnabled || reCaptchaResendEnabled) {
+        boolean genericReCaptchaEnabled = CaptchaUtil.isGenericRecaptchaEnabledAuthenticator("IdentifierExecutor");
+        if (reCaptchaEnabled || reCaptchaResendEnabled || genericReCaptchaEnabled) {
             String reCaptchaAPI = CaptchaUtil.reCaptchaAPIURL();
     %>
         <script src='<%=(reCaptchaAPI)%>'></script>