recaptcha configuration
pbran opened this issue · comments
I'm having some problems getting recaptcha to work.
I get the red message "ERROR for site owner: Invalid site key".
I have obtained a site key and private key for my domain and added them to API Gateway -> Prod -> Stage Variables and subsequently added them to
When I use Chrome Developer Tools to examine what the browser is receiving the site key is still undefined.
I did wonder if there was a naming mis-match between the names in API Gateway and those in the html templates or javascript files but I'm not convinced that I can fix it.
Hi,
yes I think it is a naming mismatch. I will take a closer look at the code later. But for now I think that you can try editing the uploaded lambda for contact: https://github.com/sirceljm/aws-lambda-blog/blob/master/lambdas/src/public/contact.js#L26.
You can edit it inline in your AWS console.
change the line 26 to:
var captcha_sitekey = event.recaptcha_siteKey;
Hi,
thanks for writing this. I appreciate the effort that must have gone into it.
I've tried that change but sadly it's still showing as undefined. I've tried adding some debugging using console.log() and any new stage variables I've add are not being picked up, even after doing another deployment.
I'm even more puzzled now. I reinstalled from scratch and then made your edit to contact.js as above because the variable matches the stage variable. Still nothing so I've added some debugging like this:
var captcha_sitekey = event.recaptcha_siteKey;
console.log('captcha_sitekey is ', captcha_sitekey)
console.log('objects_table is ', objects_table)
console.log('site_base_url is', site_base_url)
The CloudWatch logs objects table is defined but the other 2 are not. They were all created by the advanced install script at the same time so something else must be affecting these variables. The site base url being undefined also has affected the footer on the contacts page which is kind of understandable now.
I took a closer look and found out that names are indeed messed up. This should fix your problem on the frontend:
Go to API Gateway -> api name for your blog -> Resources -> /contact -> GET -> Integration Request -> Body Mapping Templates and click on application/json
Small code editor should appear and you replace the code there with this code:
{
"posts_table": "${stageVariables.posts_table}",
"objects_table": "${stageVariables.objects_table}",
"captcha_sitekey": "${stageVariables.recaptcha_siteKey}",
"template": "${stageVariables.template}"
}
You should put your Lambda function code back as it was in the begining. This should render the captcha properly on the frontend. But there is still an issue with the message sending endpoint /send-message.
I will get back to you for this as well.
Hope this helps you for now.
Thanks very much.
Apart from pressing the SAVE button is there anything else I need to do after editing the Body Mapping Template and putting recaptcha_siteKey back to captcha_sitekey since it's already mapped via this template.
The error is still there after the edit, does it need to be redeployed or anything ?
Yes, sorry I forgot. You need to redeploy the API Gateway. Go to Actions -> Deploy API
Answering my own question here. Yes I went back to the front of the API and redeployed it and the contact page is now showing the recaptcha front end.
"site_base_url": "${stageVariables.site_base_url}",
that also needs adding to the Body Mapping Templates for 'contact' and 'about' to fix the copyright in the footer.
Does this log output help with the send_message.js problem ?
Unable to import module 'send_message': Error
at webpackMissingModule (/var/task/send_message.js:49:82)
at Object.module.exports.slice (/var/task/send_message.js:49:168)
at webpack_require (/var/task/send_message.js:21:30)
at /var/task/send_message.js:41:18
at Object. (/var/task/send_message.js:44:10)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
Yes I got he same when I was checking it out. I will take a look at it later this day. Thanks for helping out with this.
It was a problem with validator library not being installed during the install process. Now I added it and it should work. Please download the newest package or pull the master branch if you are working with git. And install again. This would be the easiest way. If you will just overwrite the install make sure that you delete the _sendMessage lambda function first. Please also take note that you should only install on Ireland, N. Virginia and Oregon as only those regions are supporting SES. Hope this helps you.
Thanks Matej,
perhaps I'm missing a step here. I've done a git pull and got the changes to package-lock.json and package.json . I deleted the _sendMessage lambda function and re-ran node install_advanced.js so that the _sendMessage is created again. When I try to send an email from the contacts page it appears to run but I don't get the email and this "Unable to import module 'send_message': Error" is still in CloudWatch afterwards.
You need to run npm install before you run node install_advanced.js
Ahh thanks. I'm learning all the time.
Attached is a modified install_API_Gateway_definitions.json file with the fixes in I applied on the fly yesterday. I tried pushing to a new branch but got permission denied. Oh and json attachments aren't allowed either hence the .txt.
If you want to push your changes you can do so by making a fork of this repository (icon in the top right). Then push your change to that repository. After that you can make a pull request and I will review it and merge it. If you need any help let me know and I will help you.
Thank you for your enthusiasm. I appreciate it. :)
No problem. You did a huge amount of work on this so far. Since I'm using it the least I can do is help in some small way.
Thanks for the pull request. I hope you will be using the project for your blog. I am also working on a sililar project but it is more developer oriented. I will let you know when I publish it.