menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

jQueryとPHPでCaptcha認証

  • Labs

jQuery

こんにちは(¬v¬)

PHP5.2からPHP5.3に移行した際、以前当サイトでご紹介しましたCaptcha認証が使用できなくなりました。

今後PHP5.3に対応する予定ではありますが、この際なのでjQueryで簡単に設置できるお手軽Captcha認証はないかなと探してみたらいくつか見つかりましたので、その中でも設置が簡単そうなこちらのプラグイン、jQuery Real Personを使って簡単キャプチャ認証を設置します。

Captcha認証

jQuery Real Personからプラグインファイルをダウンロードしてください。

オリジナルのサンプルもこちらを参照してください。

jQuery Real Personを解凍して展開します。パスさえ通せばそのまま使用できますが少し修正を加えてみます。realPersonBasic.htmlのファイルを開きます。

HTML

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

続いて<head>内に次コードを記述します。


<link rel="stylesheet" href="jquery.realperson.css">
<script src="jquery.realperson.js"></script>
<script>
$(function() {
	$('#defaultReal').realperson();
});
</script>

<body>内に次コードを記述します。


<form action="jquery.realperson.php" method="post" class="captcha">
<p><input type="text" id="defaultReal" name="defaultReal"></p>
<p><input type="submit" value="Submit" class="c_btn"><input type="reset" value="Reset" class="c_btn"></p>
</form>
CSS

jquery.realperson.cssのファイルを開きます。次の内容を初めから記入されているCSSの後ろに追加します。


.captcha {
	width: 275px;
	margin: 0 auto 5px auto;
	text-align: center;
}
.realperson-text {
	color: #777;
	font-size: 5px;
	text-align: center;
	background: #fff;
	border:1px solid #ccc;
	margin: 5px auto;
	padding: 5px;
}
.realperson-regen {
	color: #333;
	border:1px solid #ccc;
	width: 118px;
	padding: 2px;
	font-size: 10px;
	margin: 5px auto;
}
.c_btn {
	color: #777;
	border:1px solid #ccc;
	background: #fff;
	cursor: pointer;
	margin: 5px 2px 0 2px;
	padding: 4px 15px;
}
#defaultReal {
	width: 122px;
	height: 20px;
}

認証画像や画像変更ボタンのテキストを変更したい場合はjquery.realperson.jsのファイルを開きます。画像認証の桁数は13行目を変更。

length: 6,

画像認証のアルファベットのみかアルファベットと数字かを選択するには14行目を変更。

includeNumbers: false,
アルファベットのみはfalse
アルファベットと数字はtrue

画像変更ボタンのテキストを変更したい場合は15行目を変更。

regenerate: 'Click to change',
お好きな文字列

赤文字の箇所を適時変更してください。

Result

サンプルデモはこちら


以上Captcha認証の設置についての解説でした^^

  • カテゴリー:Labs