それでも、次のプロジェクトの認証フォームにcaptchaをインストールする必要に直面し、ページ上に大量の
この記事では、シンプルで便利なYandex-Clean Web APIの本格的でモダンで機能的なキャプチャへの変換について説明します。 承認モジュールについて話し始めたので、新しいキャプチャがモジュールとどのように連携するかを示すのが適切だと思います。
必要なのは：
Yandex API-クリーンWeb 。
ネイティブのjsを愛する人は他に何も必要ないと思う
まず、Yandex APIを見てみましょう。最初に必要なキャプチャを取得する必要があるからです。 ドキュメントを読んだ後、実際にそれを返すクラスを書きます：
class_yandex_capcha.php
class yandexCaptcha { static function get() { $lang = $_SESSION['lang']; if ($lang == "ru") { $type = "std"; } else { $type = "estd"; } $key = " API "; $xmlResponse = file_get_contents("http://cleanweb-api.yandex.ru/1.0/get-captcha?key=".$key."&type=".$type); $xml = simplexml_load_string($xmlResponse); return $xml->url; } }
すべてが非常に簡単です-パラメーターを使用してGETリクエストを送信します。
$キー-Yandex APIキー、 ここから入手できます
$ type-取得するcaptchaのタイプ、変数で受け入れられる値は、Yandexのドキュメントで完全に説明されています。
私の場合、このサイトは複数の言語をサポートしています。したがって、言語に応じて、 std-ロシア語の数字とYandexロゴ、またはestd-数字でも英語のロゴを選択します。
yandexCaptcha :: get（）メソッドが画像アドレスを返すようになりました-これがキャプチャです。
“ captcha picture url” xmlに加えて、メソッドリクエストは別のパラメーターcaptchaを返しますが、そのためにちょっとしたトリックがあります
たとえば、セッションでcaptchaパラメータを保存することはできません。 それは一般的に保存することはできません、なぜ-私はもう少し説明します。
クラスの準備ができたら、サイトの認証ページのモデルに埋め込みます。
model_closed.php
class model_closed extends model { function get_data() { $root = $_SERVER['DOCUMENT_ROOT']; $dataArray['language'] = parse_ini_file($root."/app/languages/".Route::$lang."_closed.ini"); $dataArray['base_href'] = $_SERVER['HTTP_HOST']; require_once($root."/app/core/class/class_yandex_capcha.php"); $dataArray['capcha_url'] = yandexCaptcha::get(); return $dataArray; } }
get_data（）メソッドの最後の3行は、 キャプチャ画像をビューに提供します。
そして、これがビューそのものです-closed_view.php
<div class="closedLoginForm"> <input type="text" class="loginInput" value="<?php echo $data['language']['login']; ?>"><br> <input type="password" class="passworldInput" value="<?php echo $data['language']['passworld']; ?>"> <div id="capcha" title="<?php echo $data['language']['reload_image']; ?>"> <img class="yandexCapchaImage" src="" alt="<?php echo $data['language']['capcha']; ?>"> </div> <input type="text" class="capchaInput" value="<?php echo $data['language']['capcha']; ?>"> <div class="loginButton"><div class="loginBottonInner"><?php echo $data['language']['loginBotton']; ?></div></div> <div class="loginError"></div> </div> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/closed.js"></script> <script type="text/javascript" src="/js/login.js"></script>
プレゼンテーションからわかるように、htmlコードにはフォームタグがありません。これは、承認にAJAXを使用する可能性が高いことを意味します 。
ビューには、ログイン、パスワード、キャプチャを入力するフィールド、キャプチャ画像自体、送信ボタンの3つのフィールドがあります。
前述のように、 login.jsの AJAXリクエストを使用してフォームを送信します
コードはたくさんありますが、それがポイントです。
$(document).ready(function(){ var capchaStartText = $(".capchaInput").val(); var passworldStartText = $(".passworldInput").val(); function login() { var login = $(".loginInput"), passworld = $(".passworldInput"), capcha = $(".capchaInput"), buttontext = $(".loginBottonInner").html(), captchasrc = $(".yandexCapchaImage").attr("src"); var pos = captchasrc.indexOf("="); var key = captchasrc.substr(pos+1); $.ajax({ type: "POST", url: "/app/modules/module_login.php", dataType: "json", data: {login:login.val(), passworld:passworld.val(), captchaCode:key, captchaValue:capcha.val()}, beforeSend: function(){ $(".loginBottonInner").html("..."); } }).done(function(data){ if (data.captcha == 1 && data.login == 1) { location.reload(); } if (data.login == 0) { capchaRenew(); $(".loginBottonInner").html(buttontext); login.focus(); login.select(); passworld.val(passworldStartText); capcha.val(capchaStartText); $(".loginError").html(data.login_error); } if (data.captcha == 0 && data.login == 1) { capchaRenew(); $(".loginBottonInner").html(buttontext); capcha.val(capchaStartText); capcha.focus(); $(".loginError").html(data.captcha_error); } }); } function capchaRenew() { $.ajax({ type: "POST", data: {check:"ok"}, url: "/app/modules/module_capcha_renew.php" }).done(function(html) { $(".yandexCapchaImage").attr("src",html); console.log(html); }); } $("#capcha").click(function(){ capchaRenew(); $(".capchaInput").focus(); }); $(".loginBottonInner").click(function() { login(); }); $(window).keydown(function(eventObject){ if ($(".closedLoginForm input").is(":focus") == true) { if (eventObject.which == 13) { login(); } } }); });
次に、キャプチャを確認する必要があります。
これを行うには、フォームのフィールドから「送信」ボタンをクリックするか、Enterボタンを押します（ユーザーを愛しています）。すべてのデータを取得します。ログイン、パスワード、captcha入力フィールドにユーザーが入力した文字セット、および上記で説明した別のパラメーター-同じcaptchaパラメーター（ yandexCaptcha :: get（）メソッドの説明を参照）。
実際、このパラメーターは、 ユーザーがキャプチャ画像のURLの一部としてページに最初に表示する正しいキャプチャ入力を確認するためのキーです 。 Yandexは同じyandexCaptcha :: get（）メソッドですべてを提供します。 あとは、イメージアドレスのURLからcaptchaパラメーターを「分離」するだけです。
AJAXリクエストを使用してデータを転送するmodule_login.phpファイルは、サイト上のユーザーを認証するために使用するメインクラスであるLoginクラスのインスタンスを作成し、 siteLogin（）メソッドを呼び出します。このメソッドは認証結果に関する情報を返し、ログインとパスワードの組み合わせが正しいことを確認し、私たちが最も興味を持っているのは、 キャプチャ入力の正確さです。
echo Login::siteLogin($login, $passworld, $captchaCode, $captchaValue);
すでに予定よりもはるかに長いことが判明した私の記事が完全に巨大にならないように、captchaのチェックを担当するLogin :: siteLoginメソッドの部分のみを提供します。
class_login.php
実際にコード
class Login { static function siteLogin($login, $password, $captchaCode, $captchaValue) { $path = $_SERVER['DOCUMENT_ROOT']; session_start(); $langArray = parse_ini_file($path."/app/languages/".$_SESSION['lang']."_login.ini"); $login = htmlspecialchars($login); $password = htmlspecialchars($password); $json = Array(); $json['captcha'] = 0; $json['login'] = 0; $json['captcha_error'] = $langArray['captcha_error']; $json['login_error'] = $langArray['login_error']; $key = " API "; $response = file_get_contents("http://cleanweb-api.yandex.ru/1.0/check-captcha?key=".$key."&captcha=".$captchaCode."&value=".$captchaValue); if (strpos($response,"<ok")){ $json['captcha'] = 1; unset($json['captcha_error']); } require_once $path."/app/core/class/class_dbconnect.php"; $mysqli = dbconnect::connect(); $sql = "SELECT `id`,`login`,`passworld`,`rights` FROM `users` WHERE `login` = '".$login."'"; $qr = $mysqli->query($sql); $quant = $qr->num_rows; if ($quant <> 0) { $row = $qr->fetch_assoc(); if ($row['passworld'] == hash("whirlpool","super".$password."orgy")) { $json['login'] = 1; unset($json['login_error']); if ($json['login'] == 1 and $json['captcha'] == 1) { //! } } } return json_encode($json); } }
*読者が脚の成長元を理解できるように、コード全体を提供することを考えて決定しました。
キャプチャ検証の本質は、Yandex APIによるGETリクエストです。
したがって-ログイン/パスワード+ captchaの正しい組み合わせがテストに合格しました-ばんざーい！ 認可に合格しました。
さらに、それが記事の最も重要なポイントになると思います。 私はまだ読んでいる人の注意を引きます-それはすべてアプリケーションのアーキテクチャに帰着します。
ユーザーがキャプチャを入力するときに間違えたか、単に画像内のテキストを解析できず、更新したいとします。
注意-彼は余分なジェスチャーをする必要はありません
エラーが発生した場合、ユーザーが以前に入力したユーザー名とパスワードが保存され、キャプチャ画像が自動的に更新されます。 そして、ユーザーがキャプチャを更新することに決めた場合は、それをクリックするだけです。
login.jsファイルの内容に戻り、 capchaRenew（）関数を考えてみましょう。
function capchaRenew() { $.ajax({ type: "POST", data: {check:"ok"}, url: "/app/modules/module_capcha_renew.php" }).done(function(html) { $(".yandexCapchaImage").attr("src",html); }); }
だから-私たちはモジュールmodule_capcha_renew.phpモジュールにリクエストを行うだけです。
ページをロードするときにアクセスしたのと同じyandexCaptcha :: get（）メソッドを使用してcaptchaを再作成し、ユーザーに新しい画像のアドレスを提供します。
その結果、十分にユーザーフレンドリーな完全に機能するキャプチャがあります。 そして、最も重要なことは、同じreCapchaとは異なり、iframeはありません。すべてのコードは非常に簡潔で、完全に制御されています。