I am currently developing an application with Angular 2 and wish to employ the use of Google's ReCaptcha for user verification. However, all of the community created modules I have seen thus far don't seem to make use of server side authentication with the secret key that is provided once you sign up for the API.
I previously implemented the ReCaptcha using the explicit render functionality with Javascript. However, I am unsure how to implement the same functionality within my Angular 2 Typescript Code. Ideally, I would like to have the user click the ReCaptcha, have a submit button appear once the ReCaptcha is completed that allows the user to submit the form, and then my backend server would finish the final verification that includes the secret key. This would be done via an http.post call. However, submitting normally does not provide me with the "g-recaptcha-response" that I am supposed to be getting sending via http.post when an user submits the form as described in the ReCaptcha guides:
https://developers.google.com/recaptcha/docs/verify
If anyone has any tips or experience please let me know. Also if there is additional information needed please ask, I am relatively new at posting questions here.
There is a fantastic post explaining this in angular2. I think that may give you idea how to approach this.
You have to make call to your backend server after user click your recaptcha button. After this you can send your site key to google recaptcha api for verification.
app.get('/validate_captcha', (req, res) => {
const options = {
method: 'POST',
uri: 'https://www.google.com/recaptcha/api/siteverify',
qs: {
secret,
response: req.query.token
},
json: true
};
rp(options)
.then(response => res.json(response))
.catch(() => {});
});
This will help you through the backend side.
As said in this article or document, you will get grecaptcha-response in the frontend.
Look into this link recaptcha