<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>reCAPTCHA &#8211; Blog | Samurai Web Works サムライウェブワークス -ロサンゼルスのウェブデザイン会社-</title>
	<atom:link href="https://samurai-web-works.com/info/tag/recaptcha/feed/" rel="self" type="application/rss+xml" />
	<link>https://samurai-web-works.com/info</link>
	<description></description>
	<lastBuildDate>Tue, 23 Mar 2021 08:59:30 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.2.18</generator>
	<item>
		<title>(新) Google reCAPTCHA V2 リキャプチャ設置、設定方法</title>
		<link>https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v2/</link>
				<comments>https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v2/#respond</comments>
				<pubDate>Sun, 08 Oct 2017 09:53:24 +0000</pubDate>
		<dc:creator><![CDATA[admin]]></dc:creator>
				<category><![CDATA[ウェブお役立ちTool, 制作Tips]]></category>
		<category><![CDATA[reCAPTCHA]]></category>
		<category><![CDATA[スパム防止]]></category>
		<category><![CDATA[セキュリティ]]></category>

		<guid isPermaLink="false">https://samurai-web-works.com/info/?p=237</guid>
				<description><![CDATA[<p>こちらは、クリックタイプの (以前の) reCAPTCHA 設置方法です。 新しい reCAPTCHA V3  [&#8230;]</p>
<p>投稿 <a rel="nofollow" href="https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v2/">(新) Google reCAPTCHA V2 リキャプチャ設置、設定方法</a> は <a rel="nofollow" href="https://samurai-web-works.com/info">Blog | Samurai Web Works サムライウェブワークス -ロサンゼルスのウェブデザイン会社-</a> に最初に表示されました。</p>
]]></description>
								<content:encoded><![CDATA[<div class="theContentWrap-ccc"><a href="https://samurai-web-works.com/info/wp-content/uploads/2017/10/blog-samurai-web-recaptcha-v2.jpg" data-rel="lightbox-image-0" data-rl_title="" data-rl_caption="" title=""><img src="https://samurai-web-works.com/info/wp-content/uploads/2017/10/blog-samurai-web-recaptcha-v2.jpg" alt="" width="528" height="245" class="alignnone size-full wp-image-247" srcset="https://samurai-web-works.com/info/wp-content/uploads/2017/10/blog-samurai-web-recaptcha-v2.jpg 528w, https://samurai-web-works.com/info/wp-content/uploads/2017/10/blog-samurai-web-recaptcha-v2-300x139.jpg 300w" sizes="(max-width: 528px) 100vw, 528px" /></a>

<h3 style="font-size:20px; font-weight:700;">こちらは、クリックタイプの (以前の) reCAPTCHA 設置方法です。
<br>新しい reCAPTCHA V3 の設置方法については、<br><a href="https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v3/" target="_blank" rel="noopener noreferrer">(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法</a> をご覧下さい。</h3>

<p class="mB20">&#8220;reCAPTCHA リキャプチャ&#8221; は、現在メールフォーム、もしくは会員登録の際等に用いられるスパム防止機能です。こちらは、クリックで認識する新しいタイプ (reCAPTCH V2) の設置方法を記していきます。</p>
<span id="more-237"></span>
<h2>Google reCAPTCHA に登録してAPIキーを入手する</h2>

<ol class="mB50">
	<li>まず始めに　<a href="http://www.google.com/recaptcha/intro/" target="_blank" rel="noopener noreferrer">http://www.google.com/recaptcha/intro/</a> <br />Google reCAPTCHA ページにアクセス、右上の青ボタン Get reCAPTCHA をクリック。Google アカウントをお持ちの方はそのまま次へ、無い方は登録して頂く必要があります。 <a href="https://samurai-web-works.com/info/wp-content/uploads/2017/10/reCAPTCHA-setting.jpg" data-rel="lightbox-image-1" data-rl_title="" data-rl_caption="" title=""><img src="https://samurai-web-works.com/info/wp-content/uploads/2017/10/reCAPTCHA-setting.jpg" alt="" width="600" height="702" class="alignnone size-full wp-image-246 mT10 mB10" srcset="https://samurai-web-works.com/info/wp-content/uploads/2017/10/reCAPTCHA-setting.jpg 600w, https://samurai-web-works.com/info/wp-content/uploads/2017/10/reCAPTCHA-setting-256x300.jpg 256w" sizes="(max-width: 600px) 100vw, 600px" /></a></li>
	<li class="mB15">次に各情報を入力します。<br>Label には任意の情報を (登録するウェブサイトのコンタクトフォーム等) 、<br>Choose the type of reCAPTCHA では、ウェブサイトの場合はreCAPTCHA V2 を選択。<br>するとドメインが入力される様になるので、ドメインを入力。こちらは基本は1つでいいはずです。最後に Terms of Service をクリックして登録。</li>
	<li>その後 <strong>Site Key</strong> <strong>Secret Key</strong> の2つが生成されていると思います。<br><strong>Site Key</strong> は後に貼り付けるJavascript に使います、<br><strong>Secret Key</strong> はサーバー側に使用する PHPコード (PHPの場合) に使用します。<strong>Secret Key は表に出さない様に気おつけて下さい。</strong></li>
</ol>
<h2 class="text_red">head タグ内に以下のコードを貼り付け (head の閉じる直前に)</h2>

<pre class="brush: jscript; title: ; notranslate">
&lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;
</pre>

<h2 class="text_red mT50">次に、Javascriptコードをフォームに貼り付ける</h2>
<p class="mB20">自分のフォームに実際にreCAPTCHAを設置します。まずは表側、下記のJavascriptを好みの場所に設置します。通常は送信、確認ボタン直前に入れるのがいいかと思います。ここの <strong>data-sitekey</strong> に先程入力したサイトキーを入力して下さい。</p>

<pre class="brush: jscript; title: ; notranslate">
 &lt;div class=&quot;g-recaptcha&quot; data-sitekey=&quot;Site Keyを入力&quot;&gt;&lt;/div&gt;
</pre>

<p class="mT20 mB50">これで自分のフォームに reCAPTCHA が設置されたはずです。（必ず入手したAPIがドメインと符号しているのを確認して下さい。違うドメインの物だと表示されません。）しかしこのままでは動きませんので、次はサーバー側の設定に移ろうと思います。</p>

<h2 class="text_red">PHPの設定をする</h2>
<p class="mB20">次はサーバー側の設定。Ajaxやその他の言語の設定方法もあるそうなのですが、今回はPHPでの設定を説明したいと思います。今回は、メールの受取側のスクリプトに以下のコードを設置。</p>

<pre class="brush: php; title: ; notranslate">
&lt;?php
$captcha;
if(isset($_POST['g-recaptcha-response'])){
  $captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
  echo '&lt;h2&gt;reCAPTCHA にチェックを入れて下さい。&lt;/h2&gt;&lt;br&gt;';
  echo &quot;&lt;a href=\&quot;javascript:history.go(-1)\&quot;&gt;Go Back&lt;/a&gt;&quot;;
  exit;
}
$response=file_get_contents(&quot;https://www.google.com/recaptcha/api/siteverify?secret=Secret Keyを入力&amp;response=&quot;.$captcha.&quot;&amp;remoteip=&quot;.$_SERVER['REMOTE_ADDR']);
?&gt;
</pre>

<p class="mT20 mB20">今回は <strong>Secret Key</strong> を使います。<strong>secret=</strong> 内に取得したコードを入れて下さい。受け取りに失敗した場合、のメッセージは必要に応じて書き換えて下さい。</p>

<p class="mB20">後はこのコードをメールの受取のスクリプト内に組み込みます。以下に簡単なフォーム例を作りましたので、参考にしてみて下さい。実際メールは送信されないので試してみてもらっても結構です。</p>

<p class="mB20"><a href="http://ja.samurai-web-works.com/demo/recaptcha-v2.html" target="_blank" rel="noopener noreferrer">http://ja.samurai-web-works.com/demo/recaptcha-v2.html</a></p>
<p>いかがでしたでしょうか？実際 PHP コードに組み込むと、なると多少のコード書き換え知識が必要になります。今回は、reCAPTCHA 部分のみの公開にさせて頂きますが、これで基本的な Google reCAPTCHA リキャプチャ設置 はお分かりになったと思います。<br>前のバージョンの物より大分シンプルな設置方法になったと思います。</p>
</div><p>投稿 <a rel="nofollow" href="https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v2/">(新) Google reCAPTCHA V2 リキャプチャ設置、設定方法</a> は <a rel="nofollow" href="https://samurai-web-works.com/info">Blog | Samurai Web Works サムライウェブワークス -ロサンゼルスのウェブデザイン会社-</a> に最初に表示されました。</p>
]]></content:encoded>
							<wfw:commentRss>https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
							</item>
	</channel>
</rss>
