Captcha

[lmd01gh]

Please, Can anyone give us an insight on how the captcha procedure works and how can we integrate it in our custom projects?

Thanks a lot.

[hannoquest]

Hi, The built-in Captcha component consists of two parts:

• a client-side Angular component imx-captcha with its corresponding module in the projects/qbm/src/lib/captcha folder. This component fetches a Captcha image from the API Server and displays it
• a server-side validation service that you can integrate in a custom API endpoint to validate the user input.

You will need to pass the Captcha code to the API call, and verify it on the server like this:

        public async Task VerifyAsync(IRequest request, string captchaCode, CancellationToken ct = default)
        {
            var errorMessage = await request.MethodSet.Services.Resolve<ICaptchaValidator>().ValidateAsync(captchaCode, null, request, ct)
                .ConfigureAwait(false);
            if (errorMessage != null)
                throw new ViException(errorMessage, ExceptionRelevance.EndUser); // captcha test failed
            // captcha test passed
        }

If you want to provide some more information around your use case I can provide more guidance.

[lmd01gh]

Hi,

In our custom project we use FixedCredentials stored in the web.config file. The user can request a pin code filling the username and a recovery methods. Besides, the user have to verify a captcha to continue and modify the password.

In a client-side Angular, we use component imx-captcha, but in the server-side we don't Know to validate the user input.

As you indicate we need pass the Captcha code to our API custom, but I have some doubts:

1) to which Irequest refers?

2) In your project (passcode-login.component.ts) you use this API call to set the CAPTCHA on the server side await this.qerApiService.client.passwordreset_passwordquestions_account_post({ AccountName: this.userName, Code: resp });

Could you tell me how you do that validation on the server side?

I really appreciate your help.

[hannoquest]

Hi @lmd01gh You need to write an API method that the client can call (similar to passwordreset/passwordquestions/account). The client needs to call this method with a payload that contains both

• the CAPTCHA code
• and whatever additional information is needed to change data.

Write the API method to first call VerifyAsync (as above). IRequest is the general interface for an API request; this is passed as a parameter into the API method. I'd suggest to look at the API Sample code if you haven't already.

[lmd01gh]

Hi Hanno,

I've created the method "VerificarCaptcha" in the client-side. This method pass the captcha code to API method:

public async VerificarCaptcha() { const resp = this.captchaSvc.Response; this.captchaSvc.Response = "";
var respuesta= await this._v3Client.Customeprinsa_CCC_CompruebaCaptcha_get({Codigo:resp}) console.log(respuesta); }

In my Custom API, I've created the API method "CCC_CompruebaCaptcha" to verify it, calling to the script that you said me, but I obtain always the error: "El codigo introducido es incorrecto"

public class APIEprinsaCustom : IApiProviderFor<Customeprinsa>
{

    builder.AddMethod(Method.Define("CCC_CompruebaCaptcha")
          .WithParameter("Codigo", typeof(string))
          .HandleGet(async qr =>
          {

              var captcha = qr.Parameters.Get<string>("Codigo");
              return await VerifyAsync(qr, captcha);

          }));

        public async Task<string> VerifyAsync(IRequest request, string captchaCode, CancellationToken ct = default)
        {
            var errorMessage = await request.MethodSet.Services.Resolve<ICaptchaValidator>().ValidateAsync(captchaCode, null, request, ct)
            .ConfigureAwait(false);
            if (errorMessage != null)
            {
                return "1";

            }
            else
            {

                return "0";
            }   
        }

}

Could you please advice on how to solve this? What am I missing?

Thanks for your help and your time. Regards, Laura.

[hannoquest]

Hi @lmd01gh

I do not see any obvious problems with the code. Check if the URL of the API request to CCC_CompruebaCaptcha contains the captcha code as expected.

[lmd01gh]

Hi,

The scenario is:

1) My custom project use FixedCredential stored in the webconfig.file 2) If I use the swagger interface, calling to Customeprinsa/CCC_Compruebacaptcha (code) -> The captcha is verified correctly 2) If I use Postman (API platform), calling to Customeprinsa/CCC_Compruebacaptcha(code) -> the captcha is not verified

Is there to use some extra authenticacion, cookie, session variable or whatever that I have to use from side-client?

[hannoquest]

Hi @lmd01gh,

That is good information to have. One of the differences between the Swagger and Postman interfaces is the XSRF support. Postman does not submit the XSRF protection header value, because it does not know that it should do so.

Assuming this is what is happening, you now have a couple of options:

• don't test this use case with Postman,
• configure Postman to submit the XSRF header. There are many tutorials on how to do this, including here (disclaimer -- I have not tested this).
• disable XSRF protection tokens in the API Server. Obviously, this should never be done in a production environment.

[lmd01gh]

Hi,

At the end of the day, I'll have to use it from our generated typedclient. I tested it from Postman in case help me with the error in the validation.

The project uses fixed credentials as I mencionated. Could be the source of the error? Could be I missing something neccesary to verify captcha?

Thank you.

[lmd01gh]

Hi Hanno,

I solved the problem. Thank you for your help.