Gatsby製ブログにreCAPTCHAを設定した際のメモを残します。
Githubにも公開しているので、そちらも参考にしてみてください。
react-google-recaptchaをインストールyarn add react-google-recaptchaAdmin Consoleにログインして、新しいサイトを登録します。
https://www.google.com/recaptcha
注意点として、reCAPTCHAタイプはv2を指定する必要があります。
また、サイトキーと、シークレットキーはNetlifyに登録するので控えておきます。
Netlifyの Site settings > Build & Deploy > Environment よりSITE_RECAPTCHA_KEYとSITE_RECAPTCHA_SECRET
を登録します。
Site settings > Forms > Form notification より、通知設定を行います。
Freeプランでは、emailとSlackが選べます。
emailの設定方法は特に迷うことはないです。
また、Slackとの連携方法は割愛します。（ドキュメントを確認してください。）
.env.productionとcontact.jsを修正します。
.env.productionに以下を記述します。
SITE_RECAPTCHA_KEY=<reCAPTCHAのサイトキー>import Recaptcha from 'react-google-recaptcha';
const RECAPTCHA_KEY = process.env.SITE_RECAPTCHA_KEY;
export default class Contact extends Component {
handleRecaptcha = (value) => {
this.setState({ 'g-recaptcha-response': value });
};
render() {
return (
<Layout>
<div>
<Heading as="h1">お問い合わせ</Heading>
<Box
as="form"
name="contact"
method="post"
action="/thanks/"
data-netlify="true"
data-netlify-honeypot="bot-field"
data-netlify-recaptcha="true"
onSubmit={this.handleSubmit}
>
... 省略 ...
<Recaptcha
ref="recaptcha"
sitekey={RECAPTCHA_KEY}
onChange={this.handleRecaptcha}
/>
... 省略 ...
</Box>
</div>
<AvatarLinks />
</Layout>
);
}
}reCAPTCHAの設定部だけ抜き出しています。
実装の詳細は、https://github.com/junpeko5/my-tech-blog/blob/master/src/pages/contact.jsを確認ください。