検索
ホームページバックエンド開発PHPチュートリアル美しく安全なログイン インターフェイスの Ajax 実装の詳細な例

この記事は主に美しく安全なログインインターフェイスを実装するための Ajax メソッドを詳しく紹介します。興味のある方は参考にしていただければ幸いです。

ログインインターフェースは情報システムが提供する必須機能であり、利用者にメンテナンス情報を提供するインターフェースです。次に、使用されるテクノロジーは ASP.NET + jQuery です

Ajax ログインは、ユーザー名を入力した後を中心に説明します。 Ajax を使用して情報をサーバーに送信します。サーバーはユーザーが存在すると判断し、ログインは成功し、ユーザーは管理インターフェイスにリダイレクトされます (場合によっては Cookie を書き込むか、セッションを使用する必要があります)。これについてはここでは説明しません)。ユーザーが存在しない場合は、ログイン失敗を求めるメッセージが表示されます。

基本的なフローチャート

は次のとおりです

上記は、安全なログインを作成するために、Ajax を使用してパスワードをサーバーに送信する前に、MD5 を使用してパスワードを暗号化することができます。パスワードも暗号化されてデータベース文字列に保存されます。 jQuery にはこのような MD5 暗号化プラグインがあり、非常に便利です。

プロセスがわかれば、簡単に実装できます。以下は、いくつかの主なコードです

Default.aspx: 主にハイパーリンクを提供します。クリックすると、thickbox が呼び出され、ポップアップ ページが開きます。

<p style="margin-left:50px; margin-top:50px; ">
欢迎使用后台,
<a href="Login.htm?TB_iframe&height=180&width=350&modal=true" class="thickbox" id="myToolTip" title="点击登录,进入后台管理" >
点击登录!</a>
                
继续浏览前台,<a href="../Default.aspx">返回前台</a>

login.htm: ログインロジックを担当する実際のログインインターフェース


<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
 $().ready(function () {
  $(&#39;#Login&#39;).click(function () {
   if ($(&#39;#username&#39;).val() == "" || $(&#39;#password&#39;).val() == "") {
    alert("用户名或密码不能为空!");
   }
   else {
    $.ajax({
     type: "POST",
     url: "Ajax/LoginHandler.ashx",
     data: "username=" + escape($(&#39;#username&#39;).val()) + "&password=" + escape($(&#39;#password&#39;).val()),
     beforeSend: function () {
      $("#loading").css("display", "block"); //点击登录后显示loading,隐藏输入框
      $("#login").css("display", "none");
     },
     success: function (msg) {
      $("#loading").hide(); //隐藏loading
      if (msg == "success") {
       //parent.tb_remove();
       parent.document.location.href = "admin.htm"; //如果登录成功则跳到管理界面
       parent.tb_remove();
      }
      if (msg == "fail") {
       alert("登录失败!");
      }
     },
     complete: function (data) {
      $("#loading").css("display", "none"); //点击登录后显示loading,隐藏输入框
      $("#login").css("display", "block");
     },
     error: function (XMLHttpRequest, textStatus, thrownError) {
     }
    });
   }
  });
 });
</script>
<p id="loading" style="text-align: center; display: none; padding-top: 10%">
 <img src="/static/imghwm/default1.png"  data-src="images/loadingajax.gif"  class="lazy"   alt="loading" />
</p>
<p id="login" style="text-align: center">
<p style="position:absolute; right:0; top:0"><img src="/static/imghwm/default1.png"  data-src="images/closebox.png"  class="lazy"   onclick="parent.tb_remove()" alt="点击关闭"   style="max-width:90%" /></p>
 <table border="0" cellpadding="3" cellspacing="3" style="margin: 0 auto;">
  <tr>
   <td style="text-align: right; padding: 10px">
    <label>
     用户名:</label>
   </td>
   <td>
    <input id="username" type="text" size="20" />
   </td>
  </tr>
  <tr>
   <td style="text-align: right; padding: 10px">
    <label>
     密码:</label>
   </td>
   <td>
    <input id="password" type="password" size="20" />
   </td>
  </tr>
  <tr align="right">
   <td colspan="2">
    <input type="submit" id="Login" value="  登 录  " style="margin-right: 50px"> 
    <input type="submit" id="LoginCancel" value="  取 消  " onclick="parent.tb_remove()">
   </td>
  </tr>
 </table>
</p>

LoginHandler.ashx: Ajax 処理クラス、単純なロジック


string username = context.Request["username"].ToString();
string password = context.Request["password"].ToString();
//context.Response.Write(password);如果使用加密,则写入数据库要加密后的字段,然后登陆的时候就用加密后的字符串匹配
//此处连接数据库查看是否有此用户,此处为了方便起见,直接判断
if (username == "admin" && password == "1")
 {
 context.Response.Write("success");
 //存储session
 }
 else
 {
 context.Response.Write("fail");
 }

OK、簡単なログイン関数が完成しましたもちろん、ログイン時のパスワードは暗号化されません。

jQueryの暗号化プラグインMD5プラグインを見てみましょう。md5.jsへの参照を追加すると、$.md5()関数を使って文字列を暗号化することができます。上記のコードを次のように変更します。暗号化された文字列
login.htm を参照してください:


data: "username=" + escape($(&#39;#username&#39;).val()) + "&password=" + $.md5(escape($(&#39;#password&#39;).val())),

success: function (msg) {
      $("#loading").hide(); //隐藏loading
      alert(msg);
      if (msg == "success") {
       //parent.tb_remove();
       parent.document.location.href = "admin.htm"; //如果登录成功则跳到管理界面
       parent.tb_remove();
      }
      if (msg == "fail") {
       alert("登录失败!");
      }
     }

LoginHandler.ashx にパスワードを追加し、return:

context.Response.Write(password);

ok,再度実行すると、プログラムは MD5 で暗号化されたパスワード文字列をポップアップ表示します。

上記は比較的単純なビューで、ダウンロード アドレスは次のとおりです: AjaxLogin関連する推奨事項:

jQuery+Angular を使用してログイン インターフェイス検証コード関数を実装する方法の詳細な説明


CSS3 を使用してマテリアルを作成する-デザインスタイルのログインインターフェイスの例

PHP登録とログインインターフェイスの実装ケース(推奨)_phpの例

以上が美しく安全なログイン インターフェイスの Ajax 実装の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
PHPおよびPython:さまざまなパラダイムが説明されていますPHPおよびPython:さまざまなパラダイムが説明されていますApr 18, 2025 am 12:26 AM

PHPは主に手順プログラミングですが、オブジェクト指向プログラミング(OOP)もサポートしています。 Pythonは、OOP、機能、手続き上のプログラミングなど、さまざまなパラダイムをサポートしています。 PHPはWeb開発に適しており、Pythonはデータ分析や機械学習などのさまざまなアプリケーションに適しています。

PHPとPython:彼らの歴史を深く掘り下げますPHPとPython:彼らの歴史を深く掘り下げますApr 18, 2025 am 12:25 AM

PHPは1994年に発信され、Rasmuslerdorfによって開発されました。もともとはウェブサイトの訪問者を追跡するために使用され、サーバー側のスクリプト言語に徐々に進化し、Web開発で広く使用されていました。 Pythonは、1980年代後半にGuidovan Rossumによって開発され、1991年に最初にリリースされました。コードの読みやすさとシンプルさを強調し、科学的コンピューティング、データ分析、その他の分野に適しています。

PHPとPythonの選択:ガイドPHPとPythonの選択:ガイドApr 18, 2025 am 12:24 AM

PHPはWeb開発と迅速なプロトタイピングに適しており、Pythonはデータサイエンスと機械学習に適しています。 1.PHPは、単純な構文と迅速な開発に適した動的なWeb開発に使用されます。 2。Pythonには簡潔な構文があり、複数のフィールドに適しており、強力なライブラリエコシステムがあります。

PHPとフレームワーク:言語の近代化PHPとフレームワーク:言語の近代化Apr 18, 2025 am 12:14 AM

PHPは、多数のWebサイトとアプリケーションをサポートし、フレームワークを通じて開発ニーズに適応するため、近代化プロセスで依然として重要です。 1.PHP7はパフォーマンスを向上させ、新機能を紹介します。 2。Laravel、Symfony、Codeigniterなどの最新のフレームワークは、開発を簡素化し、コードの品質を向上させます。 3.パフォーマンスの最適化とベストプラクティスは、アプリケーションの効率をさらに改善します。

PHPの影響:Web開発などPHPの影響:Web開発などApr 18, 2025 am 12:10 AM

phphassiblasifly-impactedwebdevevermentandsbeyondit.1)itpowersmajorplatformslikewordpratsandexcelsindatabase interactions.2)php'sadaptableability allowsitale forlargeapplicationsusingframeworkslikelavel.3)

スカラータイプ、リターンタイプ、ユニオンタイプ、ヌル可能なタイプなど、PHPタイプのヒントはどのように機能しますか?スカラータイプ、リターンタイプ、ユニオンタイプ、ヌル可能なタイプなど、PHPタイプのヒントはどのように機能しますか?Apr 17, 2025 am 12:25 AM

PHPタイプは、コードの品質と読みやすさを向上させるためのプロンプトがあります。 1)スカラータイプのヒント:php7.0であるため、基本データ型は、int、floatなどの関数パラメーターで指定できます。 3)ユニオンタイプのプロンプト:PHP8.0であるため、関数パラメーターまたは戻り値で複数のタイプを指定することができます。 4)Nullable Typeプロンプト:null値を含めることができ、null値を返す可能性のある機能を処理できます。

PHPは、オブジェクトのクローニング(クローンキーワード)と__Clone Magicメソッドをどのように処理しますか?PHPは、オブジェクトのクローニング(クローンキーワード)と__Clone Magicメソッドをどのように処理しますか?Apr 17, 2025 am 12:24 AM

PHPでは、クローンキーワードを使用してオブジェクトのコピーを作成し、\ _ \ _クローンマジックメソッドを使用してクローン動作をカスタマイズします。 1.クローンキーワードを使用して浅いコピーを作成し、オブジェクトのプロパティをクローン化しますが、オブジェクトのプロパティはクローニングしません。 2。\ _ \ _クローン法は、浅いコピーの問題を避けるために、ネストされたオブジェクトを深くコピーできます。 3.クローニングにおける円形の参照とパフォーマンスの問題を避けるために注意し、クローニング操作を最適化して効率を向上させます。

PHP対Python:ユースケースとアプリケーションPHP対Python:ユースケースとアプリケーションApr 17, 2025 am 12:23 AM

PHPはWeb開発およびコンテンツ管理システムに適しており、Pythonはデータサイエンス、機械学習、自動化スクリプトに適しています。 1.PHPは、高速でスケーラブルなWebサイトとアプリケーションの構築においてうまく機能し、WordPressなどのCMSで一般的に使用されます。 2。Pythonは、NumpyやTensorflowなどの豊富なライブラリを使用して、データサイエンスと機械学習の分野で驚くほどパフォーマンスを発揮しています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。