In this post, you will learn about how to implement Google Recaptcha with Angular and Spring/Java App.
Go to Google Recaptcha website and get the code for your website. The Google recaptcha code looks like following:
<div class="g-recaptcha" ng-model="g-recaptcha-response" data-sitekey="6YbGpACUBBBBBJ9pa2Km3vYeVCBV8UHYGic-dbGD"></div>
Place the code in appropriate place in login, signup pages. In the login form, it would with code such as following:
<div class="form-group no-margin"> <div class="g-recaptcha" ng-model="g-recaptcha-response" data-sitekey="6YbGpACUBBBBBJ9pa2Km3vYeVCBV8UHYGic-dbGD"></div> <button type="submit" class="btn btn-primary btn-block">Login</button> </div>
The Signup form with Google Recaptcha would look like following. The working example can be found on this signup page.
Process the code in Login/Sign up component such that unless the user has clicked on Google Recaptcha, they should not be allowed to proceed further. Pay attention to the code such as grecaptcha.getResponse() and the check related to the length of response.
declare var grecaptcha: any; @Component({ selector: 'app-singup', templateUrl: './signup.component.html', styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit { errormsg: string; constructor() { } ngOnInit() { } onSubmit() { const response = grecaptcha.getResponse(); if (response.length === 0) { this.errormsg = 'Recaptcha not verified. Please try again!'; return; } // // Rest of the code goes here // } }
Create a RecaptchaVerifier utility class for verifying recaptcha response code which arrives in request message. The following is the sample code with verify(String response) API. Pay attention to some of the following in the code given below:
@Configuration @PropertySource("classpath:application.properties") public class AppConfig { @Value("${google.recaptcha.site.key}") String googleRecaptchaSiteKey; @Value("${google.recaptcha.secret.key}") String googleRecaptchaSecretKey; @Bean public String googleRecaptchaSiteKey() { return this.googleRecaptchaSiteKey; } @Bean public String googleRecaptchaSecretKey() { return this.googleRecaptchaSecretKey; } }
import java.net.URI; import org.json.JSONException; import org.json.JSONObject; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.vf.nimki.rest.RestClient; @Service public class RecaptchaVerifier { final static Logger logger = LoggerFactory.getLogger(RecaptchaVerifier.class); private String secretKey; private RestClient restClient; private static final String RECAPTCHA_URL = "https://www.google.com/recaptcha/api/siteverify"; @Autowired public RecaptchaVerifier(String googleRecaptchaSecretKey, RestClient springRestClient) { this.secretKey = googleRecaptchaSecretKey; this.restClient = springRestClient; } public boolean verify(String recaptchaResponse) { URI verifyUri = URI .create(String.format(RECAPTCHA_URL + "?secret=%s&amp;amp;response=%s", this.secretKey, recaptchaResponse)); JSONObject jsonResponse = null; try { jsonResponse = this.restClient.get(verifyUri); } catch (JSONException e) { logger.error("Error in Recaptcha Verification: " + e.getMessage()); return false; } boolean isVerified = false; try { isVerified = jsonResponse.getBoolean("success"); } catch (JSONException e) { logger.error("Error in JSON processing: " + e.getMessage()); return false; } return isVerified; } }
The following code can be used to verify the Recaptcha response which arrives in the request message.
@PostMapping(value ="/signup") public UserDTO signup(@RequestBody UserDTO userDTO, @RequestParam(name="g-recaptcha-response") String recaptchaResponse){ LOGGER.info("Initiating the user signup processing"); boolean verified = recaptchaVerifier.verify(recaptchaResponse); if(!verified) { userDTO.setErrorcode("RECAPTCHA_VERIFICATION_ERROR"); userDTO.setErrormsg("Recaptcha verification error. Please try again!"); return userDTO; } }
In this post, you learned about how to implement Google Recaptcha in your Angular and Spring/Java app.
Did you find this article useful? Do you have any questions or suggestions about this article? Leave a comment and ask your questions and I shall do my best to address your queries.
Last updated: 08th May, 2024 In the world of generative AI models, autoencoders (AE) and…
Last updated: 7th May, 2024 Linear regression is a popular statistical method used to model…
Last updated: 3rd May, 2024 Have you ever wondered why some machine learning models perform…
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…