プログラミング

formrunにreCAPTCHAを設置したら「サイト所有者のエラー」が出たので解決してみた。

formrunを使ってサイトにフォームを設置したんだけど、reCAPTCHAに「サイト所有者のエラー:サイトキーが無効です」と表示されてしまう…。

多くの場合、エラーメッセージでググれば解決策にたどりつけるのですが、このエラーの解決策が見つからず、自力で解決したので備忘録です。

前提

  • 30DAYSトライアルの「DAY18~20. ポートフォリオサイトを作る」に沿ってポートフォリをサイトを作成中
  • 講座で紹介されていた「formrun」というサービスを使って、ポートフォリオサイトに「お問い合わせフォーム」を実装
  • フォームは「フォームクリエイター」ではなく「コード型」で作成
  • フォーム送信時に「私はロボットではありません」のチェック機能を入れるため、reCAPTCHA を設定しようとしたらエラーが出てつまづいた(←この記事で解決)

はじめに

まずは完成形から。

↑これが、formrunで作成したフォームの部分です。 

赤枠の部分に「私はロボットではありません」というチェックボックスがあります。

 

次にエラー画面です。

↑赤枠の部分に「サイト所有者のエラー:サイトキーが無効です」と表示されています。

 

この記事では、エラーを解消し、前述の完成形に持っていった解決法を紹介します。

 

事前設定

formrunでreCAPTCHAを使うには、formrun、Google reCAPTCHAそれぞれで準備が必要です。

※reCAPTCHAはGoogleのサービスなので、Googleアカウントが必要です。

Google reCAPTCHA

Google reCAPTHAのサイトに行って、reCAPTHAを設置したいサイトを登録し、「サイトキー」「シークレットキー」を取得します。

Google reCAPTHA

↓画面右上の「Admin Console」をクリック。

 

↓画面右上の「+」をクリック。

 

↓必要項目を入力したら、利用条件に同意して「送信」をクリック。

  • ラベル → 任意で入力
  • reCAPTCHAタイプ → reCAPTCHA v2 を選択
  • ドメイン → reCAPTCHAを設置するドメインを入力

 

↓下の画面まで来たらGoogle側の設定は完了ですが、サイトキーとシークレットキーは後ほど使うので画面は閉じないでください。

formrun

formrunのアカウント登録やコード型フォームの作り方 ・公開方法などは、公式に詳しく載っているのそちらを参照してください。

ここでは、公開済みのコード型フォームにreCAPTCHAを追加する…という前提で進めていきます。

 

↓「フォーム設定」画面を開く。

  1. 「Google Recaptchaを使用する」にチェック
  2. 先ほど取得した、Google reCAPTCHA の 「シークレットキー」を入力
  3. 「更新する」をクリック

これで事前設定が完了です。

 

サイトにreCAPTCHAを実装する

いよいよ、サイトにreCAPTCHAを実装していきます。

HTMLファイルに必要なコードを追加していきます。

  • </head>タグの直前に下記コードを追加。
  • <body>〜</body>内のreCAPTCHAを表示させたい位置に下記コードを追加。

「your google recapcha site key」の部分は、先程取得したGoogle reCAPTCHA の 「サイトキー」に置き換えてください。(←これに気づくのにめっちゃ時間かかりました…。)

これで「サイト所有者のエラー:サイトキーが無効です」のエラーが解消されてreCAPTCHAが機能すると思います。

ぜひお試しください。

まとめ

formrun で Google reCAPTCHA を実装する際「サイト所有者のエラー:サイトキーが無効です」のエラーが出た時の確認手順。

  • HTMLタグに自分のサイトキーを埋め込んでいるか

    *「your google recapcha site key」を、自分のreCAPTCHAのサイトキーに置き換えているか

 

  • Google reCAPTCHAの設定画面で、ドメイン欄に登録されているのは「ドメインのみ」か
    *「https://」などが入力されていないか