reCAPTCHA Enterprise in Apigee X Login page

[luisarodriguees]

I have already created a key in the same GCP project i have the apigee organization, and the process seems to be automatic: now i have reCAPTCHA challenge working, but only for sign up page.

Since we can't edit the login/sign in HTML code, how can i add reCAPTCHA key/javascript to its body?

[dchiesa1]

Since we can't edit the login/sign in HTML code, how can i add reCAPTCHA key/javascript to its body?

Which body?

If you want a webapp to transmit a recaptcha token in an API request that gets sent to Apigee, then you need to use something like this, if you use jQuery:

      grecaptcha.enterprise.execute(reCAPTCHA_site_key, {action: 'homepage'})
        .then(recaptchaToken => {

          let baseurl = `https://my-api-endpoint`, 
              postbackEndpoint = `${baseurl}/my-api-basepath/whatever`;

          let payload = { 
                recaptchaToken,
                /* other fields here ... */ 
          };

          // post back to an API endpoint. The thing on the other end (maybe an 
          // Apigee-hosted API proxy) must extract the token from the payload, then 
          // call to the Google recaptcha endpoint using the site key secret, to 
          // ask for the 'score' for this token.  And then it can enforce based on
          // that score.
          
          let jqxhr = $.ajax({
                url: postbackEndpoint,
                method: "POST",
                data: JSON.stringify(payload),
                contentType: 'application/json',
                dataType : 'json' // expected response datatype
              })
            .done(responseData => {
              // The Apigee endpoint has returned something valid.
              // Do whatever is necessary here.
            })
            .fail((response, error, exc) => {
              window.alert( "error: " + exc);
            });
        });

I guess you'd be able to translate that to your own webapp framework (angular, or react, etc) on your own.

The browser will show an opaque "promise error" in this method if this page is hosted on a domain which does not match the domain set for the given site_key. The little recaptcha badge will show a warning message.

But I have one doubt. You wrote in your title

Apigee X Login page

Are you talking about authenticating administrators or API operators? There is no Apigee X login page. To authenticate to Apigee X as an administrator, you need to use Google Identity. And if you want to use reCAPTCHA for that, then that is a matter of the Identity Provider you use. (SAML provider I guess).

[luisarodriguees]

Hello, Dino.

I'm sorry for not being able to describe my problem clearly;  Apigee terminology is a new topic for me.

I was referring to the fact that i can't edit the HTML content of my Developer Portal login/sign up page, because it's not listed in "Pages" inside Apigee UI. And that's why i can't add the javascript generated by reCAPTCHA Enterprise.

[dchiesa1 · Accepted solution]

Hello Luisa,

and thank you for clarifying your question for me!

Currently, it is not possible to customize the login/signup page in the Integrated Developer portal.  There is an outstanding feature request, to allow more flexibility in the signup / login experience. The plan is to use Google Identity Platform with the Integrated Developer Portal.  Identity Platform works with reCAPTCHA.  There are also lots of other options - support for MFA and customization for user registration and sign-in.  Unfortunately, I cannot give you a specific timeframe for when this might be available. All I can tell you is that it's in our product roadmap plan. 

[luisarodriguees]

Thank you again for your help!

Best regards.