Research: Check robot (US-3)

[LuongDangDoanh]

Use reCAPCHA by google provide There are 2 main reCAPCHA verson: V3 and V2

• V2:
  • use extension checkbox (you usually see that 'i'm not a robot' checkbox)
  • use hidden reCAPCHA (choice)
  • use reCAPTCHA SafetyNet for Androi (choice)
• V3:
  • Returns a score that measures the user's humanity
  • learn by seeing real traffic on your site
  • does not interrupt user flow Link: Cloud reCAPCHA google: https://cloud.google.com/security/products/recaptcha Link reCAPCHA dev google: https://developers.google.com/recaptcha?hl=vi

[tientran1234]

These are the steps to create captcha code: step 1: you should access to :https://www.google.com/recaptcha/admin/create to create dashboard for app +add your domain to google connect with your app

• you will recieve a key to use with your code after that you will see a dashboard show a request with you app step 2:
• install this library npm install react-google-recaptcha-v3 you can find more information in: https://www.npmjs.com/package/react-google-recaptcha-v3?activeTab=readme
• Attention If you use the script tag provided by Google when you open F12 (or dev tools) the user will see your key so you need to hide that key so you should use this library to help it hide the key. You should find more information in this library's github

This flow:

• FE calls Capcha
• Capcha pays 1 token to FE
• FE includes the token in the request to BE
• BE checks the token to see the trust score and decides whether to make the request or not
• BE responds to FE

[tientran1234]

the differences between the methods: 1. Using the GoogleReCaptcha Component: Features: -Approach: Used as a regular React component -useEffect Hook: The GoogleReCaptcha component wraps around the useGoogleReCaptcha hook and uses useEffect to run the verification. -onVerify Prop: The onVerify function is called when verification is successful. -refreshReCaptcha Prop: Allows you to force reCaptcha to revalidate, for example, using a timestamp. Advantages: -Simple and easy to use if you are familiar with React components.No need to manually check if reCaptcha has loaded. Disadvantages: -Inline functions in the onVerify prop can cause infinite loops. 2. Using the useGoogleReCaptcha Hook features: -Approach: Uses a React hook to perform reCaptcha verification. -useGoogleReCaptcha Hook: Returns the executeRecaptcha function for calling verification. -Manual Check: You need to check if executeRecaptcha has loaded successfully. Advantages: -More flexible, allowing precise control over when reCaptcha verification occurs. -Suitable for scenarios where verification is needed in different events (e.g., button click, form submission). Disadvantages: -Requires you to handle the loading state of reCaptcha manually. -Requires understanding of React hooks. 3. Using the withGoogleReCaptcha HOC: features: -Approach: Uses a Higher Order Component (HOC) to wrap your component. -googleReCaptchaProps Prop: Injects the executeRecaptcha function into the wrapped component. Advantages: -Easy to use if you are familiar with HOCs in React. -Separates reCaptcha logic from the main component logic. Disadvantages: -HOC might be deprecated in future versions of the library. -Less flexible compared to hooks, especially in complex applications.

Summary GoogleReCaptcha Component: Ideal for simple use cases and easy integration, but be cautious with inline functions. useGoogleReCaptcha Hook: More flexible and suitable for complex applications, but requires manual loading state management. withGoogleReCaptcha HOC: Good for separating reCaptcha logic, but potentially less flexible and might be deprecated.

[tientran1234]

Demo: https://drive.google.com/drive/folders/1RB9Xvz6l18fZVYZPJrYyvZWlZ06PWHvX?usp=share_link