Astroで作ったWebサイトにreCAPTCHA v3を導入する機会があったので、備忘録として残しておきます。 reCAPTCHA v3とは? お問合せフォームでよく見かけるアレです。 フォームが設置されているページにreCAPTCHAを導入することで、スパムの送信を防ぐことができます。 また、reCAPTCHA v3ではバックグラウンドでユーザーの動きを検証しスコアを判定するので、「私はロボットではありません」のチェックボックスやイライラする画像の選択などの操作は不要になります。 実装例 Astro + Vercel Serverless Functionsでの実装例を紹介します。 今から説明するコードは、すべて以下リポジトリにあります。 デモサイトもこちらで公開しているので、実際の動きも確認できます。 1. reCAPTCHA v3の設定 reCAPTCHA v3のコンソールにて新し
Firebase Hostingを使えば静的なWebサイトを手軽にホスティングできます。しかし、Webサイトは静的な情報だけでは物足りないものです。たとえばお問い合わせフォームなど、動的な要素も組み込みたくなるでしょう。 Firebase HostingにはCloud Functions for Firebaseと連携して動的コンテンツやAPIを追加する機能があります。今回はその機能を使ってお問い合わせフォームを作ってみました。 Hosting側の設定 firebase CLIでプロジェクトを作成したら、firebase.jsonを開きます。そして、次のようにリライト条件を追加します。 "rewrites": [ { "source": "/functions/**", "function":"contact" } ] Hosting側にて、HTMLでお問い合わせフォームを作ります。今回は
[2024年1月10日、19日追記] GmailとYahoo!側のアップデートに合わせていくつか細かい説明を追加しています(大筋は変わっていません)。変更点だけ知りたい方は「追記」でページ内検索してください。 2023年10月3日、Googleはスパム対策強化のため、Gmailへ送るメールが満たすべき条件を2024年2月から厳しくすると発表しました。また米国Yahoo!も、2024年2月 第一四半期[1] から同様の対策を行うと発表しています。端的に言えば、この条件を満たさないと宛先にメールが届かなくなるという影響の大きな変更です。 この記事では、Gmailや米国Yahoo!の規制強化への対応方法を解説します。ただし米国Yahoo!にメールを送る人は多くないと思うので、フォーカスはGmail寄りです。また、メール配信サービス(海外だとSendGridやAmazon SES、国産だとblas
この記事は Firebas Advent Calendar 2020 18 日目の記事です。 SSG や SPA サイトを構築する際に迷うのがお問い合わせフォームの実装です。 今回は Firebase Trigger Email を使って手軽に実装する方法を解説します。 何を作る? こんな感じのお問い合わせフォームを作ります。 フォームを入力し送信ボタンを押下すると、管理者とフォーム記載のメールアドレス宛に以下メールが送られます。 (CodeSandbox はサンプルです。送信ボタンを押してもメールは送信されません) 管理者側 お問い合わせ実行ユーザー側 技術スタック及び構成は以下の通りです。 これから解説するコードは全てこちらのリポジトリにあります。 Firebase Trigger Email とは? Firebase Trigger Email は Firebase Extensio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く