How to handle server side verification?

[i5hi]

Hi

Thanks for creating this library.

I am not clear on how to validate the solution for this on the server side.

Please suggest an existing server side implementation that can be used with this library.

Cheers!

[i5hi]

https://npm.io/package/@slider-captcha/core

This node.JS package has an implementaion of server side creation and verification of the CAPTCHA challenge.

[BrianTV98]

Because the mechanism is different, I will suggest another way to solve this problem.
But first, I'll explain a little bit about how the current library works:
Basically the library uses the theory of renderObject. Inheriting SingleRenderObject.
Using SingleRenderObject will allow passing a widget through constructor. Based on renderObject's rendering mechanism, I will randomly generate 1 point inside the widget just passed in. From there I will cut a part based on the previous path (hardcode), and over paste a render layer of similar size and color decided by the client. The clipped part will be returned to the point (X=0, Y), when changed, it will update the X coordinate.

For server-side authentication. I wish that the puzzle piece cutting will be done from the server side, Including 2 problems.

1. Puzzle .
2. The image has been covered with the puzzle piece.
   And return these 2 images to the client side.
   The client will execute the puzzle piece. When the client releases the hand, I will send the result to the server, The content of the result will include:

• ID of this authentication session,
• The last position that the client manipulates (As a percentage of the size of the image)

The server will check the correctness and return the result. If the result is false then the authentication session will be reloaded (client auto get new image and puzzle )

[i5hi]

okay i think i get the general idea (although i am not too sure about how renderObject works)

Since the mechanism is different - it would require extending the library to add two new functions with the following spec:

• getServerPuzzle: server must provide
  • one complete image with a cropped out smaller piece (maybe there should be a spec for a size)
  • one image of the smaller cropped piece
  • additionally, it will provide the Y coordinate as a starting point and how many divisions to make for the X coordinate (slider range)

This makes the solution basically guessing a number between a range.

• submitServerPuzzle: sends back to the server the X coordinate based on the slider position.

The server will have to replicate the logic that you are currently performing on the client side, where it takes an image and randomly selects a point X,Y in the image and crops it out.

[i5hi]

Actually, on reading your post again, size spec and X coordinate range is not required because as you mentioned the solution can be a percentage of the size of the image.

[BrianTV98]

Exactly, the authentication is based on the X position (of the puzzle),
Different from the web, the unit of measurement of the web platform is pixels, the mobile side will be db, 1 dp can be from 1 to 4 pixels depending on the device. So I want to replace the result submitted to the server as % of the distance from the right edge of the image to the left edge of the puzzle (Maximum
= 1) instead of calculating the exact X,Y coordinates.
The aim of this is to minimize the problem of errors arising from devices with strange designs, or strange sizes.

[BrianTV98]

@i5hi I hope to get a demo api for captchar generation soon before getting into the submission issue later. If you already have the api link please send it to me, with the document

[i5hi]

Hey!

I quickly put this together to prototype, there is some more work left to do which I will complete by tomorrow.

https://github.com/i5hi/slider_captcha_server

The spec is basically as follows:

1. GET /puzzle

Request: no params

Response:

       "request_id": request_id,
       "puzzle_image": image_to_base64(slider_puzzle.cropped_puzzle),
       "piece_image": image_to_base64(slider_puzzle.puzzle_piece),
   };

Pending: This needs to also send back the Y coordinate which represents the starting point. I also need to test if the base64 returned properly converts to the png.

2. POST /puzzle/solution

Request: ?request_id=$request_id&solution=$solution

Response: 200 OK / 400 Bad Request

[i5hi]

I've written this as a library so that anyone can use their web framework of choice and just import the library.

The actix server is just an example way to use.

The dart client can enforce the required spec and if someone wants to use that client they just have to make sure their server follows that spec.

[BrianTV98]

Can you deploy it with 1 free hosting.Deploy source BE is not easy for mobile developers.

[i5hi]

Can you deploy it with 1 free hosting.Deploy source BE is not easy for mobile developers.

There are instructions to run it as localhost. If I deploy it you might have CORS issues in development.

I can provide all instructions to run it locally in the README.MD

If you have any questions I will gladly improve the docs to make it completely clear.

[i5hi]

Also since it is also still in development deploying it and constantly updating will be challenging, but I will certainly deploy it once it is stable.

[BrianTV98]

Also since it is also still in development deploying it and constantly updating will be challenging, but I will certainly deploy it once it is stable.

Oke! I'm run success

.

[i5hi]

great!

cargo test is only for library testing

use cargo run --example actix if you want to run the server.

Then you can access http api at localhost:18080

I just pushed an update. Please pull the latest version. It has updated the routes.

One question I had, when i generate the random coordinate to start cropping, it is the starting point from top left of the puzzle piece. It is not the center. Is this correct or does it have to be the center of the piece?

[i5hi]

Actually, give me a few hours. There is a bug in the verification endpoint. I will post back when you can pull and test.

[i5hi]

Done and documented. You can update.

[BrianTV98]

Actually, give me a few hours. There is a bug in the verification endpoint. I will post back when you can pull and test.

I checked it.

it seems that the cropped piceImage is already more than twice its original size

[BrianTV98]

[i5hi]

taking a look.

[i5hi]

Tested the resulting base64 piece_image here:

https://base64.guru/converter/decode/image/png

Seems okay.

Maybe this is an issue in parsing base64 to png in flutter?

Note the image type is png, maybe this is causing an issue?

Is there any preffered image type?

[BrianTV98]

Thank you! I found the cause. I have started running tests on branch issue28_support_server. Everything is still in its infancy and in the process of being improved

[BrianTV98]

@i5hi
I have finished building a template that allows connecting to the server. You can fork to further tweak the interface and mechanics to better suit your project.

[i5hi]

Cheers!

[yshwanth]

Desktop version of piecepuzzle is 3 to 4 larger than crop. Is it because of desktop image has pixel format ?
Not a issue on mobile layout.

[yshwanth]

Desktop version of piecepuzzle is 3 to 4 larger than crop. Is it because of desktop image has pixel format ?
Not a issue on mobile layout.

If we wrap slider component in Container of fixed box constraints ,is possible to resolve ?

[BrianTV98]

It is issue. try putting the sidebar and image together in the same layout. and the size of the image must scale to fit the layout